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

containers/react/src/components/Messages/Message.tsx

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

containers/react/src/components/Social/Friend.tsx

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

containers/react/src/styles/App.css

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

containers/react/src/styles/Header.css

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

containers/react/src/styles/Messages.css

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