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