From 92f3f496ded125ab0ad4a419e5f5f800ba488eab Mon Sep 17 00:00:00 2001
From: Lara REALI <ereali@bess-f2r3s17.clusters.42paris.fr>
Date: Sat, 24 Jun 2023 20:02:14 +0200
Subject: [PATCH] Friend request css + change navbar Social+ button border qr
 butonn desactivate qr

---
 .../src/components/Social/FriendRequest.tsx   | 17 +++++++------
 .../react/src/components/Social/Social.tsx    | 25 ++++++-------------
 containers/react/src/pages/QrCode.tsx         |  2 +-
 containers/react/src/styles/App.css           | 19 +++++++++++++-
 4 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/containers/react/src/components/Social/FriendRequest.tsx b/containers/react/src/components/Social/FriendRequest.tsx
index 7e0eb62c..3d7aca26 100644
--- a/containers/react/src/components/Social/FriendRequest.tsx
+++ b/containers/react/src/components/Social/FriendRequest.tsx
@@ -15,7 +15,7 @@ const UserChat = styled.div `
 	gap: 5px;
 	color: white;
 	cursor: pointer;
-
+	margin-top: 10px;
 	&:hover{
 		background-color: #3e3c61;
 	}
@@ -37,7 +37,7 @@ export default function  Friend({currentUser}: UserProps)
 	const [request, setRequest] = useState<User>(); //user who invite
 	const [clickEvent, setClickEvent] = useState(false);
 	// const [user, setUser] = useState(null);
-	
+
 	useEffect(() => {
 		const fetchProfilePicture = async () => {
 			try {
@@ -54,12 +54,12 @@ export default function  Friend({currentUser}: UserProps)
 				console.error('Error fetching profile picture:', error);
 			}
 		  };
-		
+
 		  fetchProfilePicture();
 	}, [clickEvent])
 
 	const handleButtonClick = (user: User) => {
-		let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`; 
+		let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`;
 		// history(path, { replace: true });
 		// window.location.replace(path);
 		window.history.pushState({}, '', path);
@@ -101,13 +101,14 @@ export default function  Friend({currentUser}: UserProps)
 			 <img className="pic-user" src={DefaultPicture} alt="Default Profile Picture" />
 		 )}
 		{request ? (
-		<div className="infoSideBar">
+			<div className="end">
 			<span onClick={() => handleButtonClick(currentUser)}>{currentUser.nickname}</span>
-			 <RxCheckCircled onClick={() => Accept(request)} color={'green'}/>
-			 <RxCircleBackslash onClick={() => Refuse(request)} color={'red'}/>
+			<div className="end">
+			 <RxCheckCircled className="friendRequest" onClick={() => Accept(request)} color={'green'}/>
+			 <RxCircleBackslash className="friendRequest" onClick={() => Refuse(request)} color={'red'}/>
+			 </div>
 		</div>
 			) : ( "" )}
 		</UserChat>
 	)
 }
-	
\ No newline at end of file
diff --git a/containers/react/src/components/Social/Social.tsx b/containers/react/src/components/Social/Social.tsx
index 40d6e4dc..e8d7cd17 100644
--- a/containers/react/src/components/Social/Social.tsx
+++ b/containers/react/src/components/Social/Social.tsx
@@ -7,6 +7,7 @@ import styled from "styled-components";
 import Friend  from './Friend.tsx';
 import FriendRequest  from './FriendRequest.tsx';
 
+import {IoMdPeople} from 'react-icons/io'
 import { ImBlocked } from 'react-icons/im';
 import { MdOutlineGroupAdd } from 'react-icons/md';
 import {User} from "../../../interfaces.tsx"
@@ -25,7 +26,7 @@ const TouchDiv = styled.div`
 	margin-top: 21px;
 	cursor: pointer;
 	justify-content: space-around;
-	
+
 	&:hover {
 		color: #F4F3EF;
 	}
@@ -42,7 +43,7 @@ function Social (){
 	useEffect(()=> {
 		const getFriend = async ()=>{
 			try{
-				const tmpFriends = await api.get("/friends")	
+				const tmpFriends = await api.get("/friends")
 				const tmpUser = await api.get("/profile")
 				const tmpInv = await api.get("/inviteRequest")
 				const pic = await api.post("/getPicture", {username: tmpUser.data.username})
@@ -88,26 +89,15 @@ function Social (){
         <div>
 			<div className='navbar'>
 				{/* <img src={DefaultPic} alt="profile" className="pic"/> */}
-				{profilePicture ? (
-					<img className="pic" src={`data:image/jpeg;base64,${profilePicture}`} />
- 				) : (
- 					<img className="pic" src={DefaultPicture} alt="Default Profile Picture" />
- 				)}
+				<IoMdPeople className="catchat"/>
 				<span>
 					{isLoading || !user ? (
         				<h4>Loading...</h4>
       				) : (
-        				<h4>{user.nickname}</h4>
+        				<h2>Social</h2>
       				)}
 	  			</span>
-				<div className="end">
-					<TouchDiv>
-						<MdOutlineGroupAdd/>
-					</TouchDiv>
-					<TouchDiv>
-						<ImBlocked/>
-					</TouchDiv>
-				</div>
+
 			</div>
 
 {/* map with fiend request */}
@@ -119,8 +109,9 @@ function Social (){
 			{friends.map(c=> (
 				<Friend currentUser={c}/>
 			))}
+
 		</div>
     )
 }
 
-export default Social
\ No newline at end of file
+export default Social
diff --git a/containers/react/src/pages/QrCode.tsx b/containers/react/src/pages/QrCode.tsx
index 4da2138a..c7db0410 100644
--- a/containers/react/src/pages/QrCode.tsx
+++ b/containers/react/src/pages/QrCode.tsx
@@ -156,7 +156,7 @@ function QrCode () {
           />
         </>
       ) : (
-        <button onClick={handleDesactivate}>Desactivate 2FA</button>
+        <button className="desactivate" onClick={handleDesactivate}>Desactivate 2FA</button>
       )}
     </>
 
diff --git a/containers/react/src/styles/App.css b/containers/react/src/styles/App.css
index f724c01b..2efb207d 100644
--- a/containers/react/src/styles/App.css
+++ b/containers/react/src/styles/App.css
@@ -15,9 +15,20 @@ input.qr{
   border-radius: 5px;
   background-color: rgb(0, 0, 0);
   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 {
   height: 40vmin;
   pointer-events: none;
@@ -52,3 +63,9 @@ input.qr{
     transform: rotate(360deg);
   }
 }
+
+.friendRequest {
+	margin-left: 4vh;
+	stroke-width: 0.5;
+	font-size: x-large;
+}