From afad764a00ca909f1328c0fa3d3cee38905d985b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 4 Jan 2024 15:32:46 +1100
Subject: [PATCH] feat(ui): make badges a bit paler

too stabby in the eye region
---
 .../common/components/InvAccordion/InvAccordionButton.tsx | 8 +-------
 .../frontend/web/src/common/components/InvBadge/theme.ts  | 5 ++---
 .../frontend/web/src/common/components/InvTabs/InvTab.tsx | 6 +-----
 3 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx b/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx
index 858c1e67cb..4cb45a99f6 100644
--- a/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx
+++ b/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx
@@ -21,13 +21,7 @@ export const InvAccordionButton = (props: InvAccordionButtonProps) => {
       {children}
       <Spacer />
       {badges?.map((b, i) => (
-        <InvBadge
-          key={`${b}.${i}`}
-          variant="solid"
-          background="blue.400"
-          fontSize={10}
-          fontWeight={800}
-        >
+        <InvBadge key={`${b}.${i}`} colorScheme="blue">
           {b}
         </InvBadge>
       ))}
diff --git a/invokeai/frontend/web/src/common/components/InvBadge/theme.ts b/invokeai/frontend/web/src/common/components/InvBadge/theme.ts
index 58032158c9..15dc15081a 100644
--- a/invokeai/frontend/web/src/common/components/InvBadge/theme.ts
+++ b/invokeai/frontend/web/src/common/components/InvBadge/theme.ts
@@ -1,13 +1,13 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
 
 const baseStyle = defineStyle((props) => ({
-  fontSize: '9px',
+  fontSize: 10,
   px: 2,
   py: 1,
   minW: 4,
   lineHeight: 1,
   borderRadius: 'sm',
-  bg: `${props.colorScheme}.300`,
+  bg: `${props.colorScheme}.200`,
   color: 'base.900',
   fontWeight: 'bold',
   letterSpacing: 0.5,
@@ -20,7 +20,6 @@ const baseStyle = defineStyle((props) => ({
 export const badgeTheme = defineStyleConfig({
   baseStyle,
   defaultProps: {
-    variant: 'solid',
     colorScheme: 'base',
   },
 });
diff --git a/invokeai/frontend/web/src/common/components/InvTabs/InvTab.tsx b/invokeai/frontend/web/src/common/components/InvTabs/InvTab.tsx
index eb6cbe5533..1e3f80d5cc 100644
--- a/invokeai/frontend/web/src/common/components/InvTabs/InvTab.tsx
+++ b/invokeai/frontend/web/src/common/components/InvTabs/InvTab.tsx
@@ -11,11 +11,7 @@ export const InvTab = memo(
       <ChakraTab ref={ref} {...rest}>
         {children}
         <Spacer />
-        {badges?.map((b, i) => (
-          <InvBadge key={`${b}.${i}`} colorScheme="blue">
-            {b}
-          </InvBadge>
-        ))}
+        {badges?.map((b, i) => <InvBadge key={`${b}.${i}`} colorScheme='invokeYellow'>{b}</InvBadge>)}
       </ChakraTab>
     );
   })