From aa213285bbb5aa3066ad5865a027f818dbab2936 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Tue, 27 Dec 2022 06:55:10 +1300
Subject: [PATCH] Style fixes to accommodate localization in Model Manager

---
 .../system/components/ModelManager/AddModel.tsx    | 14 ++++++++------
 .../system/components/ModelManager/ModelList.tsx   |  2 +-
 .../components/ModelManager/ModelManagerModal.tsx  |  6 +++++-
 .../components/ModelManager/SearchModels.tsx       |  2 +-
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/features/system/components/ModelManager/AddModel.tsx b/frontend/src/features/system/components/ModelManager/AddModel.tsx
index 3f67144383..bc08fa08b6 100644
--- a/frontend/src/features/system/components/ModelManager/AddModel.tsx
+++ b/frontend/src/features/system/components/ModelManager/AddModel.tsx
@@ -97,7 +97,7 @@ export default function AddModel() {
       <Modal
         isOpen={isOpen}
         onClose={addModelModalClose}
-        size="xl"
+        size="3xl"
         closeOnOverlayClick={false}
       >
         <ModalOverlay />
@@ -138,7 +138,7 @@ export default function AddModel() {
                             name="name"
                             type="text"
                             validate={baseValidation}
-                            width="lg"
+                            width="2xl"
                           />
                           {!!errors.name && touched.name ? (
                             <FormErrorMessage>{errors.name}</FormErrorMessage>
@@ -164,7 +164,7 @@ export default function AddModel() {
                             id="description"
                             name="description"
                             type="text"
-                            width="lg"
+                            width="2xl"
                           />
                           {!!errors.description && touched.description ? (
                             <FormErrorMessage>
@@ -192,7 +192,7 @@ export default function AddModel() {
                             id="config"
                             name="config"
                             type="text"
-                            width="lg"
+                            width="2xl"
                           />
                           {!!errors.config && touched.config ? (
                             <FormErrorMessage>{errors.config}</FormErrorMessage>
@@ -218,7 +218,7 @@ export default function AddModel() {
                             id="weights"
                             name="weights"
                             type="text"
-                            width="lg"
+                            width="2xl"
                           />
                           {!!errors.weights && touched.weights ? (
                             <FormErrorMessage>
@@ -243,7 +243,7 @@ export default function AddModel() {
                             id="vae"
                             name="vae"
                             type="text"
-                            width="lg"
+                            width="2xl"
                           />
                           {!!errors.vae && touched.vae ? (
                             <FormErrorMessage>{errors.vae}</FormErrorMessage>
@@ -278,6 +278,7 @@ export default function AddModel() {
                                   min={MIN_MODEL_SIZE}
                                   max={MAX_MODEL_SIZE}
                                   step={64}
+                                  width="90%"
                                   value={form.values.width}
                                   onChange={(value) =>
                                     form.setFieldValue(
@@ -322,6 +323,7 @@ export default function AddModel() {
                                   name="height"
                                   min={MIN_MODEL_SIZE}
                                   max={MAX_MODEL_SIZE}
+                                  width="90%"
                                   step={64}
                                   value={form.values.height}
                                   onChange={(value) =>
diff --git a/frontend/src/features/system/components/ModelManager/ModelList.tsx b/frontend/src/features/system/components/ModelManager/ModelList.tsx
index 461403c1c4..709200045d 100644
--- a/frontend/src/features/system/components/ModelManager/ModelList.tsx
+++ b/frontend/src/features/system/components/ModelManager/ModelList.tsx
@@ -73,7 +73,7 @@ const ModelList = () => {
   };
 
   return (
-    <Flex flexDirection={'column'} rowGap="2rem" width="45%" minWidth="45%">
+    <Flex flexDirection={'column'} rowGap="2rem" width="50%" minWidth="50%">
       <Flex justifyContent={'space-between'}>
         <Text fontSize={'1.4rem'} fontWeight="bold">
           {t('modelmanager:availableModels')}
diff --git a/frontend/src/features/system/components/ModelManager/ModelManagerModal.tsx b/frontend/src/features/system/components/ModelManager/ModelManagerModal.tsx
index 1ea9dd51a4..8fecf12198 100644
--- a/frontend/src/features/system/components/ModelManager/ModelManagerModal.tsx
+++ b/frontend/src/features/system/components/ModelManager/ModelManagerModal.tsx
@@ -44,7 +44,11 @@ export default function ModelManagerModal({
         <ModalContent className=" modal">
           <ModalCloseButton className="modal-close-btn" />
           <ModalHeader>{t('modelmanager:modelManager')}</ModalHeader>
-          <Flex padding={'0 2rem 2rem 2rem'} width="100%" columnGap={'2rem'}>
+          <Flex
+            padding={'0 1.5rem 1.5rem 1.5rem'}
+            width="100%"
+            columnGap={'2rem'}
+          >
             <ModelList />
             <ModelEdit />
           </Flex>
diff --git a/frontend/src/features/system/components/ModelManager/SearchModels.tsx b/frontend/src/features/system/components/ModelManager/SearchModels.tsx
index f7f56b48d0..861412873b 100644
--- a/frontend/src/features/system/components/ModelManager/SearchModels.tsx
+++ b/frontend/src/features/system/components/ModelManager/SearchModels.tsx
@@ -228,7 +228,7 @@ export default function SearchModels() {
             style={{
               fontWeight: 'bold',
               fontSize: '0.8rem',
-              backgroundColor: 'var(--background-color-secondary)',
+              backgroundColor: 'var(--accent-color)',
               padding: '0.2rem 1rem',
               width: 'max-content',
               borderRadius: '0.2rem',