adjusted AccountSettings, AgencySettingsDescription, and AgencySettin…

…gURL modal
Recidiviz · May 14, 2024 · 14d712f · 14d712f
1 parent c0b8658
commit 14d712f
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 41 deletions.
diff --git a/common/components/Input/Input.styled.tsx b/common/components/Input/Input.styled.tsx
@@ -263,5 +263,4 @@ export const ErrorMessage = styled.div<{ agencySettingsConfigs?: boolean }>`
   color: ${palette.solid.red};
   margin-top: ${({ agencySettingsConfigs }) =>
     agencySettingsConfigs ? "8px" : "-4px"};
-  margin-left: -8px;
 `;
diff --git a/publisher/src/components/Settings/AccountSettings.styles.tsx b/publisher/src/components/Settings/AccountSettings.styles.tsx
@@ -81,17 +81,7 @@ export const AccountSettingsInputsWrapper = styled.div`
 export const AgencySettingsModalInputWrapperSmall = styled.div<{
   error?: boolean;
 }>`
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  height: 36px;
-  min-height: initial;
-  min-width: 534px;
-  padding: 8px 16px;
-  border: ${({ error }) =>
-    error
-      ? `1px solid ${palette.solid.red}`
-      : `1px solid ${palette.highlight.grey5}`};
+  width: 100%;
   label {
     display: none;
   }
@@ -102,21 +92,12 @@ export const AgencySettingsModalInputWrapperSmall = styled.div<{
     input {
       ${typography.body}
       color: ${palette.solid.black};
-      width: 100%;
-      padding: 0;
-      border: none;
-      &:focus {
-        border: none;
-      }
-    }
-    div {
-      margin-left: -18px;
+      border: ${({ error }) =>
+        error
+          ? `1px solid ${palette.solid.red}`
+          : `1px solid ${palette.highlight.grey5}`};
     }
   }
-
-  *:focus {
-    outline: none;
-  }
   @media only screen and (max-width: ${MIN_DESKTOP_WIDTH}px) {
     flex-direction: column;
     gap: 0;
@@ -125,30 +106,15 @@ export const AgencySettingsModalInputWrapperSmall = styled.div<{
 `;
 
 export const AgencySettingsModalInputWrapperLarge = styled.div`
-  height: 179px;
   min-height: 179px;
-  min-width: 534px;
-  padding: 0;
-  border: 1px solid ${palette.highlight.grey5};
+  width: 100%;
   label {
     display: none;
   }
-
   div {
-    width: 100%;
-
     textarea {
-      margin-top: 8px;
-      margin-left: 16px;
-      margin-right: 16px;
       ${typography.body}
       color: ${palette.solid.black};
-      width: 95%;
-      padding: 0;
-      border: none;
-      &:focus {
-        border: none;
-      }
     }
   }
   @media only screen and (max-width: ${MIN_DESKTOP_WIDTH}px) {

diff --git a/publisher/src/components/Settings/AccountSettings.tsx b/publisher/src/components/Settings/AccountSettings.tsx
@@ -91,6 +91,7 @@ export const AccountSettings = () => {
                   setName(() => e.target.value.trimStart());
                 }}
                 agencySettingsConfigs
+                fullWidth
               />
             </AgencySettingsModalInputWrapperSmall>
           }
@@ -121,6 +122,7 @@ export const AccountSettings = () => {
                 onChange={(e) => {
                   setEmail(() => e.target.value.trimStart());
                 }}
+                fullWidth
               />
             </AgencySettingsModalInputWrapperSmall>
           }

diff --git a/publisher/src/components/Settings/AgencySettingsDescription.tsx b/publisher/src/components/Settings/AgencySettingsDescription.tsx
@@ -102,6 +102,7 @@ const AgencySettingsDescription: React.FC<{
                     multiline
                     maxLength={750}
                     onChange={(e) => setInfoText(e.target.value)}
+                    fullWidth
                   />
                 </AgencySettingsModalInputWrapperLarge>
               </>

diff --git a/publisher/src/components/Settings/AgencySettingsURL.tsx b/publisher/src/components/Settings/AgencySettingsURL.tsx
@@ -128,6 +128,7 @@ const AgencySettingsUrl: React.FC<{
                     setUrlText(() => e.target.value.trimStart());
                   }}
                   agencySettingsConfigs
+                  fullWidth
                 />
               </AgencySettingsModalInputWrapperSmall>
             }