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é