From 516c56d0c5b9c75eaadf199b6d995a240a5fe3ed Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Sun, 5 Mar 2023 21:41:55 +1300
Subject: [PATCH] feat(ui): Model Manager Cleanup

---
 .../ModelManager/AddDiffusersModel.tsx          |  6 +-----
 .../system/components/ModelManager/AddModel.tsx |  2 +-
 .../ModelManager/CheckpointModelEdit.tsx        |  8 ++++----
 .../ModelManager/DiffusersModelEdit.tsx         | 17 ++++++-----------
 .../components/ModelManager/MergeModels.tsx     |  2 +-
 .../components/ModelManager/ModelList.tsx       |  2 +-
 .../ModelManager/ModelManagerModal.tsx          |  4 ++--
 .../components/ModelManager/SearchModels.tsx    |  6 +++---
 .../frontend/web/src/theme/colors/invokeAI.ts   |  2 +-
 9 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/invokeai/frontend/web/src/features/system/components/ModelManager/AddDiffusersModel.tsx b/invokeai/frontend/web/src/features/system/components/ModelManager/AddDiffusersModel.tsx
index 82cc609879..5f8a2bc33b 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/AddDiffusersModel.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/AddDiffusersModel.tsx
@@ -292,11 +292,7 @@ export default function AddDiffusersModel() {
                 </FormControl>
               </FormItemWrapper>
 
-              <IAIButton
-                type="submit"
-                className="modal-close-btn"
-                isLoading={isProcessing}
-              >
+              <IAIButton type="submit" isLoading={isProcessing}>
                 {t('modelManager.addModel')}
               </IAIButton>
             </VStack>
diff --git a/invokeai/frontend/web/src/features/system/components/ModelManager/AddModel.tsx b/invokeai/frontend/web/src/features/system/components/ModelManager/AddModel.tsx
index c6bb802622..ad8437e845 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/AddModel.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/AddModel.tsx
@@ -83,7 +83,7 @@ export default function AddModel() {
         closeOnOverlayClick={false}
       >
         <ModalOverlay />
-        <ModalContent margin="auto">
+        <ModalContent margin="auto" paddingInlineEnd={4}>
           <ModalHeader>{t('modelManager.addNewModel')}</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
diff --git a/invokeai/frontend/web/src/features/system/components/ModelManager/CheckpointModelEdit.tsx b/invokeai/frontend/web/src/features/system/components/ModelManager/CheckpointModelEdit.tsx
index 9759125a1a..b7573f7b56 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/CheckpointModelEdit.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/CheckpointModelEdit.tsx
@@ -136,7 +136,7 @@ export default function CheckpointModelEdit() {
                       id="description"
                       name="description"
                       type="text"
-                      width="lg"
+                      width="full"
                     />
                     {!!errors.description && touched.description ? (
                       <FormErrorMessage>{errors.description}</FormErrorMessage>
@@ -162,7 +162,7 @@ export default function CheckpointModelEdit() {
                       id="config"
                       name="config"
                       type="text"
-                      width="lg"
+                      width="full"
                     />
                     {!!errors.config && touched.config ? (
                       <FormErrorMessage>{errors.config}</FormErrorMessage>
@@ -188,7 +188,7 @@ export default function CheckpointModelEdit() {
                       id="weights"
                       name="weights"
                       type="text"
-                      width="lg"
+                      width="full"
                     />
                     {!!errors.weights && touched.weights ? (
                       <FormErrorMessage>{errors.weights}</FormErrorMessage>
@@ -211,7 +211,7 @@ export default function CheckpointModelEdit() {
                       id="vae"
                       name="vae"
                       type="text"
-                      width="lg"
+                      width="full"
                     />
                     {!!errors.vae && touched.vae ? (
                       <FormErrorMessage>{errors.vae}</FormErrorMessage>
diff --git a/invokeai/frontend/web/src/features/system/components/ModelManager/DiffusersModelEdit.tsx b/invokeai/frontend/web/src/features/system/components/ModelManager/DiffusersModelEdit.tsx
index e25043b1e8..a21aee672c 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/DiffusersModelEdit.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/DiffusersModelEdit.tsx
@@ -115,12 +115,7 @@ export default function DiffusersModelEdit() {
           {openModel}
         </Text>
       </Flex>
-      <Flex
-        flexDirection="column"
-        maxHeight={window.innerHeight - 270}
-        overflowY="scroll"
-        paddingInlineEnd={8}
-      >
+      <Flex flexDirection="column" overflowY="scroll" paddingInlineEnd={8}>
         <Formik
           enableReinitialize={true}
           initialValues={editModelFormValues}
@@ -143,7 +138,7 @@ export default function DiffusersModelEdit() {
                       id="description"
                       name="description"
                       type="text"
-                      width="lg"
+                      width="full"
                     />
                     {!!errors.description && touched.description ? (
                       <FormErrorMessage>{errors.description}</FormErrorMessage>
@@ -169,7 +164,7 @@ export default function DiffusersModelEdit() {
                       id="path"
                       name="path"
                       type="text"
-                      width="lg"
+                      width="full"
                     />
                     {!!errors.path && touched.path ? (
                       <FormErrorMessage>{errors.path}</FormErrorMessage>
@@ -192,7 +187,7 @@ export default function DiffusersModelEdit() {
                       id="repo_id"
                       name="repo_id"
                       type="text"
-                      width="lg"
+                      width="full"
                     />
                     {!!errors.repo_id && touched.repo_id ? (
                       <FormErrorMessage>{errors.repo_id}</FormErrorMessage>
@@ -217,7 +212,7 @@ export default function DiffusersModelEdit() {
                       id="vae.path"
                       name="vae.path"
                       type="text"
-                      width="lg"
+                      width="full"
                     />
                     {!!errors.vae?.path && touched.vae?.path ? (
                       <FormErrorMessage>{errors.vae?.path}</FormErrorMessage>
@@ -242,7 +237,7 @@ export default function DiffusersModelEdit() {
                       id="vae.repo_id"
                       name="vae.repo_id"
                       type="text"
-                      width="lg"
+                      width="full"
                     />
                     {!!errors.vae?.repo_id && touched.vae?.repo_id ? (
                       <FormErrorMessage>{errors.vae?.repo_id}</FormErrorMessage>
diff --git a/invokeai/frontend/web/src/features/system/components/ModelManager/MergeModels.tsx b/invokeai/frontend/web/src/features/system/components/ModelManager/MergeModels.tsx
index e994900eec..3b1905979c 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/MergeModels.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/MergeModels.tsx
@@ -111,7 +111,7 @@ export default function MergeModels() {
         closeOnOverlayClick={false}
       >
         <ModalOverlay />
-        <ModalContent fontFamily="Inter" margin="auto">
+        <ModalContent fontFamily="Inter" margin="auto" paddingInlineEnd={4}>
           <ModalHeader>{t('modelManager.mergeModels')}</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
diff --git a/invokeai/frontend/web/src/features/system/components/ModelManager/ModelList.tsx b/invokeai/frontend/web/src/features/system/components/ModelManager/ModelList.tsx
index 1bea1ba878..ad5b9b9072 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/ModelList.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/ModelList.tsx
@@ -212,7 +212,7 @@ const ModelList = () => {
       <Flex
         flexDirection="column"
         gap={1}
-        maxHeight={window.innerHeight - 360}
+        maxHeight={window.innerHeight - 240}
         overflow="scroll"
         paddingInlineEnd={4}
       >
diff --git a/invokeai/frontend/web/src/features/system/components/ModelManager/ModelManagerModal.tsx b/invokeai/frontend/web/src/features/system/components/ModelManager/ModelManagerModal.tsx
index 6d9edf0d89..5de4faa80b 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/ModelManagerModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/ModelManagerModal.tsx
@@ -52,10 +52,10 @@ export default function ModelManagerModal({
       <Modal
         isOpen={isModelManagerModalOpen}
         onClose={onModelManagerModalClose}
-        size="6xl"
+        size="full"
       >
         <ModalOverlay />
-        <ModalContent paddingInlineEnd={4}>
+        <ModalContent>
           <ModalCloseButton />
           <ModalHeader>{t('modelManager.modelManager')}</ModalHeader>
           <ModalBody>
diff --git a/invokeai/frontend/web/src/features/system/components/ModelManager/SearchModels.tsx b/invokeai/frontend/web/src/features/system/components/ModelManager/SearchModels.tsx
index bccf690a63..4798382537 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/SearchModels.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/SearchModels.tsx
@@ -276,14 +276,13 @@ export default function SearchModels() {
         >
           {({ handleSubmit }) => (
             <form onSubmit={handleSubmit}>
-              <HStack columnGap={2} alignItems="flex-end">
-                <FormControl isRequired width="max-content">
+              <HStack columnGap={2} alignItems="flex-end" width="100%">
+                <FormControl isRequired width="lg">
                   <Field
                     as={IAIInput}
                     id="checkpointFolder"
                     name="checkpointFolder"
                     type="text"
-                    width="lg"
                     size="md"
                     label={t('modelManager.checkpointFolder')}
                   />
@@ -294,6 +293,7 @@ export default function SearchModels() {
                   tooltip={t('modelManager.findModels')}
                   type="submit"
                   disabled={isProcessing}
+                  paddingX={10}
                 >
                   {t('modelManager.findModels')}
                 </IAIButton>
diff --git a/invokeai/frontend/web/src/theme/colors/invokeAI.ts b/invokeai/frontend/web/src/theme/colors/invokeAI.ts
index f94430e454..cf5b4221b7 100644
--- a/invokeai/frontend/web/src/theme/colors/invokeAI.ts
+++ b/invokeai/frontend/web/src/theme/colors/invokeAI.ts
@@ -2,7 +2,7 @@ import { generateColorPalette } from 'theme/util/generateColorPalette';
 
 export const invokeAIThemeColors = {
   base: generateColorPalette(225, 15),
-  accent: generateColorPalette(255, 67),
+  accent: generateColorPalette(250, 50),
   working: generateColorPalette(47, 67),
   warning: generateColorPalette(28, 75),
   ok: generateColorPalette(113, 70),