fix: footer feedback

Author: SKairinos

src/theme/components/MuiFormHelperText.ts

@@ -4,9 +4,7 @@ import Components from './_components';
 const MuiFormHelperText: Components['MuiFormHelperText'] = {
   styleOverrides: {
     root: {
-      ...form,
-      marginTop: 4,
-      marginLeft: 4
+      ...form
     }
   }
 };

src/theme/components/MuiInputAdornment.ts

@@ -0,0 +1,12 @@
+import typography from '../typography';
+import Components from './_components';
+
+const MuiInputAdornment: Components['MuiInputAdornment'] = {
+  styleOverrides: {
+    root: {
+      color: typography.body1?.color
+    }
+  }
+};
+
+export default MuiInputAdornment;

src/theme/components/MuiInputBase.ts

@@ -1,10 +1,12 @@
+import typography from '../typography';
 import Components from './_components';
 
 const MuiInputBase: Components['MuiInputBase'] = {
   styleOverrides: {
     root: {
       backgroundColor: 'white',
-      marginBottom: 0
+      marginBottom: 0,
+      color: typography.body1?.color
     }
   }
 };

src/theme/components/MuiTextField.ts

@@ -1,7 +1,8 @@
 import {
   inputClasses,
   inputBaseClasses,
-  outlinedInputClasses
+  outlinedInputClasses,
+  formHelperTextClasses
 } from '@mui/material';
 
 import Components from './_components';
@@ -22,6 +23,9 @@ const MuiTextField: Components['MuiTextField'] = {
       [`& .${outlinedInputClasses.root}.${inputClasses.focused} > fieldset`]: {
         borderColor: 'black !important'
       },
+      [`.${formHelperTextClasses.root}`]: {
+        fontSize: '12px !important'
+      },
       ...(ownerState.multiline === true && {
         ...((
           includesClassNames(ownerState, ['resize']) ||

src/theme/components/index.ts

@@ -9,6 +9,7 @@ import MuiDialog from './MuiDialog';
 import MuiFormControlLabel from './MuiFormControlLabel';
 import MuiFormHelperText from './MuiFormHelperText';
 import MuiGrid2 from './MuiGrid2';
+import MuiInputAdornment from './MuiInputAdornment';
 import MuiInputBase from './MuiInputBase';
 import MuiLink from './MuiLink';
 import MuiMenu from './MuiMenu';
@@ -33,6 +34,7 @@ const components: ThemeOptions['components'] = {
   MuiFormControlLabel,
   MuiFormHelperText,
   MuiGrid2,
+  MuiInputAdornment,
   MuiInputBase,
   MuiLink,
   MuiMenu,

src/theme/typography.ts

@@ -1,11 +1,16 @@
-import { TypographyOptions } from '@mui/material/styles/createTypography';
+import {
+  TypographyOptions,
+  CSSProperties
+} from '@mui/material/styles/createTypography';
 
 // Pseudo typography variant for all form text.
-export const form = {
+export const form: CSSProperties = {
   fontFamily: '"Inter"',
-  fontSize: '14px',
-  fontWeight: 500,
-  marginBottom: '12px'
+  fontSize: '14px !important',
+  fontWeight: 600,
+  margin: 0,
+  marginBottom: '12px',
+  letterSpacing: 0
 };
 
 // TODO: assess if line-height is needed.