recentre alerte

containers/react/src/components/Alert/GreenAlert.tsx

@@ -20,11 +20,11 @@ const dropIn = {
 interface AlertProps {
     handleClose: Function,
     text: string
-  }
+}
 
-function GreenAlert ({handleClose, text}: AlertProps){
+function GreenAlert({ handleClose, text }: AlertProps) {
-        {setTimeout(handleClose, 1500)}
+    { setTimeout(handleClose, 1500) }
-        return(
+    return (
 
         <Backdrop onClick={handleClose}>
             <motion.div
@@ -35,8 +35,10 @@ function GreenAlert ({handleClose, text}: AlertProps){
                 animate="visible"
                 exit="exit"
             >
-                <AiOutlineCheckCircle/>
+                <AiOutlineCheckCircle />
-               <p>{text}</p>
+                <div className="text_alert">
+                    <h5>{text}</h5>
+                </div>
             </motion.div>
         </Backdrop>
     )

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>
     )

containers/react/src/components/Alert/YellowAlert.tsx

@@ -22,11 +22,11 @@ interface AlertProps {
     handleClose: Function,
     text: string,
     icon: number
-  }
+}
 
-function YellowAlert ({handleClose, text, icon}: AlertProps) {
+function YellowAlert({ handleClose, text, icon }: AlertProps) {
-    {setTimeout(handleClose, 3000)}
+    { setTimeout(handleClose, 3000) }
-    return(
+    return (
         <Backdrop onClick={handleClose}>
             <motion.div
                 onClick={(e) => e.stopPropagation()}
@@ -38,21 +38,23 @@ function YellowAlert ({handleClose, text, icon}: AlertProps) {
             >
 
                 {icon === 0 ? (
-                <GrTrophy/>
+                    <GrTrophy />
-            ):("")}
+                ) : ("")}
                 {icon === 1 ? (
-                <MdQrCodeScanner/>
+                    <MdQrCodeScanner />
-            ):("")}
+                ) : ("")}
 
                 {icon === 2 ? (
-                <GiCrownedSkull/>
+                    <GiCrownedSkull />
-            ):("")}
+                ) : ("")}
 
                 {icon === 3 ? (
-                <GiWingedSword/>
+                    <GiWingedSword />
-            ):("")}
+                ) : ("")}
 
+                <div className="text_alert">
                     <h5>{text}</h5>
+                </div>
             </motion.div>
         </Backdrop>
     )

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{
+.text_alert{
-	width: clamp(50%, 500px, 90%);
+	text-align: center;
-	height: min(50%, 100px);
+	justify-content: center;
-
-	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);
 }
 
 .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);