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 = { const dropIn = {
hidden: { hidden: {
y: "-100vh", y: "-100vh",
}, },
visible: { visible: {
y: "0", y: "0",
}, },
exit: { exit: {
y: "-100vh", y: "-100vh",
}, },
}; };
interface AlertProps { interface AlertProps {
handleClose: Function, handleClose: Function,
text: string text: string
} }
function GreenAlert ({handleClose, text}: AlertProps){ function GreenAlert({ handleClose, text }: AlertProps) {
{setTimeout(handleClose, 1500)} { setTimeout(handleClose, 1500) }
return( return (
<Backdrop onClick={handleClose}> <Backdrop onClick={handleClose}>
<motion.div <motion.div
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
className="greenAlert" className="greenAlert"
// variant={dropIn} // variant={dropIn}
@ -35,8 +35,10 @@ function GreenAlert ({handleClose, text}: AlertProps){
animate="visible" animate="visible"
exit="exit" exit="exit"
> >
<AiOutlineCheckCircle/> <AiOutlineCheckCircle />
<p>{text}</p> <div className="text_alert">
<h5>{text}</h5>
</div>
</motion.div> </motion.div>
</Backdrop> </Backdrop>
) )

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

@ -35,7 +35,9 @@ function RedAlert ({handleClose, text}: AlertProps) {
exit="exit" exit="exit"
> >
<BiErrorCircle/> <BiErrorCircle/>
<p>{text}</p> <div className="text_alert">
<h5>{text}</h5>
</div>
</motion.div> </motion.div>
</Backdrop> </Backdrop>
) )

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

@ -8,27 +8,27 @@ import { GiCrownedSkull, GiWingedSword } from "react-icons/gi";
const dropIn = { const dropIn = {
hidden: { hidden: {
y: "-100vh", y: "-100vh",
}, },
visible: { visible: {
y: "0", y: "0",
}, },
exit: { exit: {
y: "-100vh", y: "-100vh",
}, },
}; };
interface AlertProps { interface AlertProps {
handleClose: Function, handleClose: Function,
text: string, text: string,
icon: number 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}> <Backdrop onClick={handleClose}>
<motion.div <motion.div
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
className="yellowAlert" className="yellowAlert"
// variant={dropIn} // variant={dropIn}
@ -37,22 +37,24 @@ function YellowAlert ({handleClose, text, icon}: AlertProps) {
exit="exit" exit="exit"
> >
{icon === 0 ? ( {icon === 0 ? (
<GrTrophy/> <GrTrophy />
):("")} ) : ("")}
{icon === 1 ? ( {icon === 1 ? (
<MdQrCodeScanner/> <MdQrCodeScanner />
):("")} ) : ("")}
{icon === 2 ? ( {icon === 2 ? (
<GiCrownedSkull/> <GiCrownedSkull />
):("")} ) : ("")}
{icon === 3 ? ( {icon === 3 ? (
<GiWingedSword/> <GiWingedSword />
):("")} ) : ("")}
<h5>{text}</h5> <div className="text_alert">
<h5>{text}</h5>
</div>
</motion.div> </motion.div>
</Backdrop> </Backdrop>
) )

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

@ -266,7 +266,7 @@ p {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
.redAlert{ /* .redAlert{
width: clamp(50%, 500px, 90%); width: clamp(50%, 500px, 90%);
height: min(50%, 100px); height: min(50%, 100px);
@ -275,23 +275,30 @@ p {
border-radius: 12px; border-radius: 12px;
flex-direction: row; flex-direction: row;
align-items: center; 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); background-color: rgba(133, 6, 6, 0.7);
font-size: 25px; font-size: 25px;
color: rgba(255, 255, 255, 1); 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{ .yellowAlert{
@ -303,17 +310,13 @@ p {
border-radius: 12px; border-radius: 12px;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
text-align: center;
background-color: rgba(212, 175, 55, 0.7); background-color: rgba(212, 175, 55, 0.7);
font-size: 25px; font-size: 25px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
flex-wrap: wrap; flex-wrap: wrap;
} }
.yellowAlert::p {
overflow-wrap: break-word;
max-width: 1000px;
}
.modalSetting{ .modalSetting{
width: clamp(50%, 700px, 90%); width: clamp(50%, 700px, 90%);
height: min(50%, 300px); height: min(50%, 300px);