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

augment desactivate 2fa size + blur OK + Friend list css OK Invite button suppress comment spectate button

Browse Source
This commit is contained in:
Lara REALI 2023-06-25 21:51:21 +02:00
parent 007dbe1832
commit 1e9946859c
5 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,9 +23,9 @@ import React from "react";
const MeStyleP = styled.p` const MeStyleP = styled.p`
background-color: #5843e4; background-color: #5843e4;
padding 10px 20px; padding 10px 20px;
border-radius 10px 0px 10px 10px; border-radius 10px;
color: white; color: white;
margin-right: 20px; margin: 10px;
` `
interface MessageMeProps { interface MessageMeProps {

28
containers/react/src/components/Social/Friend.tsx
View File

@ -46,7 +46,7 @@ interface UserProps {
export default function Friend({currentUser}: UserProps) export default function Friend({currentUser}: UserProps)
{ {
const [profilePicture, setProfilePicture] = useState(''); const [profilePicture, setProfilePicture] = useState('');
useEffect(() => { useEffect(() => {
const fetchProfilePicture = async () => { const fetchProfilePicture = async () => {
try { try {
@ -70,9 +70,9 @@ export default function Friend({currentUser}: UserProps)
if (status === 0) if (status === 0)
statusColor = 'grey'; statusColor = 'grey';
else if (status === 1) else if (status === 1)
statusColor = 'green'; statusColor = 'green';
else if (status === 2) else if (status === 2)
statusColor = 'blue'; statusColor = 'blue';
return statusColor; return statusColor;
} }
@ -99,18 +99,18 @@ export default function Friend({currentUser}: UserProps)
) : ( ) : (
<img className="pic-user" src={DefaultPicture} alt="Default Profile Picture" /> <img className="pic-user" src={DefaultPicture} alt="Default Profile Picture" />
)} )}
<div className="infoSideBar"> <div className="end">
<span onClick={() => handleButtonClick(currentUser)}>{currentUser.nickname}</span> <span onClick={() => handleButtonClick(currentUser)}>{currentUser.nickname}</span>
<RxCircle color={getStatus(currentUser)} /> <div className="end">
<button onClick={() => handleSpectate(currentUser)} >Invite</button> <RxCircle className="friendRequest" color={getStatus(currentUser)} />
{getStatus(currentUser) !== 'blue' ? ( </div>
<></> </div>
) : (
<button onClick={() => handleSpectate(currentUser)} >Spectate</button>
)}
</div>
</UserChat> </UserChat>
) )
} }
// spectate visible
// {getStatus(currentUser) !== 'blue' ? (
// <></>
// ) : (
// <button className="friendRequest" onClick={() => handleSpectate(currentUser)} >Spectate</button>
// )}

7
containers/react/src/styles/App.css
View File

@ -21,13 +21,14 @@ input.qr{
} }
.desactivate { .desactivate {
margin: 40vh; margin: 20%;
color: ghostwhite; color: ghostwhite;
outline: 0; outline: 0;
border-radius: 20px; border-radius: 100px;
padding: 20px; padding: 2%;
background-image: linear-gradient(90deg, #5843e4, #5a0760); background-image: linear-gradient(90deg, #5843e4, #5a0760);
border: 0; border: 0;
font-size: x-large;
} }
.App-logo { .App-logo {
height: 40vmin; height: 40vmin;

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

@ -22,7 +22,7 @@
display: grid; display: grid;
justify-content: center; justify-content: center;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
transition: 350ms; transition: 350ms;
/* margin-top: 10px; */ /* margin-top: 10px; */
@ -127,4 +127,5 @@ span {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} z-index: 1;
}

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

@ -4,7 +4,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
select{ select{
@ -67,7 +67,7 @@ select{
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* position:relative; */ /* position:relative; */
} }
.container{ .container{
@ -173,6 +173,7 @@ input{
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
margin: 10px;
} }
.messageContent{ .messageContent{
@ -373,7 +374,7 @@ input.in_howLong{
.case{ .case{
height: auto; height: auto;
width: auto; width: auto;
margin-left: 10px; margin-left: 10px;
} }
.catchat{ .catchat{