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

change design

Browse Source
This commit is contained in:
Elisee ADJIGUIDI 2023-06-23 19:59:07 +02:00
parent 0d42eda749
commit 72a4f42cdb
7 changed files with 64 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,11 +32,11 @@ function RedAlert ({handleClose, text}: AlertProps) {
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="exit" exit="exit"
> >
<BiErrorCircle/> <BiErrorCircle/>
<p>{text}</p> <p>{text}</p>
</motion.div> </motion.div>
{setTimeout(handleClose, 1500)} {setTimeout(handleClose, 1500)}
</Backdrop> </Backdrop>
) )
} }

6
containers/react/src/components/Game/PlayButton.tsx
View File

@ -40,9 +40,9 @@ function PlayButton() {
<button onClick={handleButtonClick} className="playButton">Play</button> <button onClick={handleButtonClick} className="playButton">Play</button>
{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */} {/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
<div className='checkbox'> <div className='checkbox'>
<p><input type="checkbox" value="superpower"/> Super Power </p> <p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power </p>
<p><input type="checkbox" value="obstacle"/> Obstacle </p> <p><input className="inside_checkbox" type="checkbox" value="obstacle"/> Obstacle </p>
<p><input type="checkbox" value="speed"/> Faster and Faster </p> <p><input className="inside_checkbox" type="checkbox" value="speed"/> Faster and Faster </p>
</div> </div>
</div> </div>
); );

