#10 Style alert messages

SandraBergstrom · Jun 21, 2023 · 4896532 · 4896532
1 parent 73807ce
commit 4896532
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/src/pages/auth/SignUpForm.js b/src/pages/auth/SignUpForm.js
@@ -4,6 +4,7 @@ import { Link, useHistory } from "react-router-dom";
 import styles from "../../styles/SignInUpForm.module.css";
 import btnStyles from "../../styles/Button.module.css";
 import appStyles from "../../App.module.css";
+import alertStyles from '../../styles/AlertMessages.module.css'
 
 import {
   Form,
@@ -74,7 +75,7 @@ const SignUpForm = () => {
               />
             </Form.Group>
             {errors.username?.map((message, idx) => (
-              <Alert variant="warning" key={idx}>
+              <Alert variant="warning" key={idx} className={alertStyles['alert-warning-custom']}>
                 {message}
               </Alert>
             ))}
@@ -91,7 +92,7 @@ const SignUpForm = () => {
               />
             </Form.Group>
             {errors.password1?.map((message, idx) => (
-              <Alert variant="warning" key={idx}>
+              <Alert variant="warning" className={alertStyles['alert-warning-custom']} key={idx}>
                 {message}
               </Alert>
             ))}
@@ -108,7 +109,7 @@ const SignUpForm = () => {
               />
             </Form.Group>
             {errors.password2?.map((message, idx) => (
-              <Alert variant="warning" key={idx}>
+              <Alert variant="warning" className={alertStyles['alert-warning-custom']} key={idx}>
                 {message}
               </Alert>
             ))}

diff --git a/src/styles/AlertMessages.module.css b/src/styles/AlertMessages.module.css
@@ -0,0 +1,6 @@
+.alert-warning-custom {
+    background-color: var(--clr-accent-pink);
+    color: var(--clr-primary-light);
+    border: 1px solid var(--clr-accent-pink);
+    padding: 8px;
+}
diff --git a/src/styles/SignInUpForm.module.css b/src/styles/SignInUpForm.module.css
@@ -2,7 +2,7 @@
     height: calc(100vh - 81px);
   }
   .Input {
-    background: var(--clr-primary-light);
+    background: var(--clr-primary-pink);
     border: 1px solid var(--clr-accent-light);
     box-sizing: border-box;
     border-radius: 10px;
@@ -45,4 +45,4 @@
   
   .SignUpCol {
     height: 375px;
-  } */
+  } */