fix: Progress Bar being broken

invokeai/frontend/web/src/features/nodes/components/ui/NodeInvokeButton.tsx

@@ -43,6 +43,21 @@ export default function NodeInvokeButton(props: InvokeButton) {
   return (
     <Box style={{ flexGrow: 4 }} position="relative">
       <Box style={{ position: 'relative' }}>
+        {!isReady && (
+          <Box
+            borderRadius="base"
+            style={{
+              position: 'absolute',
+              bottom: '0',
+              left: '0',
+              right: '0',
+              height: '100%',
+              overflow: 'clip',
+            }}
+          >
+            <ProgressBar />
+          </Box>
+        )}
         {iconButton ? (
           <IAIIconButton
             aria-label={t('parameters.invoke')}
@@ -56,6 +71,12 @@ export default function NodeInvokeButton(props: InvokeButton) {
             tooltipProps={{ placement: 'bottom' }}
             colorScheme="accent"
             id="invoke-button"
+            _disabled={{
+              background: 'none',
+              _hover: {
+                background: 'none',
+              },
+            }}
             {...rest}
           />
         ) : (
@@ -69,25 +90,17 @@ export default function NodeInvokeButton(props: InvokeButton) {
             colorScheme="accent"
             id="invoke-button"
             fontWeight={700}
+            _disabled={{
+              background: 'none',
+              _hover: {
+                background: 'none',
+              },
+            }}
             {...rest}
           >
             Invoke
           </IAIButton>
         )}
-        {!isReady && (
-          <Box
-            style={{
-              position: 'absolute',
-              bottom: '0',
-              left: '0',
-              right: '0',
-              height: '15%',
-              overflow: 'clip',
-            }}
-          >
-            <ProgressBar />
-          </Box>
-        )}
       </Box>
     </Box>
   );

invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx

@@ -46,6 +46,22 @@ export default function InvokeButton(props: InvokeButton) {
   return (
     <Box style={{ flexGrow: 4 }} position="relative">
       <Box style={{ position: 'relative' }}>
+        {!isReady && (
+          <Box
+            borderRadius="base"
+            style={{
+              position: 'absolute',
+              bottom: '0',
+              left: '0',
+              right: '0',
+              height: '100%',
+              overflow: 'clip',
+            }}
+            {...rest}
+          >
+            <ProgressBar />
+          </Box>
+        )}
         {iconButton ? (
           <IAIIconButton
             aria-label={t('parameters.invoke')}
@@ -59,6 +75,12 @@ export default function InvokeButton(props: InvokeButton) {
             tooltipProps={{ placement: 'top' }}
             colorScheme="accent"
             id="invoke-button"
+            _disabled={{
+              background: 'none',
+              _hover: {
+                background: 'none',
+              },
+            }}
             {...rest}
           />
         ) : (
@@ -72,25 +94,17 @@ export default function InvokeButton(props: InvokeButton) {
             colorScheme="accent"
             id="invoke-button"
             fontWeight={700}
+            _disabled={{
+              background: 'none',
+              _hover: {
+                background: 'none',
+              },
+            }}
             {...rest}
           >
             Invoke
           </IAIButton>
         )}
-        {!isReady && (
-          <Box
-            style={{
-              position: 'absolute',
-              bottom: '0',
-              left: '0',
-              right: '0',
-              height: '15%',
-              overflow: 'clip',
-            }}
-          >
-            <ProgressBar />
-          </Box>
-        )}
       </Box>
     </Box>
   );

invokeai/frontend/web/src/features/system/components/ProgressBar.tsx

@@ -35,6 +35,7 @@ const ProgressBar = () => {
       aria-label={t('accessibility.invokeProgressBar')}
       isIndeterminate={isProcessing && !currentStatusHasSteps}
       height="full"
+      colorScheme="accent"
     />
   );
 };

invokeai/frontend/web/src/theme/components/progress.ts

@@ -3,25 +3,26 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
 const invokeAIFilledTrack = defineStyle((_props) => ({
-  bg: 'accent.600',
+  bg: 'accent.500',
   // TODO: the animation is nice but looks weird bc it is substantially longer than each step
   // so we get to 100% long before it finishes
   // transition: 'width 0.2s ease-in-out',
   _indeterminate: {
     bgGradient:
-      'linear(to-r, transparent 0%, accent.600 50%, transparent 100%);',
+      'linear(to-r, transparent 0%, accent.500 50%, transparent 100%);',
   },
 }));
 
 const invokeAITrack = defineStyle((_props) => {
+  const { colorScheme: c } = _props;
   return {
-    bg: 'none',
+    bg: mode(`${c}.200`, `${c}.700`)(_props),
-    borderBottomRadius: '5px',
   };
 });