From 93b38707b2bce2e75cfe3e0b53f85fa00c3e6593 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 19 Mar 2023 16:21:58 +1100
Subject: [PATCH] feat(ui): tidy up model manager styling

fixes #2970
---
 .../web/src/common/components/IAIForm.tsx     |  8 ++
 .../ModelManager/AddCheckpointModel.tsx       | 34 +++-----
 .../ModelManager/AddDiffusersModel.tsx        | 19 +----
 .../components/ModelManager/AddModel.tsx      | 21 ++++-
 .../ModelManager/CheckpointModelEdit.tsx      |  5 +-
 .../ModelManager/DiffusersModelEdit.tsx       |  5 +-
 .../components/ModelManager/SearchModels.tsx  | 78 +++++++++----------
 7 files changed, 80 insertions(+), 90 deletions(-)
 create mode 100644 invokeai/frontend/web/src/common/components/IAIForm.tsx

diff --git a/invokeai/frontend/web/src/common/components/IAIForm.tsx b/invokeai/frontend/web/src/common/components/IAIForm.tsx
new file mode 100644
index 0000000000..c94d177a21
--- /dev/null
+++ b/invokeai/frontend/web/src/common/components/IAIForm.tsx
@@ -0,0 +1,8 @@
+import { chakra } from '@chakra-ui/react';
+
+/**
+ * Chakra-enabled <form />
+ */
+const IAIForm = chakra.form;
+
+export default IAIForm;
diff --git a/invokeai/frontend/web/src/features/system/components/ModelManager/AddCheckpointModel.tsx b/invokeai/frontend/web/src/features/system/components/ModelManager/AddCheckpointModel.tsx
index 8e0cfb2802..e0de5e87b0 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/AddCheckpointModel.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/AddCheckpointModel.tsx
@@ -25,10 +25,9 @@ import { useTranslation } from 'react-i18next';
 
 import type { InvokeModelConfigProps } from 'app/invokeai';
 import type { RootState } from 'app/store';
-import IAIIconButton from 'common/components/IAIIconButton';
 import { setAddNewModelUIOption } from 'features/ui/store/uiSlice';
 import type { FieldInputProps, FormikProps } from 'formik';
-import { BiArrowBack } from 'react-icons/bi';
+import IAIForm from 'common/components/IAIForm';
 
 const MIN_MODEL_SIZE = 64;
 const MAX_MODEL_SIZE = 2048;
