From 0712294c1791eab17c42c9acb1520e5889f0afac Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Tue, 18 Jul 2023 00:29:20 +1200
Subject: [PATCH] fix: Model Manager light mode color fixes

---
 .../AddModelsPanel/SearchFolderForm.tsx       |  7 +++--
 .../subpanels/MergeModelsPanel.tsx            | 26 +++++++++----------
 .../web/src/theme/components/button.ts        |  2 +-
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx
index 255307f6f4..811b65426b 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx
@@ -50,7 +50,7 @@ function SearchFolderForm() {
           gap: 2,
           p: 4,
           borderRadius: 4,
-          background: 'base.300',
+          background: 'base.200',
           alignItems: 'center',
           _dark: {
             background: 'base.800',
@@ -60,6 +60,7 @@ function SearchFolderForm() {
         <Flex w="100%" alignItems="center" gap={4} minH={12}>
           <Text
             sx={{
+              fontSize: 'sm',
               fontWeight: 600,
               color: 'base.700',
               minW: 'max-content',
@@ -80,8 +81,10 @@ function SearchFolderForm() {
                 w: '100%',
                 p: 2,
                 px: 4,
-                bg: 'base.200',
+                bg: 'base.300',
                 borderRadius: 4,
+                fontSize: 'sm',
+                fontWeight: 'bold',
                 _dark: { bg: 'base.700' },
               }}
             >
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/MergeModelsPanel.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/MergeModelsPanel.tsx
index bd03092085..e6b7b728bf 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/MergeModelsPanel.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/MergeModelsPanel.tsx
@@ -1,11 +1,4 @@
-import {
-  Flex,
-  Radio,
-  RadioGroup,
-  Text,
-  Tooltip,
-  useColorMode,
-} from '@chakra-ui/react';
+import { Flex, Radio, RadioGroup, Text, Tooltip } from '@chakra-ui/react';
 import { makeToast } from 'app/components/Toaster';
 import { useAppDispatch } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
@@ -23,7 +16,6 @@ import {
   useMergeMainModelsMutation,
 } from 'services/api/endpoints/models';
 import { BaseModelType, MergeModelConfig } from 'services/api/types';
-import { mode } from 'theme/util/mode';
 
 const baseModelTypeSelectData = [
   { label: 'Stable Diffusion 1', value: 'sd-1' },
@@ -38,7 +30,6 @@ type MergeInterpolationMethods =
 
 export default function MergeModelsPanel() {
   const { t } = useTranslation();
-  const { colorMode } = useColorMode();
   const dispatch = useAppDispatch();
 
   const { data } = useGetMainModelsQuery();
@@ -227,7 +218,10 @@ export default function MergeModelsPanel() {
           padding: 4,
           borderRadius: 'base',
           gap: 4,
-          bg: mode('base.100', 'base.800')(colorMode),
+          bg: 'base.200',
+          _dark: {
+            bg: 'base.800',
+          },
         }}
       >
         <IAISlider
@@ -252,7 +246,10 @@ export default function MergeModelsPanel() {
           padding: 4,
           borderRadius: 'base',
           gap: 4,
-          bg: mode('base.100', 'base.800')(colorMode),
+          bg: 'base.200',
+          _dark: {
+            bg: 'base.800',
+          },
         }}
       >
         <Text fontWeight={500} fontSize="sm" variant="subtext">
@@ -294,7 +291,10 @@ export default function MergeModelsPanel() {
           padding: 4,
           borderRadius: 'base',
           gap: 4,
-          bg: 'base.900',
+          bg: 'base.200',
+          _dark: {
+            bg: 'base.900',
+          },
         }}
       >
         <Flex columnGap={4}>
diff --git a/invokeai/frontend/web/src/theme/components/button.ts b/invokeai/frontend/web/src/theme/components/button.ts
index a59b9df826..3a1a56a1e9 100644
--- a/invokeai/frontend/web/src/theme/components/button.ts
+++ b/invokeai/frontend/web/src/theme/components/button.ts
@@ -16,7 +16,7 @@ const invokeAI = defineStyle((props) => {
     };
 
     return {
-      bg: mode('base.200', 'base.600')(props),
+      bg: mode('base.250', 'base.600')(props),
       color: mode('base.850', 'base.100')(props),
       borderRadius: 'base',
       svg: {