From 63114132e2a50f84e7bb031d2434f22bd6eb305a Mon Sep 17 00:00:00 2001
From: farodin91 <github@jan-jansen.net>
Date: Sat, 23 Nov 2024 11:19:27 +0100
Subject: [PATCH] frontend: cleanup general settings

* let general settings looks similar to cluster settings

Signed-off-by: farodin91 <github@jan-jansen.net>
---
 .../src/components/App/Settings/Settings.tsx  |  8 ------
 .../App/Settings/ThemeChangeButton.tsx        |  1 -
 .../Settings.General.stories.storyshot        | 27 +++++++++----------
 .../common/TimezoneSelect/TimezoneSelect.tsx  |  2 +-
 .../src/i18n/LocaleSelect/LocaleSelect.tsx    |  2 +-
 .../LocaleSelect.Initial.stories.storyshot    |  2 +-
 6 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/App/Settings/Settings.tsx b/frontend/src/components/App/Settings/Settings.tsx
index cb576dc879..3e0fc2c54e 100644
--- a/frontend/src/components/App/Settings/Settings.tsx
+++ b/frontend/src/components/App/Settings/Settings.tsx
@@ -48,14 +48,6 @@ export default function Settings() {
       backLink
     >
       <NameValueTable
-        valueCellProps={{
-          sx: theme => ({
-            width: '60%',
-            [theme.breakpoints.down('sm')]: {
-              width: 'unset',
-            },
-          }),
-        }}
         rows={[
           {
             name: t('translation|Language'),
diff --git a/frontend/src/components/App/Settings/ThemeChangeButton.tsx b/frontend/src/components/App/Settings/ThemeChangeButton.tsx
index 557508c393..e2d9107491 100644
--- a/frontend/src/components/App/Settings/ThemeChangeButton.tsx
+++ b/frontend/src/components/App/Settings/ThemeChangeButton.tsx
@@ -56,7 +56,6 @@ export default function ThemeChangeButton(props: { showBothIcons?: boolean }) {
             '& button': {
               boxShadow: 'none',
               borderRadius: '4px',
-              padding: '0.8rem 1.5rem',
             },
             '& .MuiButton-contained': {
               backgroundColor: theme.palette.mode === 'dark' ? '#fff' : 'rgba(0, 0, 0, 0.45)',
diff --git a/frontend/src/components/App/Settings/__snapshots__/Settings.General.stories.storyshot b/frontend/src/components/App/Settings/__snapshots__/Settings.General.stories.storyshot
index 0eb57d483a..49106214fa 100644
--- a/frontend/src/components/App/Settings/__snapshots__/Settings.General.stories.storyshot
+++ b/frontend/src/components/App/Settings/__snapshots__/Settings.General.stories.storyshot
@@ -76,10 +76,10 @@
             Language
           </dt>
           <dd
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-9f9ori-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-deb4a-MuiGrid-root"
           >
             <div
-              class="MuiFormControl-root css-k2e4wk-MuiFormControl-root"
+              class="MuiFormControl-root css-1nrlq1o-MuiFormControl-root"
             >
               <div
                 class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl  css-16kq2pe-MuiInputBase-root-MuiInput-root-MuiSelect-root"
@@ -123,10 +123,10 @@
             Theme
           </dt>
           <dd
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-9f9ori-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-deb4a-MuiGrid-root"
           >
             <div
-              class="MuiButtonGroup-root MuiButtonGroup-outlined css-1b41vff-MuiButtonGroup-root"
+              class="MuiButtonGroup-root MuiButtonGroup-outlined css-1o97n10-MuiButtonGroup-root"
               role="group"
             >
               <button
@@ -157,7 +157,7 @@
             Number of rows for tables
           </dt>
           <dd
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-9f9ori-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-deb4a-MuiGrid-root"
           >
             <div
               class="MuiFormControl-root css-1nrlq1o-MuiFormControl-root"
@@ -203,7 +203,7 @@
             Timezone to display for dates
           </dt>
           <dd
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-9f9ori-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-1xrovmc-MuiGrid-root"
           >
             <div
               class="MuiBox-root css-10rqxfs"
@@ -214,19 +214,12 @@
                 <div
                   class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
                 >
-                  <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard css-zh08sj-MuiFormLabel-root-MuiInputLabel-root"
-                    data-shrink="false"
-                    for="cluster-selector-autocomplete"
-                    id="cluster-selector-autocomplete-label"
-                  >
-                    Timezone
-                  </label>
                   <div
                     class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-lbi814-MuiInputBase-root-MuiInput-root"
                   >
                     <input
                       aria-autocomplete="both"
+                      aria-describedby="cluster-selector-autocomplete-helper-text"
                       aria-expanded="false"
                       aria-invalid="false"
                       autocapitalize="none"
@@ -265,6 +258,12 @@
                       </button>
                     </div>
                   </div>
+                  <p
+                    class="MuiFormHelperText-root MuiFormHelperText-sizeMedium css-nnd8o8-MuiFormHelperText-root"
+                    id="cluster-selector-autocomplete-helper-text"
+                  >
+                    Timezone
+                  </p>
                 </div>
               </div>
             </div>
diff --git a/frontend/src/components/common/TimezoneSelect/TimezoneSelect.tsx b/frontend/src/components/common/TimezoneSelect/TimezoneSelect.tsx
index 0c797febf1..2838fbd8b3 100644
--- a/frontend/src/components/common/TimezoneSelect/TimezoneSelect.tsx
+++ b/frontend/src/components/common/TimezoneSelect/TimezoneSelect.tsx
@@ -34,7 +34,7 @@ export default function TimezoneSelect(props: TimezoneSelectorProps) {
       autoComplete
       includeInputInList
       openOnFocus
-      renderInput={params => <TextField {...params} label={t('Timezone')} />}
+      renderInput={params => <TextField {...params} helperText={t('Timezone')} />}
       onChange={(_ev, value) => onChange(value.name)}
       value={timezoneOptions.find(option => option.name === initialTimezone)}
     />
diff --git a/frontend/src/i18n/LocaleSelect/LocaleSelect.tsx b/frontend/src/i18n/LocaleSelect/LocaleSelect.tsx
index d8d0cf7526..0ef1e6aa79 100644
--- a/frontend/src/i18n/LocaleSelect/LocaleSelect.tsx
+++ b/frontend/src/i18n/LocaleSelect/LocaleSelect.tsx
@@ -56,7 +56,7 @@ export default function LocaleSelect(props: LocaleSelectProps) {
   const extraInputProps = import.meta.env.UNDER_TEST ? { 'aria-controls': 'under-test' } : {};
 
   return (
-    <FormControl sx={{ margin: theme.spacing(2) }} {...formControlProps}>
+    <FormControl {...formControlProps}>
       {props.showTitle && <FormLabel component="legend">{t('Select locale')}</FormLabel>}
       <Select
         value={i18n.language ? i18n.language : 'en'}
diff --git a/frontend/src/i18n/LocaleSelect/__snapshots__/LocaleSelect.Initial.stories.storyshot b/frontend/src/i18n/LocaleSelect/__snapshots__/LocaleSelect.Initial.stories.storyshot
index fd78916998..26a4243702 100644
--- a/frontend/src/i18n/LocaleSelect/__snapshots__/LocaleSelect.Initial.stories.storyshot
+++ b/frontend/src/i18n/LocaleSelect/__snapshots__/LocaleSelect.Initial.stories.storyshot
@@ -1,7 +1,7 @@
 <body>
   <div>
     <div
-      class="MuiFormControl-root css-k2e4wk-MuiFormControl-root"
+      class="MuiFormControl-root css-1nrlq1o-MuiFormControl-root"
     >
       <div
         class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl  css-16kq2pe-MuiInputBase-root-MuiInput-root-MuiSelect-root"