From 3d74296bb8362d92baa9301aeecc26699434ca09 Mon Sep 17 00:00:00 2001
From: Elisee ADJIGUIDI <sadjigui@bess-f2r5s15.clusters.42paris.fr>
Date: Mon, 26 Jun 2023 05:09:47 +0200
Subject: [PATCH] recentre alerte

---
 .../react/src/components/Alert/GreenAlert.tsx | 40 +++++++------
 .../react/src/components/Alert/RedAlert.tsx   |  4 +-
 .../src/components/Alert/YellowAlert.tsx      | 60 ++++++++++---------
 containers/react/src/styles/Messages.css      | 39 ++++++------
 4 files changed, 76 insertions(+), 67 deletions(-)

diff --git a/containers/react/src/components/Alert/GreenAlert.tsx b/containers/react/src/components/Alert/GreenAlert.tsx
index 9f39d2d6..a226c57f 100644
--- a/containers/react/src/components/Alert/GreenAlert.tsx
+++ b/containers/react/src/components/Alert/GreenAlert.tsx
@@ -7,27 +7,27 @@ import React from "react";
 
 const dropIn = {
     hidden: {
-		y: "-100vh",
-	},
-	visible: {
-		y: "0",
-	},
-	exit: {
-		y: "-100vh",
-	},
+        y: "-100vh",
+    },
+    visible: {
+        y: "0",
+    },
+    exit: {
+        y: "-100vh",
+    },
 };
 
 interface AlertProps {
-	handleClose: Function,
-	text: string
-  }
+    handleClose: Function,
+    text: string
+}
 
