feat(ui): statusindicator changes

We are now using the lefthand vertical strip for the settings menu button. This is a good place for the status indicator.

Really, we only need to display something *if there is a problem*. If the app is processing, the progress bar indicates that.

For the case where the panels are collapsed, I'll add the floating buttons back in some form, and we'll indicate via those if the app is processing something.

invokeai/frontend/web/src/common/components/InvButton/theme.ts

@@ -204,7 +204,7 @@ export const buttonTheme = defineStyleConfig({
         _hover: {
           bg: 'none',
           svg: {
-            fill: 'base.500',
+            fill: 'base.400',
           },
         },
         '&[data-selected="true"]': {

invokeai/frontend/web/src/common/components/InvProgress/theme.ts

@@ -1,35 +1,57 @@
 import { progressAnatomy as parts } from '@chakra-ui/anatomy';
-import {
-  createMultiStyleConfigHelpers,
-  defineStyle,
-} from '@chakra-ui/styled-system';
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+import { generateStripe, getColorVar } from '@chakra-ui/theme-tools';
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const invokeAIFilledTrack = defineStyle((_props) => ({
-  bg: 'blue.500',
-}));
-
-const invokeAITrack = defineStyle((_props) => {
-  return {
-    bg: 'base.800',
-  };
-});
-
-const invokeAI = definePartsStyle((props) => ({
-  filledTrack: invokeAIFilledTrack(props),
-  track: invokeAITrack(props),
-}));
-
 export const progressTheme = defineMultiStyleConfig({
-  baseStyle: {
-    track: { borderRadius: '2px' },
-  },
-  variants: {
-    invokeAI,
-  },
-  defaultProps: {
-    variant: 'invokeAI',
-  },
+  baseStyle: definePartsStyle(
+    ({ theme: t, colorScheme: c, hasStripe, isIndeterminate }) => {
+      const bgColor = `${c}.300`;
+      const addStripe = !isIndeterminate && hasStripe;
+      const gradient = `linear-gradient(
+      to right,
+      transparent 0%,
+      ${getColorVar(t, bgColor)} 50%,
+      transparent 100%
+    )`;
+      return {
+        track: {
+          borderRadius: '2px',
+          bg: 'base.800',
+        },
+        filledTrack: {
+          borderRadius: '2px',
+          ...(addStripe && generateStripe()),
+          ...(isIndeterminate ? { bgImage: gradient } : { bgColor }),
+        },
+      };
+    }
+  ),
 });
+// export const progressTheme = defineMultiStyleConfig({
+//   baseStyle: definePartsStyle(
+//     ({ theme: t, colorScheme: c, hasStripe, isIndeterminate }) => {
+//       const bgColor = `${c}.500`;
+//       const addStripe = !isIndeterminate && hasStripe;
+//       const gradient = `linear-gradient(
+//       to right,
+//       transparent 0%,
+//       ${getColorVar(t, bgColor)} 50%,
+//       transparent 100%
+//     )`;
+//       return {
+//         track: {
+//           borderRadius: '2px',
+//           bg: 'base.800',
+//         },
+//         filledTrack: {
+//           borderRadius: '2px',
+//           ...(addStripe && generateStripe("xs")),
+//           ...(isIndeterminate ? { bgImage: gradient } : { bgColor }),
+//         },
+//       };
+//     }
+//   ),
+// });

invokeai/frontend/web/src/common/components/InvTooltip/InvTooltip.tsx

@@ -12,6 +12,7 @@ export const InvTooltip = memo(
           ref={ref}
           hasArrow={hasArrow}
           placement={placement}
+          arrowSize={8}
           {...rest}
         >
           {children}

invokeai/frontend/web/src/common/components/InvTooltip/theme.ts

@@ -3,14 +3,15 @@ import { cssVar } from '@chakra-ui/theme-tools';
 
 const $arrowBg = cssVar('popper-arrow-bg');
 
-// define the base component styles
 const baseStyle = defineStyle(() => ({
   borderRadius: 'md',
   shadow: 'dark-lg',
   bg: 'base.200',
   color: 'base.800',
   [$arrowBg.variable]: 'colors.base.200',
-  pb: 1.5,
+  pt: 1,
+  px: 2,
+  pb: 1,
 }));
 
 // export the component theme