Fix Invoke Progress Bar (#3626)

@blessedcoolant it looks like with the new theme buttons not being
transparent the progress bar was completely hidden, I moved to be on
top, however it was not transparent so it hid the invoke text, after
trying for a while couldn't get it to be transparent, so I just made the
height 15%,

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

@@ -45,6 +45,7 @@ export default function NodeInvokeButton(props: InvokeButton) {
       <Box style={{ position: 'relative' }}>
         {!isReady && (
           <Box
+            borderRadius="base"
             style={{
               position: 'absolute',
               bottom: '0',
@@ -52,7 +53,6 @@ export default function NodeInvokeButton(props: InvokeButton) {
               right: '0',
               height: '100%',
               overflow: 'clip',
-              borderRadius: 4,
             }}
           >
             <ProgressBar />
@@ -71,6 +71,12 @@ export default function NodeInvokeButton(props: InvokeButton) {
             tooltipProps={{ placement: 'bottom' }}
             colorScheme="accent"
             id="invoke-button"
+            _disabled={{
+              background: 'none',
+              _hover: {
+                background: 'none',
+              },
+            }}
             {...rest}
           />
         ) : (
@@ -84,6 +90,12 @@ export default function NodeInvokeButton(props: InvokeButton) {
             colorScheme="accent"
             id="invoke-button"
             fontWeight={700}
+            _disabled={{
+              background: 'none',
+              _hover: {
+                background: 'none',
+              },
+            }}
             {...rest}
           >
             Invoke

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

@@ -48,6 +48,7 @@ export default function InvokeButton(props: InvokeButton) {
       <Box style={{ position: 'relative' }}>
         {!isReady && (
           <Box
+            borderRadius="base"
             style={{
               position: 'absolute',
               bottom: '0',
@@ -55,8 +56,8 @@ export default function InvokeButton(props: InvokeButton) {
               right: '0',
               height: '100%',
               overflow: 'clip',
-              borderRadius: 4,
             }}
+            {...rest}
           >
             <ProgressBar />
           </Box>
@@ -74,6 +75,12 @@ export default function InvokeButton(props: InvokeButton) {
             tooltipProps={{ placement: 'top' }}
             colorScheme="accent"
             id="invoke-button"
+            _disabled={{
+              background: 'none',
+              _hover: {
+                background: 'none',
+              },
+            }}
             {...rest}
           />
         ) : (
@@ -87,6 +94,12 @@ export default function InvokeButton(props: InvokeButton) {
             colorScheme="accent"
             id="invoke-button"
             fontWeight={700}
+            _disabled={{
+              background: 'none',
+              _hover: {
+                background: 'none',
+              },
+            }}
             {...rest}
           >
             Invoke

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,24 +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),
   };
 });