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

Merge branch 'ereali' into reborn

Browse Source
This commit is contained in:
Lara REALI 2023-06-25 00:39:05 +02:00
commit 007dbe1832
4 changed files with 36 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
containers/react/src/components/Social/FriendRequest.tsx
View File

@ -15,7 +15,7 @@ const UserChat = styled.div `
gap: 5px; gap: 5px;
color: white; color: white;
cursor: pointer; cursor: pointer;
margin-top: 10px;
&:hover{ &:hover{
background-color: #3e3c61; background-color: #3e3c61;
} }
@ -101,13 +101,14 @@ 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" />
)} )}
{request ? ( {request ? (
<div className="infoSideBar"> <div className="end">
<span onClick={() => handleButtonClick(currentUser)}>{currentUser.nickname}</span> <span onClick={() => handleButtonClick(currentUser)}>{currentUser.nickname}</span>
<RxCheckCircled onClick={() => Accept(request)} color={'green'}/> <div className="end">
<RxCircleBackslash onClick={() => Refuse(request)} color={'red'}/> <RxCheckCircled className="friendRequest" onClick={() => Accept(request)} color={'green'}/>
<RxCircleBackslash className="friendRequest" onClick={() => Refuse(request)} color={'red'}/>
</div>
</div> </div>
) : ( "" )} ) : ( "" )}
</UserChat> </UserChat>
) )
} }

19
containers/react/src/components/Social/Social.tsx
View File

@ -7,6 +7,7 @@ import styled from "styled-components";
import Friend from './Friend.tsx'; import Friend from './Friend.tsx';
import FriendRequest from './FriendRequest.tsx'; import FriendRequest from './FriendRequest.tsx';
import {IoMdPeople} from 'react-icons/io'
import { ImBlocked } from 'react-icons/im'; import { ImBlocked } from 'react-icons/im';
import { MdOutlineGroupAdd } from 'react-icons/md'; import { MdOutlineGroupAdd } from 'react-icons/md';
import {User} from "../../../interfaces.tsx" import {User} from "../../../interfaces.tsx"
@ -88,26 +89,15 @@ function Social (){
<div> <div>
<div className='navbar'> <div className='navbar'>
{/* <img src={DefaultPic} alt="profile" className="pic"/> */} {/* <img src={DefaultPic} alt="profile" className="pic"/> */}
{profilePicture ? ( <IoMdPeople className="catchat"/>
<img className="pic" src={`data:image/jpeg;base64,${profilePicture}`} />
) : (
<img className="pic" src={DefaultPicture} alt="Default Profile Picture" />
)}
<span> <span>
{isLoading || !user ? ( {isLoading || !user ? (
<h4>Loading...</h4> <h4>Loading...</h4>
) : ( ) : (
<h4>{user.nickname}</h4> <h2>Social</h2>
)} )}
</span> </span>
<div className="end">
<TouchDiv>
<MdOutlineGroupAdd/>
</TouchDiv>
<TouchDiv>
<ImBlocked/>
</TouchDiv>
</div>
</div> </div>
{/* map with fiend request */} {/* map with fiend request */}
@ -119,6 +109,7 @@ function Social (){
{friends.map(c=> ( {friends.map(c=> (
<Friend currentUser={c}/> <Friend currentUser={c}/>
))} ))}
</div> </div>
) )
} }

2
containers/react/src/pages/QrCode.tsx
View File

@ -156,7 +156,7 @@ function QrCode () {
/> />
</> </>
) : ( ) : (
<button onClick={handleDesactivate}>Desactivate 2FA</button> <button className="desactivate" onClick={handleDesactivate}>Desactivate 2FA</button>
)} )}
</> </>

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

@ -15,9 +15,20 @@ input.qr{
border-radius: 5px; border-radius: 5px;
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
margin : 1%; margin : 1%;
color:white; color:rgb(42, 41, 41);
border-style: solid;
border-width: 1px;
} }
.desactivate {
margin: 40vh;
color: ghostwhite;
outline: 0;
border-radius: 20px;
padding: 20px;
background-image: linear-gradient(90deg, #5843e4, #5a0760);
border: 0;
}
.App-logo { .App-logo {
height: 40vmin; height: 40vmin;
pointer-events: none; pointer-events: none;
@ -52,3 +63,9 @@ input.qr{
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.friendRequest {
margin-left: 4vh;
stroke-width: 0.5;
font-size: x-large;
}