refactor: Uppdated error styling on input validation.

src/components/AreaCoordinates/AreaCoordinates.styled.tsx

@@ -19,25 +19,7 @@ export const CoordinateGroup = styled.div`
   display: flex;
   flex-direction: column;
 
-  > .autocomplete-error {
-    color: red;
-  }
-
-  > .autocomplete-error {
-    > div {
-      > div {
-        border: solid 2px red;
-      }
-    }
-  }
-
-  > .input-error {
-    > div {
-      > input {
-        border: solid 2px red;
-      }
-    }
-
+  > .error {
     color: red;
   }
 `;

src/components/AreaCoordinates/AreaCoordinates.tsx

@@ -18,18 +18,7 @@ import { AnalogueModelsService } from '../../api/generated/services/AnalogueMode
 import optionTypes from '../../features/Compute/ComputeVariogram/CaseCard/CaseCard';
 import * as Styled from './AreaCoordinates.styled';
 
-// const areaSchema = z.object({
-//   id: z.number(),
-//   name: z.string().min(1, { message: 'Ares is required' }),
-// });
-
 const schema = z.object({
-  // area: z.array(
-  //   z.object({
-  //     id: z.number(),
-  //     name: z.string().min(1, { message: 'Ares is required' }),
-  //   }),
-  // ),
   area: z.string().min(1, { message: 'Ares is required' }),
 
   topX: z
@@ -50,9 +39,6 @@ const schema = z.object({
     .max(12, { message: 'Coordinate is too long, max 12 characters' }),
 });
 
-// type innput = z.input<typeof schema>;
-// type output = z.infer<typeof schema>;
-
 export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
   const [showSaveAlert, setSaveAlert] = useState(false);
   const { data, isLoading } = useQuery({
@@ -70,7 +56,6 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
     { id: 12, name: 'Distal' },
   ];
 
-  // const selectedArea: optionTypes[] = [{ id: 10, name: 'Proximal' }];
   const areaCoordinats = {
     area: '',
     topX: '',
@@ -111,47 +96,53 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
             <Typography variant="h6">Area to define</Typography>
 
             <Autocomplete
-              className={errors.area && 'autocomplete-error'}
-              {
-                ...register('area')
-                // ,
-                // {
-                //   setValueAs: (value: any) => Array(value),
-                // }
-              }
+              variant={errors.area ? 'error' : undefined}
+              {...register('area')}
               label={'Select area'}
               options={modelAreas}
               optionLabel={(option) => option.name}
               onOptionsChange={handleSelectChange}
             ></Autocomplete>
-            <div className={errors.area && 'autocomplete-error'}>
+            <div className={errors.area && 'error'}>
               {errors.area && errors.area?.message}
             </div>
           </Styled.CoordinateGroup>
 
           <Styled.CoordinateGroup>
             <Typography variant="h6">Top Left Corner</Typography>
-            <div className={errors.topX && 'input-error'}>
+            <div className={errors.topX && 'error'}>
               <Label label="X-coordinate" />
-              <Input {...register('topX')} />
+              <Input
+                {...register('topX')}
+                variant={errors.topX ? 'error' : undefined}
+              />
               {errors.topX && errors.topX?.message}
             </div>
-            <div className={errors.topY && 'input-error'}>
+            <div className={errors.topY && 'error'}>
               <Label label="Y-coordinate" />
-              <Input {...register('topY')} />
+              <Input
+                {...register('topY')}
+                variant={errors.topY ? 'error' : undefined}
+              />
               {errors.topY && errors.topY?.message}
             </div>
           </Styled.CoordinateGroup>
           <Styled.CoordinateGroup>
             <Typography variant="h6">Bottom Right Corner </Typography>
-            <div className={errors.bottomX && 'input-error'}>
+            <div className={errors.bottomX && 'error'}>
               <Label label="X-coordinate" />
-              <Input {...register('bottomX')} />
+              <Input
+                {...register('bottomX')}
+                variant={errors.bottomX ? 'error' : undefined}
+              />
               {errors.bottomX && errors.bottomX?.message}
             </div>
-            <div className={errors.bottomY && 'input-error'}>
+            <div className={errors.bottomY && 'error'}>
               <Label label="Y-coordinate" />
-              <Input {...register('bottomY')} />
+              <Input
+                {...register('bottomY')}
+                variant={errors.bottomY ? 'error' : undefined}
+              />
               {errors.bottomY && errors.bottomY?.message}
             </div>
           </Styled.CoordinateGroup>

src/features/AddModel/ModelMetadata/ModelMetadata.styled.ts

@@ -38,23 +38,10 @@ export const InputfieldRequired = styled.div`
   > label {
     color: red;
   }
-
-  > .model-required {
-    > div {
-      border: solid 2px red;
-    }
-  }
 `;
 
 export const Required = styled.div`
   > label {
     color: red;
   }
-  > .model-required {
-    > div {
-      > div {
-        border: solid 2px red;
-      }
-    }
-  }
 `;

src/features/AddModel/ModelMetadata/ModelMetadata.tsx

@@ -79,7 +79,7 @@ export const ModelMetadata = ({
       <Styled.Form>
         <Styled.InputfieldRequired>
           <Styled.TextInput
-            className={`${errors.name && 'model-required'}`}
+            variant={errors.name ? 'error' : undefined}
             id="model-name"
             label="Model Name"
             value={metadata?.name}
@@ -91,7 +91,7 @@ export const ModelMetadata = ({
         </Styled.InputfieldRequired>
         <Styled.InputfieldRequired>
           <Styled.TextInput
-            className={`${errors.description && 'model-required'}`}
+            variant={errors.description ? 'error' : undefined}
             id="model-description"
             label="Model description"
             value={metadata?.description}
@@ -109,7 +109,7 @@ export const ModelMetadata = ({
           <Styled.AutocompleteRow>
             <Styled.Required>
               <MetadataSelect
-                className={`${errors.field && 'model-required'}`}
+                errors={errors.field}
                 type="Field"
                 data={data.data}
                 metadata={metadata.metadata}
@@ -120,8 +120,8 @@ export const ModelMetadata = ({
             </Styled.Required>
             <Styled.Required>
               <MetadataSelect
-                className={`${errors.formation && 'model-required'}`}
                 type="Formation"
+                errors={errors.formation}
                 data={data.data}
                 metadata={metadata.metadata}
                 isLoading={isLoading}
@@ -135,7 +135,7 @@ export const ModelMetadata = ({
           <Styled.AutocompleteRow>
             <Styled.Required>
               <Autocomplete
-                className={`${errors.analogue && 'model-required'}`}
+                variant={errors.analogue ? 'error' : undefined}
                 label="Analogue"
                 options={analougeData.data.data}
                 optionLabel={(option) => option.name}
@@ -154,8 +154,8 @@ export const ModelMetadata = ({
             </Styled.Required>
             <Styled.Required>
               <MetadataSelect
-                className={`${errors.zone && 'model-required'}`}
                 type="Zone"
+                errors={errors.zone}
                 data={data.data}
                 metadata={metadata.metadata}
                 isLoading={isLoading}
@@ -172,17 +172,17 @@ export const ModelMetadata = ({
 
 const MetadataSelect = ({
   type,
+  errors,
   data,
   metadata,
   isLoading,
-  className,
   handleAddMetadata,
 }: {
   type: string;
+  errors: string | undefined;
   data: MetadataDto[];
   metadata: MetadataDto[];
   isLoading: boolean;
-  className: string;
   handleAddMetadata: (
     e: AutocompleteChanges<MetadataDto>,
     type: string,
@@ -203,7 +203,7 @@ const MetadataSelect = ({
 
   return (
     <Autocomplete
-      className={className}
+      variant={errors ? 'error' : undefined}
       label={type}
       options={data.filter((d) => d.metadataType === type)}
       optionLabel={(option) => option.value}