From 953aca660079d694d9360772383bb87234869aec Mon Sep 17 00:00:00 2001
From: SKairinos <skairinos@gmail.com>
Date: Thu, 6 Jul 2023 13:19:04 +0100
Subject: [PATCH] fix: footer feedback

---
 src/theme/components/MuiFormHelperText.ts |  4 +---
 src/theme/components/MuiInputAdornment.ts | 12 ++++++++++++
 src/theme/components/MuiInputBase.ts      |  4 +++-
 src/theme/components/MuiTextField.ts      |  6 +++++-
 src/theme/components/index.ts             |  2 ++
 src/theme/typography.ts                   | 15 ++++++++++-----
 6 files changed, 33 insertions(+), 10 deletions(-)
 create mode 100644 src/theme/components/MuiInputAdornment.ts

diff --git a/src/theme/components/MuiFormHelperText.ts b/src/theme/components/MuiFormHelperText.ts
index 0096911b..de73f31e 100644
--- a/src/theme/components/MuiFormHelperText.ts
+++ b/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
     }
   }
 };
diff --git a/src/theme/components/MuiInputAdornment.ts b/src/theme/components/MuiInputAdornment.ts
new file mode 100644
index 00000000..88f27301
--- /dev/null
+++ b/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;
diff --git a/src/theme/components/MuiInputBase.ts b/src/theme/components/MuiInputBase.ts
index 2a55dc95..c0da1540 100644
--- a/src/theme/components/MuiInputBase.ts
+++ b/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
     }
   }
 };
diff --git a/src/theme/components/MuiTextField.ts b/src/theme/components/MuiTextField.ts
index e44d18f6..5f69429d 100644
--- a/src/theme/components/MuiTextField.ts
+++ b/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']) ||
diff --git a/src/theme/components/index.ts b/src/theme/components/index.ts
index 7aac3c69..d9b63c1f 100644
--- a/src/theme/components/index.ts
+++ b/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,
diff --git a/src/theme/typography.ts b/src/theme/typography.ts
index f10fbbd2..9d9592ab 100644
--- a/src/theme/typography.ts
+++ b/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.