10
containers/react/src/components/Messages/Message.tsx
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Message.tsx :+: :+: :+: */ /* Message.tsx :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: sadjigui <sadjigui@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/01 18:24:46 by apommier #+# #+# */ /* Created: 2023/06/01 18:24:46 by apommier #+# #+# */
/* Updated: 2023/06/20 12:47:33 by apommier ### ########.fr */ /* Updated: 2023/06/23 19:33:40 by sadjigui ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -42,11 +42,13 @@ function MessageMe({message, own}: MessageMeProps){
const [user, setUser] = useState<User>(); const [user, setUser] = useState<User>();
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
if (scrollRef.current) if (scrollRef.current)
{ {
scrollRef.current.scrollIntoView({ behavior: "smooth",}) scrollRef.current.scrollIntoView({ behavior: "smooth"});
} }})
useEffect(() => {
const fetchProfilePicture = async () => { const fetchProfilePicture = async () => {
try { try {
// const user = await api.get("/profile"); // const user = await api.get("/profile");

34
containers/react/src/components/Messages/Modal.tsx
View File

@ -103,25 +103,26 @@ const Modal = ({handleClose}) => {
<Backdrop> <Backdrop>
<motion.div <motion.div
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
className="modal" className="modalSetting"
variant={dropIn} variant={dropIn}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="exit" exit="exit"
> >
{/* <p>New Conversation</p> */} {/* <p>New Conversation</p> */}
<div className="settingFirstPart2">
{selectTags.map((selectTag) => ( {selectTags.map((selectTag) => (
<div key={selectTag.id}> <div key={selectTag.id}>
<select <select
value={selectTag.selectedOption} value={selectTag.selectedOption}
onChange={(a) => handleOptionChange(selectTag.id, a.target.value)} onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
> >
<option value="">{ <option value="">{
selectTag.selectedOption ? selectTag.selectedOption : "Select an option" selectTag.selectedOption ? selectTag.selectedOption : "Select an option"
}</option> }</option>
{users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.name)).map((item, index) => ( {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.name)).map((item, index) => (
<option key={index} value={item.username}> <option key={index} value={item.username}>
{item.username} {item.username}
</option> </option>
))} ))}
@ -136,28 +137,30 @@ const Modal = ({handleClose}) => {
<Link to="#" className="submit" onClick={handleClose}>Cancel</Link> <Link to="#" className="submit" onClick={handleClose}>Cancel</Link>
</div> </div>
</div>
<div className="settingSecondPart">
{convs.length > 0 && ( {convs.length > 0 && (
<select <select
value={channel} value={channel}
onChange={(event) => setChannel(event.target.value)} onChange={(event) => setChannel(event.target.value)}
> >
<option value="">Select an option</option> <option value="">Select an option</option>
{convs.map((conv) => ( {convs.map((conv) => (
!(!conv.group || conv.private || (conv.banned && conv.banned.includes(user.username)) || (conv.members && conv.members.includes(user.username))) && ( !(!conv.group || conv.private || (conv.banned && conv.banned.includes(user.username)) || (conv.members && conv.members.includes(user.username))) && (
<option key={conv.id} value={conv.id}> <option key={conv.id} value={conv.id}>
{conv.name} {conv.name}
</option> </option>
) )
))} ))}
</select> </select>
)} )}
{channel.private ? ( {channel.private ? (
<input className="mdp" placeholder="password" type="text" /> <input className="mdp" placeholder="password" type="text" />
):("")} ):("")}
<div className="div_submit"> <div className="div_submit">
@ -166,6 +169,7 @@ const Modal = ({handleClose}) => {
</div>
</motion.div> </motion.div>
</Backdrop> </Backdrop>
) )

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

@ -1,6 +1,6 @@
.home{ .home{
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
height: 90vh; height: 70vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -202,6 +202,7 @@ p {
text-decoration: none; text-decoration: none;
font-weight:lighter; font-weight:lighter;
margin: 1%; margin: 1%;
height: 25px;
} }
.darkSubmit{ .darkSubmit{
@ -307,11 +308,17 @@ p {
/* flex-direction: column; */ /* flex-direction: column; */
/* align-items: center; */ /* align-items: center; */
background-color: #3e3c61; background-color: #3e3c61;
overflow: scroll;
} }
.settingFirstPart{ .settingFirstPart{
margin-top: 10%; margin-top: 10%;
margin-left: 15%; margin-left: 20%;
}
.settingFirstPart2{
margin-top: 10%;
margin-left: 30%;
} }
.settingSecondPart{ .settingSecondPart{
@ -324,6 +331,7 @@ p {
.checkbox{ .checkbox{
display:flex; display:flex;
flex-direction:row; flex-direction:row;
margin-left: 60px;
} }
input.in{ input.in{
@ -331,17 +339,25 @@ input.in{
margin-left: 0px; margin-left: 0px;
background-color: black; background-color: black;
color: white; color: white;
border-radius: 12px; border-radius: 4px;
width: 70%; width: 70%;
height: 100%;
font-weight:100;
font-size: 20px;
padding: 7px;
} }
input.in_howLong{ input.in_howLong{
margin-top: 14.5%; margin-top: 13%;
margin-left: 0px; margin-left: 0px;
background-color: black; background-color: black;
color: white; color: white;
border-radius: 12px; border-radius: 4px;
width: 15%; width: 10%;
height: 10%;
font-weight:100;
font-size: 20px;
padding: 7px;
} }
.mdp{ .mdp{
@ -351,3 +367,9 @@ input.in_howLong{
width: 20%; width: 20%;
} }
.case{
height: auto;
width: auto;
margin-left: 10px;
}

5
containers/react/src/styles/Profile.css
View File

@ -62,6 +62,7 @@
.page { .page {
text-align: center; text-align: center;
overflow-y: scroll; overflow-y: scroll;
/* height: 80vh; */
/* height: 50vh; */ /* height: 50vh; */
/* width: 50vh; */ /* width: 50vh; */
/* background-color: black; */ /* background-color: black; */
@ -96,11 +97,11 @@
} }
.history{ .history{
display: inline-block; display:inline-block;
color: white; color: white;
background-color: #5843e4; background-color: #5843e4;
border-radius: 20px; border-radius: 20px;
padding: 14px; padding: 20px 500px;
font-size: 1.7rem; font-size: 1.7rem;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;

10
containers/react/src/styles/field.css
View File

@ -1,18 +1,14 @@
.playButton { .playButton {
background-image: linear-gradient(90deg, #5843e4, #5a0760); background-image: linear-gradient(90deg, #5843e4, #5a0760);
display: flex;
flex-wrap: wrap;
overflow: hidden;
border-radius: 5vh; border-radius: 5vh;
color: white; color: white;
/* display: block; */ display: block;
margin: auto; margin: auto;
margin-top: 30vh; margin-top: 30vh;
padding: 2vh 4vw; padding: 2vh 5vw;
height: 10vh; height: 10vh;
width: 20vw; width: 20vw;
font-size: 250%; font-size: 300%;
text-align: center;
} }