From 72d64513d05b996ee476666c94938f81bbe50576 Mon Sep 17 00:00:00 2001 From: mickr777 <115216705+mickr777@users.noreply.github.com> Date: Sun, 2 Jul 2023 15:05:32 +1000 Subject: [PATCH 1/4] add borderBottomRadius: '5px', --- invokeai/frontend/web/src/theme/components/progress.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/invokeai/frontend/web/src/theme/components/progress.ts b/invokeai/frontend/web/src/theme/components/progress.ts index 87b6b7af01..d90ac57768 100644 --- a/invokeai/frontend/web/src/theme/components/progress.ts +++ b/invokeai/frontend/web/src/theme/components/progress.ts @@ -21,6 +21,7 @@ const invokeAIFilledTrack = defineStyle((_props) => ({ const invokeAITrack = defineStyle((_props) => { return { bg: 'none', + borderBottomRadius: '5px', }; }); From 45a551125d5fd676731d679e91ce5855cadbcf95 Mon Sep 17 00:00:00 2001 From: mickr777 <115216705+mickr777@users.noreply.github.com> Date: Sun, 2 Jul 2023 15:06:32 +1000 Subject: [PATCH 2/4] Update NodeInvokeButton.tsx --- .../nodes/components/ui/NodeInvokeButton.tsx | 29 +++++++++---------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/invokeai/frontend/web/src/features/nodes/components/ui/NodeInvokeButton.tsx b/invokeai/frontend/web/src/features/nodes/components/ui/NodeInvokeButton.tsx index be5e5a943e..450287ecf3 100644 --- a/invokeai/frontend/web/src/features/nodes/components/ui/NodeInvokeButton.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/ui/NodeInvokeButton.tsx @@ -43,21 +43,6 @@ export default function NodeInvokeButton(props: InvokeButton) { return ( - {!isReady && ( - - - - )} {iconButton ? ( )} + {!isReady && ( + + + + )} ); From a6334750cb99ff80c4d6446ddb06aa00e31ec643 Mon Sep 17 00:00:00 2001 From: mickr777 <115216705+mickr777@users.noreply.github.com> Date: Sun, 2 Jul 2023 15:07:01 +1000 Subject: [PATCH 3/4] Update InvokeButton.tsx --- .../ProcessButtons/InvokeButton.tsx | 29 +++++++++---------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx index 6f82562e48..532b597826 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx @@ -46,21 +46,6 @@ export default function InvokeButton(props: InvokeButton) { return ( - {!isReady && ( - - - - )} {iconButton ? ( )} + {!isReady && ( + + + + )} ); From f399b36ae66fd9b67d8fcbdc2285b53e97fa4083 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Sun, 2 Jul 2023 18:49:24 +1200 Subject: [PATCH 4/4] fix: Progress Bar being broken --- .../nodes/components/ui/NodeInvokeButton.tsx | 41 +++++++++++------- .../ProcessButtons/InvokeButton.tsx | 42 ++++++++++++------- .../system/components/ProgressBar.tsx | 1 + .../web/src/theme/components/progress.ts | 9 ++-- 4 files changed, 61 insertions(+), 32 deletions(-) diff --git a/invokeai/frontend/web/src/features/nodes/components/ui/NodeInvokeButton.tsx b/invokeai/frontend/web/src/features/nodes/components/ui/NodeInvokeButton.tsx index 450287ecf3..740fecc2a4 100644 --- a/invokeai/frontend/web/src/features/nodes/components/ui/NodeInvokeButton.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/ui/NodeInvokeButton.tsx @@ -43,6 +43,21 @@ export default function NodeInvokeButton(props: InvokeButton) { return ( + {!isReady && ( + + + + )} {iconButton ? ( ) : ( @@ -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 )} - {!isReady && ( - - - - )} ); diff --git a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx index 532b597826..63258d0a81 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx @@ -46,6 +46,22 @@ export default function InvokeButton(props: InvokeButton) { return ( + {!isReady && ( + + + + )} {iconButton ? ( ) : ( @@ -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 )} - {!isReady && ( - - - - )} ); diff --git a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx index 140a8b5978..34bd394214 100644 --- a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx +++ b/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" /> ); }; diff --git a/invokeai/frontend/web/src/theme/components/progress.ts b/invokeai/frontend/web/src/theme/components/progress.ts index d90ac57768..6a8915422f 100644 --- a/invokeai/frontend/web/src/theme/components/progress.ts +++ b/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', - borderBottomRadius: '5px', + bg: mode(`${c}.200`, `${c}.700`)(_props), }; });