success on profile add input for time mute modif change picture button

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

@@ -41,6 +41,10 @@ const ModalSetting = ({handleClose, convId}: ModalSettingProps) => {
 	const [privateConv, setPrivateConv] = useState(false);
 	const dark = () => setPrivateConv(true);
 	const light = () => setPrivateConv(false);
+	const [mute, setMute] = useState(false);
+	const darkMute = () => setMute(false);
+	const lightMute = () => setMute(true);
+
 
 	useEffect(()=> {
 
@@ -186,11 +190,11 @@ const ModalSetting = ({handleClose, convId}: ModalSettingProps) => {
                         <p className="checkbox">Password<input type="checkbox" value="password" checked={password} onChange={handleCheckPass}/> </p>
                         
 						
-						{password ? (
+						{password || privateConv ? (
 							<input 
 								onChange={(e) => setNewPassword(e.target.value)}
 								onKeyDown={handlePassword} 
-								type="text"
+								type="password"
 								className="in"
 								placeholder="Password"/>
 							):
@@ -236,11 +240,14 @@ const ModalSetting = ({handleClose, convId}: ModalSettingProps) => {
                 <div>
 					<Link to="#" onClick={handleInvite} className="submit">Send</Link>
                     <Link to="#" onClick={handleBan} className="submit">Ban</Link>
-                    <Link to="#" onClick={handleMute} className="submit">Mute</Link>
+                    <Link to="#" onClick={mute ? darkMute : lightMute} className={mute ? "darkSubmit": "submit"}>Mute</Link>
                     <Link to="#" onClick={handleAdmin} className="submit">Admin</Link>
                 </div>
 
                 </div>
+					{mute ? (
+						<input type="text" className="in_howLong" placeholder="How long ?" />
+					):("")}
 
             </motion.div>
         </Backdrop>

containers/react/src/pages/Home.tsx

@@ -21,6 +21,9 @@ import { motion, AnimatePresence } from 'framer-motion'
 import { Link } from "react-router-dom";
 import ModalEdit from "../components/Profile/EditName.tsx";
 import {AiOutlineHistory} from 'react-icons/ai'
+import { MdQrCodeScanner, MdOutlinePhotoLibrary } from 'react-icons/md';
+import { GiWingedSword, GiCrownedSkull } from 'react-icons/gi';
+
 // import { Link } from "react-router-dom";
 // import {UserProfile} from "../DataBase/DataUserProfile";
 // import axios from "axios";
@@ -186,14 +189,18 @@ function Profile () {
 					<Link to="#" className="edit_name">
 						{modalOpen === true ?  <IoCloseCircleOutline/> : <CgEditMarkup/>}
 					</Link>
+					{modalOpen === true ? ("") : (
+						<>
+							<label htmlFor="file-input" className="edit_name"><MdOutlinePhotoLibrary/></label>
+							<input type="file" id="file-input" className="file-input" accept="image/*" onChange={handleFileChange} />
+						</>
+					)}
 				</motion.div>
 			
-				<div className="file-upload-container">
+				{/* <div className="file-upload-container"> */}
-  					<label htmlFor="file-input" className="file-label">Choose File</label>
-  					<input type="file" id="file-input" className="file-input" accept="image/*" onChange={handleFileChange} />
   					{/* <button onClick={handleUpload} className="upload-button">Upload</button> */}
 					  {/* <button onClick={handleUpload} className="upload-button">Upload</button> */}
-				</div>
+				{/* </div> */}
 			</div>
 				  ) : (
 						  <></>
@@ -212,13 +219,40 @@ function Profile () {
 
 function Home () {
 	const [move, setmove ] = useState(false);
+	const [user, setUser] = useState([]);
+	useEffect(() => {
+		const fetchSuccess = async () => {
+			try {
+				const tmpUser = await api.get("/profile");
+				setUser(tmpUser.data);
+			}
+			catch (error)
+			{
+				console.log(error);
+			}
+		};
+		fetchSuccess();
+	})
+
     return (
 		<motion.div className="page"
 		initial={{opacity: -1}}
 		animate={{opacity: 1}}
 		exit={{opacity: -1}}>
+			<div>
+				{/* {user.otp_verified ? ( */}
+					<MdQrCodeScanner className='success' />
+				{/* ):("")} */}
+				{/* {user.win >= 2 ? ( */}
+					<GiWingedSword className="success" />
+				{/* ):("")} */}
+
+				{/* {user.win >= 5 ? ( */}
+					<GiCrownedSkull className="success" />
+				{/* ):("")} */}
+			</div>
 		<div className="home">
-			<motion.div animate={{x: move ? -200: 170}}
+			<motion.div animate={{x: move ? -200: 120}}
 				transition={{type: "tween", duration: 0.5}}>
 					<Profile/>
 			</motion.div>

containers/react/src/styles/App.css

@@ -9,7 +9,7 @@
 input.qr{
   width: 20%;
   border-radius: 5px;
-  background-color: rgb(66, 66, 66);
+  background-color: rgb(0, 0, 0);
   margin : 1%;
   color:white;
 }

containers/react/src/styles/Header.css

@@ -90,11 +90,12 @@ span {
 }
 
 .success {
-	height: 25px;
+	height: 2%;
-	width: 25px;
+	width: 2%;
 	/* border: solid; */
-	margin-top: 2.5vh;
+	margin-top: 1%;
-	margin-left: 1vh;
+	margin: 3vh;
+	/* margin-bottom: -12vh; */
 	/* border-color: black; */
 	/* border-radius: 50%; */
 }

containers/react/src/styles/Messages.css

@@ -310,7 +310,7 @@ p {
 
 .settingSecondPart{
 	margin-top: 10%;
-	margin-left: 10%;
+	margin-left: 5%;
 
 	/* margin-left: 20%; */
 }
@@ -329,6 +329,15 @@ input.in{
 	width: 70%;
 }
 
+input.in_howLong{
+	margin-top: 14.5%;
+	margin-left: 0px;
+	background-color: black;
+	color: white;
+	border-radius: 12px;
+	width: 15%;
+}
+
 .mdp{
 	background-color : black;
 	border-radius: 8px;

containers/react/src/styles/Profile.css

@@ -61,12 +61,15 @@
 
 .page {
 	text-align: center;
+	overflow-y: scroll;
 	/* height: 50vh; */
 	/* width: 50vh; */
 	/* background-color: black; */
 }
 
 .profile {
+	align-items: center;
+	text-align: center;
 	flex-direction: row;
 	color: white;
 }
@@ -79,7 +82,7 @@
 	border-color: red;
 	/* border-image: linear-gradient(90deg, #5843e4, #5a0760); */
 
-	margin-top: 20px;
+	/* margin-top: 20px; */
 }
 
 .home{
@@ -106,7 +109,7 @@
 .div_history {
 	flex-direction: row;
 	align-items: center;
-	margin-top: -80px;
+	/* margin-top: -80px; */
 }
 
 .edit_name {

containers/react/src/styles/Win_Loss.css

@@ -2,7 +2,7 @@
 	/* display: flex; */
 	/* flex-direction: column; */
 	/* background-color: red; */
-	height: 70vh;
+	height: 60vh;
 	/* padding: 15px; */
 	/* overflow: scroll; */