fix(UserDetailEditor): improve styling for errors

boklisten · Aug 11, 2024 · 13bbb4f · 13bbb4f
1 parent 9b159c7
commit 13bbb4f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/components/user/user-detail-editor/FieldErrorAlert.tsx b/src/components/user/user-detail-editor/FieldErrorAlert.tsx
@@ -12,7 +12,7 @@ export default function FieldErrorAlert({
       key={error.type}
       severity="error"
       data-testid="error-message"
-      sx={{ mt: 1 }}
+      sx={{ my: 1 }}
     >
       {error.message}
     </Alert>

diff --git a/src/components/user/user-detail-editor/UserDetailEditor.tsx b/src/components/user/user-detail-editor/UserDetailEditor.tsx
@@ -477,13 +477,24 @@ const UserDetailEditor = ({
             )}
           </Grid>
           {Object.values(errors).length > 0 && (
-            <Alert severity="error" sx={{ mt: 2 }}>
+            <Alert
+              severity="error"
+              sx={{
+                mt: 2,
+                backgroundColor: "transparent",
+                border: "3px solid #c30000",
+              }}
+            >
               <AlertTitle>
                 Du må rette opp følgende før du kan gå videre:
               </AlertTitle>
               <List sx={{ listStyleType: "disc", pl: 2 }}>
                 {Object.values(errors).map((error) => (
-                  <ListItem sx={{ display: "list-item" }} key={error.message}>
+                  <ListItem
+                    disablePadding
+                    sx={{ display: "list-item", py: 0.2 }}
+                    key={error.message}
+                  >
                     {error.message}
                   </ListItem>
                 ))}