-function GreenAlert ({handleClose, text}: AlertProps){
-        {setTimeout(handleClose, 1500)}
-        return(
-            
-            <Backdrop onClick={handleClose}>
-        <motion.div
+function GreenAlert({ handleClose, text }: AlertProps) {
+    { setTimeout(handleClose, 1500) }
+    return (
+
+        <Backdrop onClick={handleClose}>
+            <motion.div
                 onClick={(e) => e.stopPropagation()}
                 className="greenAlert"
                 // variant={dropIn}
@@ -35,8 +35,10 @@ function GreenAlert ({handleClose, text}: AlertProps){
                 animate="visible"
                 exit="exit"
             >
-                <AiOutlineCheckCircle/>
-               <p>{text}</p>
+                <AiOutlineCheckCircle />
+                <div className="text_alert">
+                    <h5>{text}</h5>
+                </div>
             </motion.div>
         </Backdrop>
     )
diff --git a/containers/react/src/components/Alert/RedAlert.tsx b/containers/react/src/components/Alert/RedAlert.tsx
index 37a02323..df1fa99e 100644
--- a/containers/react/src/components/Alert/RedAlert.tsx
+++ b/containers/react/src/components/Alert/RedAlert.tsx
@@ -35,7 +35,9 @@ function RedAlert ({handleClose, text}: AlertProps) {
                 exit="exit"
                 >
             <BiErrorCircle/>
-            <p>{text}</p>
+            <div className="text_alert">
+                <h5>{text}</h5>
+            </div>
             </motion.div>
         </Backdrop>
     )
diff --git a/containers/react/src/components/Alert/YellowAlert.tsx b/containers/react/src/components/Alert/YellowAlert.tsx
index 7eb7570c..9ad761e2 100644
--- a/containers/react/src/components/Alert/YellowAlert.tsx
+++ b/containers/react/src/components/Alert/YellowAlert.tsx
@@ -8,27 +8,27 @@ import { GiCrownedSkull, GiWingedSword } from "react-icons/gi";
 
 const dropIn = {
     hidden: {
-		y: "-100vh",
-	},
-	visible: {
-		y: "0",
-	},
-	exit: {
-		y: "-100vh",
-	},
+        y: "-100vh",
+    },
+    visible: {
+        y: "0",
+    },
+    exit: {
+        y: "-100vh",
+    },
 };
 
 interface AlertProps {
-	handleClose: Function,
-	text: string,
+    handleClose: Function,
+    text: string,
     icon: number
-  }
+}
 
-function YellowAlert ({handleClose, text, icon}: AlertProps) {
-    {setTimeout(handleClose, 3000)}
-    return(
+function YellowAlert({ handleClose, text, icon }: AlertProps) {
+    { setTimeout(handleClose, 3000) }
+    return (
         <Backdrop onClick={handleClose}>
-        <motion.div
+            <motion.div
                 onClick={(e) => e.stopPropagation()}
                 className="yellowAlert"
                 // variant={dropIn}
@@ -37,22 +37,24 @@ function YellowAlert ({handleClose, text, icon}: AlertProps) {
                 exit="exit"
             >
 
-            {icon === 0 ? (
-                <GrTrophy/>
-            ):("")}
-            {icon === 1 ? (
-                <MdQrCodeScanner/>
-            ):("")}
+                {icon === 0 ? (
+                    <GrTrophy />
+                ) : ("")}
+                {icon === 1 ? (
+                    <MdQrCodeScanner />
+                ) : ("")}
 
-            {icon === 2 ? (
-                <GiCrownedSkull/>
-            ):("")}
-            
-            {icon === 3 ? (
-                <GiWingedSword/>
-            ):("")}
+                {icon === 2 ? (
+                    <GiCrownedSkull />
+                ) : ("")}
 
-            <h5>{text}</h5>
+                {icon === 3 ? (
+                    <GiWingedSword />
+                ) : ("")}
+
+                <div className="text_alert">
+                    <h5>{text}</h5>
+                </div>
             </motion.div>
         </Backdrop>
     )
diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css
index 90064809..61bf12a0 100644
--- a/containers/react/src/styles/Messages.css
+++ b/containers/react/src/styles/Messages.css
@@ -266,7 +266,7 @@ p {
 	color: rgba(255, 255, 255, 1);
 }
 
-.redAlert{
+/* .redAlert{
 	width: clamp(50%, 500px, 90%);
 	height: min(50%, 100px);
 
@@ -275,23 +275,30 @@ p {
 	border-radius: 12px;
 	flex-direction: row;
 	align-items: center;
+	text-align: center;
+	background-color: rgba(133, 6, 6, 0.7);
+	font-size: 25px;
+	color: rgba(255, 255, 255, 1);
+} */
+
+.redAlert{
+	width: clamp(50%, 500px, 90%);
+	height: min(50%, 100px);
+
+	margin: auto;
+	padding: 1rem;
+	border-radius: 12px;
+	flex-direction: row;
+	text-align: center;
+	/* align-items: center; */
 	background-color: rgba(133, 6, 6, 0.7);
 	font-size: 25px;
 	color: rgba(255, 255, 255, 1);
 }
 
-.redAlert{
-	width: clamp(50%, 500px, 90%);
-	height: min(50%, 100px);
-
-	margin: auto;
-	padding: 1rem;
-	border-radius: 12px;
-	flex-direction: row;
-	align-items: center;
-	background-color: rgba(133, 6, 6, 0.7);
-	font-size: 25px;
-	color: rgba(255, 255, 255, 1);
+.text_alert{
+	text-align: center;
+	justify-content: center;
 }
 
 .yellowAlert{
@@ -303,17 +310,13 @@ p {
 	border-radius: 12px;
 	flex-direction: row;
 	align-items: center;
+	text-align: center;
 	background-color: rgba(212, 175, 55, 0.7);
 	font-size: 25px;
 	color: rgba(255, 255, 255, 1);
 	flex-wrap: wrap;
 }
 
-.yellowAlert::p {
-	overflow-wrap: break-word;
-	max-width: 1000px;
-}
-
 .modalSetting{
 	width: clamp(50%, 700px, 90%);
 	height: min(50%, 300px);