style: Update Model Manager Styling to new format

invokeai/frontend/web/src/common/components/IAIForms/IAIFormItemWrapper.tsx

@@ -1,11 +1,13 @@
-import { Flex } from '@chakra-ui/react';
+import { Flex, useColorMode } from '@chakra-ui/react';
 import { ReactElement } from 'react';
+import { mode } from 'theme/util/mode';
 
 export function IAIFormItemWrapper({
   children,
 }: {
   children: ReactElement | ReactElement[];
 }) {
+  const { colorMode } = useColorMode();
   return (
     <Flex
       sx={{
@@ -14,7 +16,7 @@ export function IAIFormItemWrapper({
         rowGap: 4,
         borderRadius: 'base',
         width: 'full',
-        bg: 'base.900',
+        bg: mode('base.100', 'base.900')(colorMode),
       }}
     >
       {children}

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx

@@ -1,6 +1,14 @@
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+import {
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  useColorMode,
+} from '@chakra-ui/react';
 import i18n from 'i18n';
 import { ReactNode, memo } from 'react';
+import { mode } from 'theme/util/mode';
 import AddModelsPanel from './subpanels/AddModelsPanel';
 import MergeModelsPanel from './subpanels/MergeModelsPanel';
 import ModelManagerPanel from './subpanels/ModelManagerPanel';
@@ -31,41 +39,43 @@ const modelManagerTabs: ModelManagerTabInfo[] = [
   },
 ];
 
-const renderTabsList = () => {
-  const modelManagerTabListsToRender: ReactNode[] = [];
-  modelManagerTabs.forEach((modelManagerTab) => {
-    modelManagerTabListsToRender.push(
-      <Tab key={modelManagerTab.id}>{modelManagerTab.label}</Tab>
-    );
-  });
-
-  return (
-    <TabList
-      sx={{
-        w: '100%',
-        color: 'base.200',
-        flexDirection: 'row',
-        borderBottomWidth: 2,
-        borderColor: 'accent.700',
-      }}
-    >
-      {modelManagerTabListsToRender}
-    </TabList>
-  );
-};
-
-const renderTabPanels = () => {
-  const modelManagerTabPanelsToRender: ReactNode[] = [];
-  modelManagerTabs.forEach((modelManagerTab) => {
-    modelManagerTabPanelsToRender.push(
-      <TabPanel key={modelManagerTab.id}>{modelManagerTab.content}</TabPanel>
-    );
-  });
-
-  return <TabPanels sx={{ p: 2 }}>{modelManagerTabPanelsToRender}</TabPanels>;
-};
-
 const ModelManagerTab = () => {
+  const { colorMode } = useColorMode();
+
+  const renderTabsList = () => {
+    const modelManagerTabListsToRender: ReactNode[] = [];
+
+    modelManagerTabs.forEach((modelManagerTab) => {
+      modelManagerTabListsToRender.push(
+        <Tab key={modelManagerTab.id}>{modelManagerTab.label}</Tab>
+      );
+    });
+
+    return (
+      <TabList
+        sx={{
+          w: '100%',
+          color: mode('base.900', 'base.400')(colorMode),
+          flexDirection: 'row',
+          borderBottomWidth: 2,
+          borderColor: mode('accent.300', 'accent.600')(colorMode),
+        }}
+      >
+        {modelManagerTabListsToRender}
+      </TabList>
+    );
+  };
+
+  const renderTabPanels = () => {
+    const modelManagerTabPanelsToRender: ReactNode[] = [];
+    modelManagerTabs.forEach((modelManagerTab) => {
+      modelManagerTabPanelsToRender.push(
+        <TabPanel key={modelManagerTab.id}>{modelManagerTab.content}</TabPanel>
+      );
+    });
+
+    return <TabPanels sx={{ p: 2 }}>{modelManagerTabPanelsToRender}</TabPanels>;
+  };
   return (
     <Tabs
       isLazy

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel.tsx

@@ -1,4 +1,4 @@
-import { Divider, Flex } from '@chakra-ui/react';
+import { Divider, Flex, useColorMode } from '@chakra-ui/react';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
@@ -12,6 +12,8 @@ export default function AddModelsPanel() {
     (state: RootState) => state.ui.addNewModelUIOption
   );
 
+  const { colorMode } = useColorMode();
+
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
@@ -20,27 +22,13 @@ export default function AddModelsPanel() {
       <Flex columnGap={4}>
         <IAIButton
           onClick={() => dispatch(setAddNewModelUIOption('ckpt'))}
-          sx={{
+          isChecked={addNewModelUIOption == 'ckpt'}
-            backgroundColor:
-              addNewModelUIOption == 'ckpt' ? 'accent.700' : 'base.700',
-            '&:hover': {
-              backgroundColor:
-                addNewModelUIOption == 'ckpt' ? 'accent.700' : 'base.600',
-            },
-          }}
         >
           {t('modelManager.addCheckpointModel')}
         </IAIButton>
         <IAIButton
           onClick={() => dispatch(setAddNewModelUIOption('diffusers'))}
-          sx={{
+          isChecked={addNewModelUIOption == 'diffusers'}
-            backgroundColor:
-              addNewModelUIOption == 'diffusers' ? 'accent.700' : 'base.700',
-            '&:hover': {
-              backgroundColor:
-                addNewModelUIOption == 'diffusers' ? 'accent.700' : 'base.600',
-            },
-          }}
         >
           {t('modelManager.addDiffuserModel')}
         </IAIButton>

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Spinner, Text } from '@chakra-ui/react';
+import { Box, Flex, Spinner, Text, useColorMode } from '@chakra-ui/react';
 import IAIButton from 'common/components/IAIButton';
 import IAIInput from 'common/components/IAIInput';
 
@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 import type { ChangeEvent, ReactNode } from 'react';
 import React, { useMemo, useState, useTransition } from 'react';
 import { useGetMainModelsQuery } from 'services/api/endpoints/models';
+import { mode } from 'theme/util/mode';
 
 function ModelFilterButton({
   label,
@@ -20,16 +21,7 @@ function ModelFilterButton({
   onClick: () => void;
 }) {
   return (
-    <IAIButton
+    <IAIButton onClick={onClick} isChecked={isActive} size="sm">
-      onClick={onClick}
-      isActive={isActive}
-      sx={{
-        _active: {
-          bg: 'accent.750',
-        },
-      }}
-      size="sm"
-    >
       {label}
     </IAIButton>
   );
@@ -37,6 +29,7 @@ function ModelFilterButton({
 
 const ModelList = () => {
   const { data: mainModels } = useGetMainModelsQuery();
+  const { colorMode } = useColorMode();
 
   const [renderModelList, setRenderModelList] = React.useState<boolean>(false);
 
@@ -130,41 +123,46 @@ const ModelList = () => {
       <Flex flexDirection="column" rowGap={6}>
         {isSelectedFilter === 'all' && (
           <>
-            <Box>
+            {diffusersModelListItemsToRender.length > 0 && (
-              <Text
+              <Box>
-                sx={{
+                <Text
-                  fontWeight: '500',
+                  sx={{
-                  py: 2,
+                    fontWeight: '500',
-                  px: 4,
+                    py: 2,
-                  mb: 4,
+                    px: 4,
-                  borderRadius: 'base',
+                    mb: 4,
-                  width: 'max-content',
+                    borderRadius: 'base',
-                  fontSize: 'sm',
+                    width: 'max-content',
-                  bg: 'base.750',
+                    fontSize: 'sm',
-                }}
+                    bg: mode('base.100', 'base.800')(colorMode),
-              >
+                  }}
-                {t('modelManager.diffusersModels')}
+                >
-              </Text>
+                  {t('modelManager.diffusersModels')}
-              {diffusersModelListItemsToRender}
+                </Text>
-            </Box>
+                {diffusersModelListItemsToRender}
-            <Box>
+              </Box>
-              <Text
+            )}
-                sx={{
+
-                  fontWeight: '500',
+            {ckptModelListItemsToRender.length > 0 && (
-                  py: 2,
+              <Box>
-                  px: 4,
+                <Text
-                  my: 4,
+                  sx={{
-                  mx: 0,
+                    fontWeight: '500',
-                  borderRadius: 'base',
+                    py: 2,
-                  width: 'max-content',
+                    px: 4,
-                  fontSize: 'sm',
+                    my: 4,
-                  bg: 'base.750',
+                    mx: 0,
-                }}
+                    borderRadius: 'base',
-              >
+                    width: 'max-content',
-                {t('modelManager.checkpointModels')}
+                    fontSize: 'sm',
-              </Text>
+                    bg: mode('base.150', 'base.750')(colorMode),
-              {ckptModelListItemsToRender}
+                  }}
-            </Box>
+                >
+                  {t('modelManager.checkpointModels')}
+                </Text>
+                {ckptModelListItemsToRender}
+              </Box>
+            )}
           </>
         )}
 
@@ -181,7 +179,7 @@ const ModelList = () => {
         )}
       </Flex>
     );
-  }, [mainModels, searchText, t, isSelectedFilter]);
+  }, [mainModels, searchText, t, isSelectedFilter, colorMode]);
 
   return (
     <Flex flexDirection="column" rowGap={4} width="50%" minWidth="50%">

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx

@@ -1,5 +1,12 @@
 import { DeleteIcon, EditIcon } from '@chakra-ui/icons';
-import { Box, Flex, Spacer, Text, Tooltip } from '@chakra-ui/react';
+import {
+  Box,
+  Flex,
+  Spacer,
+  Text,
+  Tooltip,
+  useColorMode,
+} from '@chakra-ui/react';
 
 // import { deleteModel, requestModelChange } from 'app/socketio/actions';
 import { RootState } from 'app/store/store';
@@ -9,6 +16,8 @@ import IAIIconButton from 'common/components/IAIIconButton';
 import { setOpenModel } from 'features/system/store/systemSlice';
 import { useTranslation } from 'react-i18next';
 import { useDeleteMainModelsMutation } from 'services/api/endpoints/models';
+import { BaseModelType } from 'services/api/types';
+import { mode } from 'theme/util/mode';
 
 type ModelListItemProps = {
   modelKey: string;
@@ -21,6 +30,8 @@ export default function ModelListItem(props: ModelListItemProps) {
     (state: RootState) => state.system
   );
 
+  const { colorMode } = useColorMode();
+
   const openModel = useAppSelector(
     (state: RootState) => state.system.openModel
   );
@@ -40,7 +51,7 @@ export default function ModelListItem(props: ModelListItemProps) {
   const handleModelDelete = () => {
     const [base_model, _, model_name] = modelKey.split('/');
     deleteMainModel({
-      base_model: base_model,
+      base_model: base_model as BaseModelType,
       model_name: model_name,
     });
     dispatch(setOpenModel(null));
@@ -54,14 +65,14 @@ export default function ModelListItem(props: ModelListItemProps) {
       sx={
         modelKey === openModel
           ? {
-              bg: 'accent.750',
+              bg: mode('accent.200', 'accent.600')(colorMode),
               _hover: {
-                bg: 'accent.750',
+                bg: mode('accent.200', 'accent.600')(colorMode),
               },
             }
           : {
               _hover: {
-                bg: 'base.750',
+                bg: mode('base.100', 'base.800')(colorMode),
               },
             }
       }

invokeai/frontend/web/src/theme/components/button.ts

@@ -19,16 +19,8 @@ const invokeAI = defineStyle((props) => {
       bg: mode('base.200', 'base.600')(props),
       color: mode('base.850', 'base.100')(props),
       borderRadius: 'base',
-      textShadow: mode(
-        '0 0 0.3rem var(--invokeai-colors-base-50)',
-        '0 0 0.3rem var(--invokeai-colors-base-900)'
-      )(props),
       svg: {
         fill: mode('base.850', 'base.100')(props),
-        filter: mode(
-          'drop-shadow(0px 0px 0.3rem var(--invokeai-colors-base-100))',
-          'drop-shadow(0px 0px 0.3rem var(--invokeai-colors-base-800))'
-        )(props),
       },
       _hover: {
         bg: mode('base.300', 'base.500')(props),
@@ -57,16 +49,8 @@ const invokeAI = defineStyle((props) => {
     bg: mode(`${c}.400`, `${c}.600`)(props),
     color: mode(`base.50`, `base.100`)(props),
     borderRadius: 'base',
-    textShadow: mode(
-      `0 0 0.3rem var(--invokeai-colors-${c}-600)`,
-      `0 0 0.3rem var(--invokeai-colors-${c}-800)`
-    )(props),
     svg: {
       fill: mode(`base.50`, `base.100`)(props),
-      filter: mode(
-        `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-600))`,
-        `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-800))`
-      )(props),
     },
     _disabled,
     _hover: {