Kinou/ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

recentre alerte

Browse Source
This commit is contained in:
Elisee ADJIGUIDI 2023-06-26 05:09:47 +02:00
parent ba5490cf90
commit 3d74296bb8
4 changed files with 76 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
containers/react/src/components/Alert/GreenAlert.tsx
View File

@ -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(
function GreenAlert({ handleClose, text }: AlertProps) {
{ setTimeout(handleClose, 1500) }
return (
<Backdrop onClick={handleClose}>
<motion.div
<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>
)

4
containers/react/src/components/Alert/RedAlert.tsx
View File

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

58
containers/react/src/components/Alert/YellowAlert.tsx
View File

@ -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 === 2 ? (
<GiCrownedSkull />
) : ("")}
{icon === 3 ? (
<GiWingedSword/>
):("")}
{icon === 3 ? (
<GiWingedSword />
) : ("")}
<h5>{text}</h5>
<div className="text_alert">
<h5>{text}</h5>
</div>
</motion.div>
</Backdrop>
)

39
containers/react/src/styles/Messages.css
View File

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