From 0ce47df00c240fe3d2477688857d680eb7bbfc0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=BA=C5=A1=20Hlav=C3=A1=C4=8Dik?=
 <hlavacik.matus@gmail.com>
Date: Sat, 14 Dec 2024 17:33:55 +0100
Subject: [PATCH] Redesign Error Inputs (#506)

Design error state of form fields
---
 .../FormAutocomplete/FormAutocomplete.tsx     | 11 +++++-
 .../FormItems/FormCheckbox/FormCheckbox.tsx   | 10 ++++-
 .../FormItems/FormInput/FormInput.tsx         | 11 +++++-
 .../FormItems/FormSelect/FormSelect.tsx       | 11 +++++-
 src/components/FormItems/styles.ts            | 37 ++++++++++++++++---
 src/components/RegisterForm/RegisterForm.tsx  |  2 +-
 6 files changed, 68 insertions(+), 14 deletions(-)

diff --git a/src/components/FormItems/FormAutocomplete/FormAutocomplete.tsx b/src/components/FormItems/FormAutocomplete/FormAutocomplete.tsx
index dec5edd4..f741289a 100644
--- a/src/components/FormItems/FormAutocomplete/FormAutocomplete.tsx
+++ b/src/components/FormItems/FormAutocomplete/FormAutocomplete.tsx
@@ -1,4 +1,4 @@
-import {Autocomplete, TextField, TextFieldProps} from '@mui/material'
+import {Autocomplete, TextField, TextFieldProps, Typography} from '@mui/material'
 import {Controller, ControllerProps, FieldPath, FieldValues} from 'react-hook-form'
 
 import {SelectOption} from '../FormSelect/FormSelect'
@@ -44,7 +44,14 @@ export const FormAutocomplete = <
               label={label}
               variant="outlined"
               fullWidth
-              helperText={error?.message}
+              error={!!error}
+              helperText={
+                error && (
+                  <Typography variant="body2" fontWeight={800}>
+                    {error.message}
+                  </Typography>
+                )
+              }
               focused={false}
             />
           )}
diff --git a/src/components/FormItems/FormCheckbox/FormCheckbox.tsx b/src/components/FormItems/FormCheckbox/FormCheckbox.tsx
index 56ba33b9..a8e4d7b5 100644
--- a/src/components/FormItems/FormCheckbox/FormCheckbox.tsx
+++ b/src/components/FormItems/FormCheckbox/FormCheckbox.tsx
@@ -1,4 +1,4 @@
-import {Checkbox, CheckboxProps, FormControl, FormControlLabel, FormHelperText} from '@mui/material'
+import {Checkbox, CheckboxProps, FormControl, FormControlLabel, FormHelperText, Typography} from '@mui/material'
 import {Controller, ControllerProps, FieldPath, FieldValues} from 'react-hook-form'
 
 import {formItemStyle} from '../styles'
@@ -27,7 +27,13 @@ export const FormCheckbox = <
           label={label}
           disabled={disabled}
         />
-        <FormHelperText>{error?.message}</FormHelperText>
+        {error && (
+          <FormHelperText>
+            <Typography variant="body2" fontWeight={800}>
+              {error.message}
+            </Typography>
+          </FormHelperText>
+        )}
       </FormControl>
     )}
   />
diff --git a/src/components/FormItems/FormInput/FormInput.tsx b/src/components/FormItems/FormInput/FormInput.tsx
index 3da0c239..326017dd 100644
--- a/src/components/FormItems/FormInput/FormInput.tsx
+++ b/src/components/FormItems/FormInput/FormInput.tsx
@@ -1,4 +1,4 @@
-import {TextField, TextFieldProps} from '@mui/material'
+import {TextField, TextFieldProps, Typography} from '@mui/material'
 import {Controller, ControllerProps, FieldPath, FieldValues} from 'react-hook-form'
 
 import {formItemStyle} from '../styles'
@@ -29,7 +29,14 @@ export const FormInput = <
         type={type}
         variant="outlined"
         fullWidth
