unify FormHelperText styles

Emurgo · Oct 15, 2021 · b9546f2 · b9546f2
1 parent b4ff5a7
commit b9546f2
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 47 deletions.
diff --git a/packages/yoroi-extension/app/components/common/Autocomplete.js b/packages/yoroi-extension/app/components/common/Autocomplete.js
@@ -177,12 +177,7 @@ function Autocomplete({
           {Boolean(error) === true ? <ErrorIcon /> : null}
         </CheckWrapper>
       </InputWrapper>
-      <FormHelperText
-        sx={{ position: 'absolute', bottom: 0, marginLeft: theme.name === 'classic' ? 0 : '14px' }}
-        id={id ?? 'autocomplete-combobox'}
-      >
-        {error}
-      </FormHelperText>
+      <FormHelperText id={id ?? 'autocomplete-combobox'}>{error}</FormHelperText>
 
       <ULList
         component="ul"
@@ -243,7 +238,7 @@ Autocomplete.defaultProps = {
 
 const StyledFormControl = styled(FormControl)(({ theme }) => ({
   marginTop: theme.name === 'classic' ? 0 : '12px',
-  marginBottom: '10px',
+  marginBottom: '16px',
   paddingBottom: '24px',
   '&:hover': {
     '& .MuiInputLabel-root': {

diff --git a/packages/yoroi-extension/app/components/common/Select.js b/packages/yoroi-extension/app/components/common/Select.js
@@ -52,19 +52,7 @@ function Select({
         }}
         {...props}
       />
-      {helperText !== null ? (
-        <FormHelperText
-          sx={{
-            position: 'absolute',
-            marginLeft: 0,
-            lineHeight: '1.33',
-            fontSize: '0.75rem',
-            bottom: '-5px',
-          }}
-        >
-          {helperText}
-        </FormHelperText>
-      ) : null}
+      {helperText !== null ? <FormHelperText>{helperText}</FormHelperText> : null}
     </SFormControl>
   );
 }

diff --git a/packages/yoroi-extension/app/styles/overrides/FormHelperText.js b/packages/yoroi-extension/app/styles/overrides/FormHelperText.js
@@ -0,0 +1,38 @@
+// @flow
+const ClassicFormHelperText = {
+  styleOverrides: {
+    root: {
+      color: 'var(--component-input-helper-text)',
+      marginLeft: 0,
+      marginTop: 0,
+      fontWeight: 400,
+      position: 'absolute',
+      bottom: '-2px',
+      '&.Mui-disabled': {
+        color: 'var(--component-input-helper-text-disabled)',
+      },
+      '&.Mui-error': {
+        color: 'var(--component-input-error)',
+      },
+    },
+  },
+};
+const ModernFormHelperText = {
+  styleOverrides: {
+    root: {
+      color: 'var(--component-input-helper-text)',
+      marginTop: 0,
+      marginLeft: '14px',
+      fontWeight: 400,
+      position: 'absolute',
+      bottom: '-2px',
+      '&.Mui-disabled': {
+        color: 'var(--component-input-helper-text-disabled)',
+      },
+      '&.Mui-error': {
+        color: 'var(--component-input-error)',
+      },
+    },
+  },
+};
+export { ClassicFormHelperText, ModernFormHelperText };
diff --git a/packages/yoroi-extension/app/styles/overrides/TextField.js b/packages/yoroi-extension/app/styles/overrides/TextField.js
@@ -16,19 +16,6 @@ const ClassicTextField = {
       '& .MuiSelect-select': {
         backgroundColor: 'white',
       },
-      '& .MuiFormHelperText-root': {
-        color: 'var(--component-input-helper-text)',
-        marginLeft: 0,
-        fontWeight: 400,
-        position: 'absolute',
-        bottom: '-2px',
-        '&.Mui-disabled': {
-          color: 'var(--component-input-helper-text-disabled)',
-        },
-        '&.Mui-error': {
-          color: 'var(--component-input-error)',
-        },
-      },
     },
   },
   defaultProps: {
@@ -53,20 +40,6 @@ const ModernTextField = {
         borderRadius: 8,
         backgroundColor: 'white',
       },
-      '& .MuiFormHelperText-root': {
-        color: 'var(--component-input-helper-text)',
-        letterSpacing: '0.4px',
-        marginLeft: '14px',
-        fontWeight: 400,
-        position: 'absolute',
-        bottom: '-2px',
-        '&.Mui-disabled': {
-          color: 'var(--component-input-helper-text-disabled)',
-        },
-        '&.Mui-error': {
-          color: 'var(--component-input-error)',
-        },
-      },
     },
   },
 

diff --git a/packages/yoroi-extension/app/styles/overrides/index.js b/packages/yoroi-extension/app/styles/overrides/index.js
@@ -3,6 +3,7 @@ export * from './Button';
 export * from './Checkbox';
 export * from './TextField';
 export * from './OutlinedInput';
+export * from './FormHelperText';
 export * from './Select';
 export * from './MenuItem';
 export * from './Menu';

diff --git a/packages/yoroi-extension/app/styles/themes/classic-theme.js b/packages/yoroi-extension/app/styles/themes/classic-theme.js
@@ -7,6 +7,7 @@ import {
   ClassicInputLabel,
   ClassicTextField,
   ClassicOutlinedInput,
+  ClassicFormHelperText,
   ClassicMenu,
   ClassicMenuItem,
   ClassicTabs,
@@ -32,6 +33,7 @@ export const classicTheme: Object = createTheme(
       MuiInputLabel: ClassicInputLabel,
       MuiTextField: ClassicTextField,
       MuiOutlinedInput: ClassicOutlinedInput,
+      MuiFormHelperText: ClassicFormHelperText,
       MuiSelect: ClassicSelect,
       MuiMenuItem: ClassicMenuItem,
       MuiMenu: ClassicMenu,

diff --git a/packages/yoroi-extension/app/styles/themes/modern-theme.js b/packages/yoroi-extension/app/styles/themes/modern-theme.js
@@ -6,6 +6,7 @@ import {
   ModernCheckbox,
   ModernTextField,
   ModernOutlinedInput,
+  ModernFormHelperText,
   ModernMenu,
   ModernMenuItem,
   ModernTabs,
@@ -31,6 +32,7 @@ export const modernTheme: Object = createTheme(
       MuiCheckbox: ModernCheckbox,
       MuiTextField: ModernTextField,
       MuiOutlinedInput: ModernOutlinedInput,
+      MuiFormHelperText: ModernFormHelperText,
       MuiSelect: ModernSelect,
       MuiInputLabel: ModernInputLabel,
       MuiMenu: ModernMenu,