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 && ( + + {error.message} + + ) + } 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} /> - {error?.message} + {error && ( + + + {error.message} + + + )} )} /> 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 && ( + + {error.message} + + ) + } 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 && ( + + {error.message} + + ) + } 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 = () => { - + * takto označené polia sú povinné