From 489653206a2636d547f0112ea3ee3de07eea1fe4 Mon Sep 17 00:00:00 2001
From: SandraBergstrom <bergstrom_sandra@hotmail.com>
Date: Wed, 21 Jun 2023 10:35:40 +0000
Subject: [PATCH] #10 Style alert messages

---
 src/pages/auth/SignUpForm.js        | 7 ++++---
 src/styles/AlertMessages.module.css | 6 ++++++
 src/styles/SignInUpForm.module.css  | 4 ++--
 3 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 src/styles/AlertMessages.module.css

diff --git a/src/pages/auth/SignUpForm.js b/src/pages/auth/SignUpForm.js
index 29fa9fa..550b747 100644
--- 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
new file mode 100644
index 0000000..39761f7
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/src/styles/SignInUpForm.module.css b/src/styles/SignInUpForm.module.css
index 5b8dfd9..e4d6c3c 100644
--- 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;
-  } */
\ No newline at end of file
+  } */