-        helperText={error?.message}
+        error={!!error}
+        helperText={
+          error && (
+            <Typography variant="body2" fontWeight={800}>
+              {error.message}
+            </Typography>
+          )
+        }
         focused={false}
         sx={formItemStyle}
         {...props}
diff --git a/src/components/FormItems/FormSelect/FormSelect.tsx b/src/components/FormItems/FormSelect/FormSelect.tsx
index ecb99823..a25c245b 100644
--- a/src/components/FormItems/FormSelect/FormSelect.tsx
+++ b/src/components/FormItems/FormSelect/FormSelect.tsx
@@ -1,4 +1,4 @@
-import {MenuItem, TextField, TextFieldProps} from '@mui/material'
+import {MenuItem, TextField, TextFieldProps, Typography} from '@mui/material'
 import {Controller, ControllerProps, FieldPath, FieldValues} from 'react-hook-form'
 
 import {formItemStyle} from '../styles'
@@ -33,7 +33,14 @@ export const FormSelect = <
         variant="outlined"
         label={label}
         fullWidth
-        helperText={error?.message}
+        error={!!error}
+        helperText={
+          error && (
+            <Typography variant="body2" fontWeight={800}>
+              {error.message}
+            </Typography>
+          )
+        }
         focused={false}
         sx={formItemStyle}
       >
diff --git a/src/components/FormItems/styles.ts b/src/components/FormItems/styles.ts
index 282c4c47..50523777 100644
--- a/src/components/FormItems/styles.ts
+++ b/src/components/FormItems/styles.ts
@@ -1,7 +1,34 @@
 export const formItemStyle = {
-  '.MuiFormHelperText-contained': {color: 'black !important', fontWeight: 'bold', textTransform: 'uppercase'},
-  '.MuiInputLabel-root.MuiInputLabel-shrink': {color: 'black', fontWeight: 'bold'},
-  '.MuiInputLabel-root.MuiInputLabel-shrink.Mui-disabled': {color: 'rgba(0, 0, 0, 0.38)'},
-  '.MuiOutlinedInput-root': {borderRadius: 0},
-  '.MuiOutlinedInput-notchedOutline': {borderWidth: '5px', borderColor: 'black', fontWeight: 'bold'},
+  '.MuiFormHelperText-contained': {
+    color: 'black !important',
+    textTransform: 'uppercase',
+  },
+  '.MuiInputLabel-root.Mui-error': {
+    color: 'white',
+  },
+  '.MuiInputLabel-root.MuiInputLabel-shrink': {
+    color: 'black',
+    fontWeight: 'bold',
+    background: 'white',
+    padding: '0 10px 0 5px',
+    marginLeft: '-1px',
+  },
+  '.MuiInputLabel-root.MuiInputLabel-shrink.Mui-disabled': {
+    color: 'rgba(0, 0, 0, 0.38)',
+  },
+  '.MuiOutlinedInput-root': {
+    borderRadius: 0,
+  },
+  '.MuiOutlinedInput-root.Mui-error': {
+    color: 'white',
+    background: 'black',
+  },
+  '.MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline': {
+    borderColor: 'black',
+  },
+  '.MuiOutlinedInput-notchedOutline': {
+    borderWidth: '5px',
+    borderColor: 'black',
+    fontWeight: 'bold',
+  },
 }
diff --git a/src/components/RegisterForm/RegisterForm.tsx b/src/components/RegisterForm/RegisterForm.tsx
index 04fae1ca..6b87df9c 100644
--- a/src/components/RegisterForm/RegisterForm.tsx
+++ b/src/components/RegisterForm/RegisterForm.tsx
@@ -213,7 +213,7 @@ export const RegisterForm: FC = () => {
           <SchoolSubForm control={control} watch={watch} setValue={setValue} gap={2} />
           <FormInput control={control} name="phone" label="telefón v tvare +421 ..." rules={phoneRule} />
           <FormInput control={control} name="parent_phone" label="telefón na rodiča" rules={phoneRule} />
-          <Typography variant="body2" fontWeight={800}>
+          <Typography variant="body2" fontWeight={800} mx={2} sx={{textTransform: 'uppercase'}}>
             * takto označené polia sú povinné
           </Typography>
           <Typography variant="body2">