@@ -72,19 +71,6 @@ export default function AddCheckpointModel() {
 
   return (
     <VStack gap={2} alignItems="flex-start">
-      <IAIIconButton
-        aria-label={t('common.back')}
-        tooltip={t('common.back')}
-        onClick={() => dispatch(setAddNewModelUIOption(null))}
-        width="max-content"
-        position="absolute"
-        zIndex={1}
-        size="sm"
-        insetInlineEnd={12}
-        top={3}
-        icon={<BiArrowBack />}
-      />
-
       <SearchModels />
       <IAICheckbox
         label={t('modelManager.addManually')}
@@ -98,7 +84,7 @@ export default function AddCheckpointModel() {
           onSubmit={addModelFormSubmitHandler}
         >
           {({ handleSubmit, errors, touched }) => (
-            <form onSubmit={handleSubmit}>
+            <IAIForm onSubmit={handleSubmit} sx={{ w: 'full' }}>
               <VStack rowGap={2}>
                 <Text fontSize={20} fontWeight="bold" alignSelf="start">
                   {t('modelManager.manual')}
@@ -118,7 +104,7 @@ export default function AddCheckpointModel() {
                       name="name"
                       type="text"
                       validate={baseValidation}
-                      width="2xl"
+                      width="full"
                     />
                     {!!errors.name && touched.name ? (
                       <FormErrorMessage>{errors.name}</FormErrorMessage>
@@ -144,7 +130,7 @@ export default function AddCheckpointModel() {
                       id="description"
                       name="description"
                       type="text"
-                      width="2xl"
+                      width="full"
                     />
                     {!!errors.description && touched.description ? (
                       <FormErrorMessage>{errors.description}</FormErrorMessage>
@@ -170,7 +156,7 @@ export default function AddCheckpointModel() {
                       id="config"
                       name="config"
                       type="text"
-                      width="2xl"
+                      width="full"
                     />
                     {!!errors.config && touched.config ? (
                       <FormErrorMessage>{errors.config}</FormErrorMessage>
@@ -196,7 +182,7 @@ export default function AddCheckpointModel() {
                       id="weights"
                       name="weights"
                       type="text"
-                      width="2xl"
+                      width="full"
                     />
                     {!!errors.weights && touched.weights ? (
                       <FormErrorMessage>{errors.weights}</FormErrorMessage>
@@ -219,7 +205,7 @@ export default function AddCheckpointModel() {
                       id="vae"
                       name="vae"
                       type="text"
-                      width="2xl"
+                      width="full"
                     />
                     {!!errors.vae && touched.vae ? (
                       <FormErrorMessage>{errors.vae}</FormErrorMessage>
@@ -231,7 +217,7 @@ export default function AddCheckpointModel() {
                   </VStack>
                 </FormControl>
 
-                <HStack width="100%">
+                <HStack width="100%" gap={8}>
                   {/* Width */}
                   <FormControl isInvalid={!!errors.width && touched.width}>
                     <FormLabel htmlFor="width" fontSize="sm">
@@ -252,7 +238,6 @@ export default function AddCheckpointModel() {
                             min={MIN_MODEL_SIZE}
                             max={MAX_MODEL_SIZE}
                             step={64}
-                            width="90%"
                             value={form.values.width}
                             onChange={(value) =>
                               form.setFieldValue(field.name, Number(value))
@@ -290,7 +275,6 @@ export default function AddCheckpointModel() {
                             name="height"
                             min={MIN_MODEL_SIZE}
                             max={MAX_MODEL_SIZE}
-                            width="90%"
                             step={64}
                             value={form.values.height}
                             onChange={(value) =>
@@ -319,7 +303,7 @@ export default function AddCheckpointModel() {
                   {t('modelManager.addModel')}
                 </IAIButton>
               </VStack>
-            </form>
+            </IAIForm>
           )}
         </Formik>
       )}
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 5f8a2bc33b..0f7b07d975 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/AddDiffusersModel.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/AddDiffusersModel.tsx
@@ -11,15 +11,14 @@ import { InvokeDiffusersModelConfigProps } from 'app/invokeai';
 import { addNewModel } from 'app/socketio/actions';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIButton from 'common/components/IAIButton';
-import IAIIconButton from 'common/components/IAIIconButton';
 import IAIInput from 'common/components/IAIInput';
 import { setAddNewModelUIOption } from 'features/ui/store/uiSlice';
 import { Field, Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
-import { BiArrowBack } from 'react-icons/bi';
 
 import type { RootState } from 'app/store';
 import type { ReactElement } from 'react';
+import IAIForm from 'common/components/IAIForm';
 
 function FormItemWrapper({
   children,
@@ -89,24 +88,12 @@ export default function AddDiffusersModel() {
 
   return (
     <Flex>
-      <IAIIconButton
-        aria-label={t('common.back')}
-        tooltip={t('common.back')}
-        onClick={() => dispatch(setAddNewModelUIOption(null))}
-        width="max-content"
-        position="absolute"
-        zIndex={1}
-        size="sm"
-        insetInlineEnd={12}
-        top={3}
-        icon={<BiArrowBack />}
-      />
       <Formik
         initialValues={addModelFormValues}
         onSubmit={addModelFormSubmitHandler}
       >
         {({ handleSubmit, errors, touched }) => (
-          <form onSubmit={handleSubmit}>
+          <IAIForm onSubmit={handleSubmit}>
             <VStack rowGap={2}>
               <FormItemWrapper>
                 {/* Name */}
@@ -296,7 +283,7 @@ export default function AddDiffusersModel() {
                 {t('modelManager.addModel')}
               </IAIButton>
             </VStack>
-          </form>
+          </IAIForm>
         )}
       </Formik>
     </Flex>
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 ad8437e845..f0d46a89fa 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/AddModel.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/AddModel.tsx
@@ -14,7 +14,7 @@ import {
 
 import IAIButton from 'common/components/IAIButton';
 
-import { FaPlus } from 'react-icons/fa';
+import { FaArrowLeft, FaPlus } from 'react-icons/fa';
 
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { useTranslation } from 'react-i18next';
@@ -23,6 +23,7 @@ import type { RootState } from 'app/store';
 import { setAddNewModelUIOption } from 'features/ui/store/uiSlice';
 import AddCheckpointModel from './AddCheckpointModel';
 import AddDiffusersModel from './AddDiffusersModel';
+import IAIIconButton from 'common/components/IAIIconButton';
 
 function AddModelBox({
   text,
@@ -83,8 +84,22 @@ export default function AddModel() {
         closeOnOverlayClick={false}
       >
         <ModalOverlay />
-        <ModalContent margin="auto" paddingInlineEnd={4}>
-          <ModalHeader>{t('modelManager.addNewModel')}</ModalHeader>
+        <ModalContent margin="auto">
+          <ModalHeader>{t('modelManager.addNewModel')} </ModalHeader>
+          {addNewModelUIOption !== null && (
+            <IAIIconButton
+              aria-label={t('common.back')}
+              tooltip={t('common.back')}
+              onClick={() => dispatch(setAddNewModelUIOption(null))}
+              position="absolute"
+              variant="ghost"
+              zIndex={1}
+              size="sm"
+              insetInlineEnd={12}
+              top={2}
+              icon={<FaArrowLeft />}
+            />
+          )}
           <ModalCloseButton />
           <ModalBody>
             {addNewModelUIOption == null && (
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 ac49be30fc..cfb94dd044 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/CheckpointModelEdit.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/CheckpointModelEdit.tsx
@@ -28,6 +28,7 @@ import { isEqual, pickBy } from 'lodash';
 import ModelConvert from './ModelConvert';
 import IAIFormHelperText from 'common/components/IAIForms/IAIFormHelperText';
 import IAIFormErrorMessage from 'common/components/IAIForms/IAIFormErrorMessage';
+import IAIForm from 'common/components/IAIForm';
 
 const selector = createSelector(
   [systemSelector],
@@ -120,7 +121,7 @@ export default function CheckpointModelEdit() {
           onSubmit={editModelFormSubmitHandler}
         >
           {({ handleSubmit, errors, touched }) => (
-            <form onSubmit={handleSubmit}>
+            <IAIForm onSubmit={handleSubmit}>
               <VStack rowGap={2} alignItems="start">
                 {/* Description */}
                 <FormControl
@@ -317,7 +318,7 @@ export default function CheckpointModelEdit() {
                   {t('modelManager.updateModel')}
                 </IAIButton>
               </VStack>
-            </form>
+            </IAIForm>
           )}
         </Formik>
       </Flex>
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 4e5fe9a8cf..4b86583d61 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/DiffusersModelEdit.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/DiffusersModelEdit.tsx
@@ -18,6 +18,7 @@ import type { RootState } from 'app/store';
 import { isEqual, pickBy } from 'lodash';
 import IAIFormHelperText from 'common/components/IAIForms/IAIFormHelperText';
 import IAIFormErrorMessage from 'common/components/IAIForms/IAIFormErrorMessage';
+import IAIForm from 'common/components/IAIForm';
 
 const selector = createSelector(
   [systemSelector],
@@ -116,7 +117,7 @@ export default function DiffusersModelEdit() {
           onSubmit={editModelFormSubmitHandler}
         >
           {({ handleSubmit, errors, touched }) => (
-            <form onSubmit={handleSubmit}>
+            <IAIForm onSubmit={handleSubmit}>
               <VStack rowGap={2} alignItems="start">
                 {/* Description */}
                 <FormControl
@@ -259,7 +260,7 @@ export default function DiffusersModelEdit() {
                   {t('modelManager.updateModel')}
                 </IAIButton>
               </VStack>
-            </form>
+            </IAIForm>
           )}
         </Formik>
       </Flex>
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 a035c6c4d0..510c4de147 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/SearchModels.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/SearchModels.tsx
@@ -12,14 +12,13 @@ import {
   RadioGroup,
   Spacer,
   Text,
-  VStack,
 } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { useTranslation } from 'react-i18next';
 
-import { FaPlus, FaSearch } from 'react-icons/fa';
+import { FaSearch, FaTrash } from 'react-icons/fa';
 
 import { addNewModel, searchForModels } from 'app/socketio/actions';
 import {
@@ -34,7 +33,7 @@ import IAIInput from 'common/components/IAIInput';
 import { Field, Formik } from 'formik';
 import { forEach, remove } from 'lodash';
 import type { ChangeEvent, ReactNode } from 'react';
-import { BiReset } from 'react-icons/bi';
+import IAIForm from 'common/components/IAIForm';
 
 const existingModelsSelector = createSelector([systemSelector], (system) => {
   const { model_list } = system;
@@ -71,36 +70,32 @@ function SearchModelEntry({
   };
 
   return (
-    <VStack>
-      <Flex
-        flexDirection="column"
-        gap={2}
-        backgroundColor={
-          modelsToAdd.includes(model.name) ? 'accent.650' : 'base.800'
-        }
-        paddingX={4}
-        paddingY={2}
-        borderRadius={4}
-      >
-        <Flex gap={4}>
-          <IAICheckbox
-            value={model.name}
-            label={<Text fontWeight={500}>{model.name}</Text>}
-            isChecked={modelsToAdd.includes(model.name)}
-            isDisabled={existingModels.includes(model.location)}
-            onChange={foundModelsChangeHandler}
-          ></IAICheckbox>
-          {existingModels.includes(model.location) && (
-            <Badge colorScheme="accent" paddingX={2} paddingY={1}>
-              {t('modelManager.modelExists')}
-            </Badge>
-          )}
-        </Flex>
-        <Text fontStyle="italic" variant="subtext">
-          {model.location}
-        </Text>
+    <Flex
+      flexDirection="column"
+      gap={2}
+      backgroundColor={
+        modelsToAdd.includes(model.name) ? 'accent.650' : 'base.800'
+      }
+      paddingX={4}
+      paddingY={2}
+      borderRadius={4}
+    >
+      <Flex gap={4} alignItems="center" justifyContent="space-between">
+        <IAICheckbox
+          value={model.name}
+          label={<Text fontWeight={500}>{model.name}</Text>}
+          isChecked={modelsToAdd.includes(model.name)}
+          isDisabled={existingModels.includes(model.location)}
+          onChange={foundModelsChangeHandler}
+        ></IAICheckbox>
+        {existingModels.includes(model.location) && (
+          <Badge colorScheme="accent">{t('modelManager.modelExists')}</Badge>
+        )}
       </Flex>
-    </VStack>
+      <Text fontStyle="italic" variant="subtext">
+        {model.location}
+      </Text>
+    </Flex>
   );
 }
 
@@ -247,26 +242,26 @@ export default function SearchModels() {
             <Text
               sx={{
                 fontWeight: 500,
-                fontSize: 'sm',
               }}
               variant="subtext"
             >
               {t('modelManager.checkpointFolder')}
             </Text>
-            <Text sx={{ fontWeight: 500, fontSize: 'sm' }}>{searchFolder}</Text>
+            <Text sx={{ fontWeight: 500 }}>{searchFolder}</Text>
           </Flex>
           <Spacer />
           <IAIIconButton
             aria-label={t('modelManager.scanAgain')}
             tooltip={t('modelManager.scanAgain')}
-            icon={<BiReset />}
+            icon={<FaSearch />}
             fontSize={18}
             disabled={isProcessing}
             onClick={() => dispatch(searchForModels(searchFolder))}
           />
           <IAIIconButton
             aria-label={t('modelManager.clearCheckpointFolder')}
-            icon={<FaPlus style={{ transform: 'rotate(45deg)' }} />}
+            tooltip={t('modelManager.clearCheckpointFolder')}
+            icon={<FaTrash />}
             onClick={resetSearchModelHandler}
           />
         </Flex>
@@ -278,9 +273,9 @@ export default function SearchModels() {
           }}
         >
           {({ handleSubmit }) => (
-            <form onSubmit={handleSubmit}>
-              <HStack columnGap={2} alignItems="flex-end" width="100%">
-                <FormControl isRequired width="lg">
+            <IAIForm onSubmit={handleSubmit} width="100%">
+              <HStack columnGap={2} alignItems="flex-end">
+                <FormControl flexGrow={1}>
                   <Field
                     as={IAIInput}
                     id="checkpointFolder"
@@ -296,12 +291,12 @@ export default function SearchModels() {
                   tooltip={t('modelManager.findModels')}
                   type="submit"
                   disabled={isProcessing}
-                  paddingX={10}
+                  px={8}
                 >
                   {t('modelManager.findModels')}
                 </IAIButton>
               </HStack>
-            </form>
+            </IAIForm>
           )}
         </Formik>
       )}
@@ -412,7 +407,6 @@ export default function SearchModels() {
             maxHeight={72}
             overflowY="scroll"
             borderRadius="sm"
-            paddingInlineEnd={4}
             gap={2}
           >
             {foundModels.length > 0 ? (