feat(ui): Model Manager Cleanup

invokeai/frontend/web/src/features/system/components/ModelManager/AddDiffusersModel.tsx

@@ -292,11 +292,7 @@ export default function AddDiffusersModel() {
                 </FormControl>
               </FormItemWrapper>
 
-              <IAIButton
+              <IAIButton type="submit" isLoading={isProcessing}>
-                type="submit"
-                className="modal-close-btn"
-                isLoading={isProcessing}
-              >
                 {t('modelManager.addModel')}
               </IAIButton>
             </VStack>

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>

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>

invokeai/frontend/web/src/features/system/components/ModelManager/DiffusersModelEdit.tsx

@@ -115,12 +115,7 @@ export default function DiffusersModelEdit() {
           {openModel}
         </Text>
       </Flex>
-      <Flex
+      <Flex flexDirection="column" overflowY="scroll" paddingInlineEnd={8}>
-        flexDirection="column"
-        maxHeight={window.innerHeight - 270}
-        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>

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>

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}
       >

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>

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">
+              <HStack columnGap={2} alignItems="flex-end" width="100%">
-                <FormControl isRequired width="max-content">
+                <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>

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),