From 88b32e8302fdbf4e37d3352cd0a3c1c5253ad46d Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Sun, 25 Aug 2024 02:59:24 -0600
Subject: [PATCH] feat(model manager): :lipstick: remove excessive visual
 layering

---
 .../modelManagerV2/subpanels/InstallModels.tsx     | 14 +++++++-------
 .../modelManagerV2/subpanels/ModelManager.tsx      |  4 ++--
 .../subpanels/ModelManagerPanel/ModelImage.tsx     |  3 ++-
 .../subpanels/ModelManagerPanel/ModelListItem.tsx  |  3 +--
 .../ModelManagerPanel/ModelListWrapper.tsx         |  2 +-
 .../modelManagerV2/subpanels/ModelPane.tsx         |  2 +-
 .../subpanels/ModelPanel/ModelView.tsx             |  2 +-
 .../ui/components/tabs/ModelManagerTab.tsx         |  2 +-
 8 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx
index 90f3a578da7..36c69134287 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx
@@ -20,14 +20,14 @@ export const InstallModels = memo(() => {
   }, []);
 
   return (
-    <Flex layerStyle="first" borderRadius="base" w="full" h="full" flexDir="column" gap={4}>
+    <Flex layerStyle="body" w="full" h="full" flexDir="column" gap={4}>
       <Heading fontSize="xl">{t('modelManager.addModel')}</Heading>
-      <Tabs variant="collapse" height="50%" display="flex" flexDir="column" index={index} onChange={onChange}>
+      <Tabs borderRadius="base" bg="base.850" size="lg" isFitted variant="line" height="50%" display="flex" flexDir="column" index={index} onChange={onChange}>
         <TabList>
-          <Tab>{t('modelManager.urlOrLocalPath')}</Tab>
-          <Tab>{t('modelManager.huggingFace')}</Tab>
-          <Tab>{t('modelManager.scanFolder')}</Tab>
-          <Tab>{t('modelManager.starterModels')}</Tab>
+          <Tab py={2}>{t('modelManager.urlOrLocalPath')}</Tab>
+          <Tab py={2}>{t('modelManager.huggingFace')}</Tab>
+          <Tab py={2}>{t('modelManager.scanFolder')}</Tab>
+          <Tab py={2}>{t('modelManager.starterModels')}</Tab>
         </TabList>
         <TabPanels p={3} height="100%">
           <TabPanel>
@@ -44,7 +44,7 @@ export const InstallModels = memo(() => {
           </TabPanel>
         </TabPanels>
       </Tabs>
-      <Box layerStyle="second" borderRadius="base" h="50%">
+      <Box layerStyle="first" borderRadius="base" h="50%">
         <ModelInstallQueue />
       </Box>
     </Flex>
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx
index a07cb8c10b1..33b89d28f83 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx
@@ -16,14 +16,14 @@ export const ModelManager = memo(() => {
   }, [dispatch]);
 
   return (
-    <Flex flexDir="column" layerStyle="first" p={4} gap={4} borderRadius="base" w="50%" h="full">
+    <Flex flexDir="column" layerStyle="body" pt={4} gap={4} borderRadius="base" w="50%" h="full">
       <Flex w="full" gap={4} justifyContent="space-between" alignItems="center">
         <Heading fontSize="xl">{t('common.modelManager')}</Heading>
         <Button size="sm" colorScheme="invokeYellow" leftIcon={<PiPlusBold />} onClick={handleClickAddModel}>
           {t('modelManager.addModels')}
         </Button>
       </Flex>
-      <Flex flexDir="column" layerStyle="second" p={4} gap={4} borderRadius="base" w="full" h="full">
+      <Flex flexDir="column" layerStyle="first" p={2} gap={4} borderRadius="base" w="full" h="full">
         <ModelListNavigation />
         <ModelList />
       </Flex>
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelImage.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelImage.tsx
index d273d92bdb5..38ea5c56937 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelImage.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelImage.tsx
@@ -15,7 +15,8 @@ const ModelImage = ({ image_url }: Props) => {
       <Flex
         height={MODEL_IMAGE_THUMBNAIL_SIZE}
         minWidth={MODEL_IMAGE_THUMBNAIL_SIZE}
-        bg="base.650"
+        bg="transparent"
+        borderWidth={1}
         borderRadius="base"
         alignItems="center"
         justifyContent="center"
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx
index 8bfcbd73518..21fe1749311 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx
@@ -20,7 +20,7 @@ type ModelListItemProps = {
 };
 
 const sx: SystemStyleObject = {
-  _hover: { bg: 'base.700' },
+  _hover: { bg: 'base.750' },
   "&[aria-selected='true']": { bg: 'base.700' },
 };
 
@@ -78,7 +78,6 @@ const ModelListItem = ({ model }: ModelListItemProps) => {
       aria-selected={isSelected}
       justifyContent="flex-start"
       p={2}
-      borderRadius="base"
       w="full"
       alignItems="center"
       gap={2}
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListWrapper.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListWrapper.tsx
index bde79e45540..7807e3234c0 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListWrapper.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListWrapper.tsx
@@ -12,7 +12,7 @@ type ModelListWrapperProps = {
 export const ModelListWrapper = memo((props: ModelListWrapperProps) => {
   const { title, modelList } = props;
   return (
-    <StickyScrollable title={title} contentSx={{ gap: 1, p: 2 }}>
+    <StickyScrollable title={title} contentSx={{ gap: 0, p: 0, bg: "base.800", borderRadius: "base", overflow: "hidden" }} headingSx={{ bg: "base.850" }}>
       {modelList.map((model) => (
         <ModelListItem key={model.key} model={model} />
       ))}
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPane.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPane.tsx
index eb85434d363..260a4d10043 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPane.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPane.tsx
@@ -8,7 +8,7 @@ import { Model } from './ModelPanel/Model';
 export const ModelPane = memo(() => {
   const selectedModelKey = useAppSelector((s) => s.modelmanagerV2.selectedModelKey);
   return (
-    <Box layerStyle="first" p={4} borderRadius="base" w="50%" h="full">
+    <Box layerStyle="body" pt={4} borderRadius="base" w="50%" h="full">
       {selectedModelKey ? <Model key={selectedModelKey} /> : <InstallModels />}
     </Box>
   );
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx
index f02a84efb36..38790e85ae4 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx
@@ -18,7 +18,7 @@ type Props = {
 export const ModelView = memo(({ modelConfig }: Props) => {
   const { t } = useTranslation();
   return (
-    <Flex flexDir="column" gap={4}>
+    <Flex flexDir="column" gap={4} layerStyle="first" p={2} borderRadius="base">
       <ModelHeader modelConfig={modelConfig}>
         {modelConfig.format === 'checkpoint' && modelConfig.type === 'main' && (
           <ModelConvertButton modelConfig={modelConfig} />
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
index d80f36bd91e..ada425b7aed 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
@@ -5,7 +5,7 @@ import { memo } from 'react';
 
 const ModelManagerTab = () => {
   return (
-    <Flex w="full" h="full" gap="2">
+    <Flex w="full" h="full" gap="4">
       <ModelManager />
       <ModelPane />
     </Flex>