recentre alerte

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

@@ -36,7 +36,9 @@ function GreenAlert ({handleClose, text}: AlertProps){
                 exit="exit"
             >
                 <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

@@ -52,7 +52,9 @@ function YellowAlert ({handleClose, text, icon}: AlertProps) {
                     <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);