style: Update Model Manager Styling to new format

2024-08-30 20:32:17 +00:00 · 2023-07-12 23:12:12 +12:00 · 2023-07-12 23:12:12 +12:00 · 31bb4bfc61
commit 31bb4bfc61
parent 3db1aa738c
6 changed files with 115 additions and 122 deletions
--- a/invokeai/frontend/web/src/common/components/IAIForms/IAIFormItemWrapper.tsx
+++ b/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}
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx
+++ b/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
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel.tsx
+++ b/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={{
-            backgroundColor:
-              addNewModelUIOption == 'ckpt' ? 'accent.700' : 'base.700',
-            '&:hover': {
-              backgroundColor:
-                addNewModelUIOption == 'ckpt' ? 'accent.700' : 'base.600',
-            },
-          }}
+          isChecked={addNewModelUIOption == 'ckpt'}
        >
          {t('modelManager.addCheckpointModel')}
        </IAIButton>
        <IAIButton
          onClick={() => dispatch(setAddNewModelUIOption('diffusers'))}
-          sx={{
-            backgroundColor:
-              addNewModelUIOption == 'diffusers' ? 'accent.700' : 'base.700',
-            '&:hover': {
-              backgroundColor:
-                addNewModelUIOption == 'diffusers' ? 'accent.700' : 'base.600',
-            },
-          }}
+          isChecked={addNewModelUIOption == 'diffusers'}
        >
          {t('modelManager.addDiffuserModel')}
        </IAIButton>
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx
+++ b/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
-      onClick={onClick}
-      isActive={isActive}
-      sx={{
-        _active: {
-          bg: 'accent.750',
-        },
-      }}
-      size="sm"
-    >
+    <IAIButton onClick={onClick} isChecked={isActive} 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>
-              <Text
-                sx={{
-                  fontWeight: '500',
-                  py: 2,
-                  px: 4,
-                  mb: 4,
-                  borderRadius: 'base',
-                  width: 'max-content',
-                  fontSize: 'sm',
-                  bg: 'base.750',
-                }}
-              >
-                {t('modelManager.diffusersModels')}
-              </Text>
-              {diffusersModelListItemsToRender}
-            </Box>
-            <Box>
-              <Text
-                sx={{
-                  fontWeight: '500',
-                  py: 2,
-                  px: 4,
-                  my: 4,
-                  mx: 0,
-                  borderRadius: 'base',
-                  width: 'max-content',
-                  fontSize: 'sm',
-                  bg: 'base.750',
-                }}
-              >
-                {t('modelManager.checkpointModels')}
-              </Text>
-              {ckptModelListItemsToRender}
-            </Box>
+            {diffusersModelListItemsToRender.length > 0 && (
+              <Box>
+                <Text
+                  sx={{
+                    fontWeight: '500',
+                    py: 2,
+                    px: 4,
+                    mb: 4,
+                    borderRadius: 'base',
+                    width: 'max-content',
+                    fontSize: 'sm',
+                    bg: mode('base.100', 'base.800')(colorMode),
+                  }}
+                >
+                  {t('modelManager.diffusersModels')}
+                </Text>
+                {diffusersModelListItemsToRender}
+              </Box>
+            )}
+
+            {ckptModelListItemsToRender.length > 0 && (
+              <Box>
+                <Text
+                  sx={{
+                    fontWeight: '500',
+                    py: 2,
+                    px: 4,
+                    my: 4,
+                    mx: 0,
+                    borderRadius: 'base',
+                    width: 'max-content',
+                    fontSize: 'sm',
+                    bg: mode('base.150', 'base.750')(colorMode),
+                  }}
+                >
+                  {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%">
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
+++ b/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),
              },
            }
      }
--- a/invokeai/frontend/web/src/theme/components/button.ts
+++ b/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: {