dimension, ajout params conv, retrait bar scroll

containers/react/src/components/Messages/Chats.jsx

@@ -15,11 +15,13 @@ import { TbSend } from 'react-icons/tb';
 import { ImBlocked } from 'react-icons/im';
 import { MdOutlineGroupAdd } from 'react-icons/md';
 import { GrAdd } from 'react-icons/gr';
+import { RiListSettingsLine } from 'react-icons/ri'
 
 import { Rank } from "../../DataBase/DataRank";
 import GreenAlert from "../Alert/GreenAlert";
 import RedAlert from "../Alert/RedAlert";
 import YellowAlert from "../Alert/YellowAlert";
+import ModalSetting from "./ModalSetting";
 
 
 const TouchDiv = styled.div`
@@ -228,10 +230,12 @@ function Chats(){
 	const [modalOpen, setModalOpen] = useState(false);
 	const [addFriend, setAddFriend] = useState(false);
 	const [block, setBlock] = useState(false);
+	const [setting, setSetting] = useState(false);
 	const close = () => setModalOpen(false);
 	const open = () => setModalOpen(true);
 	const closeAddFriend = () => setAddFriend(false);
 	const closeBlock = () => setBlock(false);
+	const closeSetting = () => setSetting(false);
 
 
 	const handleFriend = e => {
@@ -319,6 +323,22 @@ function Chats(){
 						</AnimatePresence>
 						</motion.div>
 					</TouchDiv>
+					{currentChat ? (
+
+						<TouchDiv>
+						<motion.div 
+						onClick={() => (setting ? setSetting(false) : setSetting(true))}
+						>
+						<RiListSettingsLine/>
+						<AnimatePresence
+							initial={false}
+							onExitComplete={() => null}
+							>
+							{setting && <ModalSetting handleClose={closeSetting}/>}
+						</AnimatePresence>
+						</motion.div>
+					</TouchDiv>
+					):("")}
 				</div>
 			</div>
 			<div className="messages_box">

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

@@ -0,0 +1,158 @@
+import { motion } from "framer-motion";
+import Backdrop from "../Sidebar/Backdrop";
+import { Rank } from "../../DataBase/DataRank"
+import '../../styles/Messages.css'
+import { useState } from "react";
+import { GrAdd } from "react-icons/gr";
+import { Link } from "react-router-dom";
+
+const dropIn = {
+    hidden:{y:"-100vh",
+            opacity: 0,},
+    visible:{y: "0",
+            opacity: 0,
+            transotion:{
+                duration:0.1,
+                type:"spring",
+                damping: 100,
+                stiffness: 500,
+            }},
+    exit:{y: "100vh",
+            opacity: 0,},
+
+};
+
+const ModalSetting = ({handleClose, text}) => {
+    const [password, setPassword] = useState(false);
+
+    const handleCheckpass = (e) => {
+        setPassword(e.target.checked);
+    }
+    const [multi, setMulti] = useState(false);
+    const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
+    const [selectedOptionArray, setSelectedOptionArray] = useState([]);
+
+    const handleOptionChange = (selectId, selectedOption) => {
+        setSelectTag((prevTags) => 
+            prevTags.map((tag) =>
+                tag.id === selectId ? { ...tag, selectedOption } : tag
+            )
+        );
+    };
+
+    const addNewSelectedTag = () => {
+        const newSelectedId = Math.max (...selectTags.map((tag) => tag.id)) + 1;
+        setSelectTag([...selectTags, { id: newSelectedId, selectedOption: ''}]);
+    };
+
+    const saveSelectedOptions = () => {
+        const selectedOptions = selectTags.map((tag) => tag.selectedOption);
+        setSelectedOptionArray(selectedOptions);
+    }
+    let new_name;
+    return (
+        <Backdrop>
+            <motion.div
+                onClick={(e) => e.stopPropagation()}
+                className="modalSetting"
+                variant={dropIn}
+                initial="hidden"
+                animate="visible"
+                exit="exit"
+            >
+                {/* <p>New Convewrstion</p> */}
+
+{/* First selection  */}
+                <div className="settingFirstPart">
+                    <div>
+                        <p className="checkbox">Private  <input class="check"type="checkbox" value="private"/></p>
+                        <p className="checkbox">PassW <input type="checkbox" value="password" checked={password} onChange={handleCheckpass}/> </p>
+                        {password ? (<input type="text" className="in" placeholder="password"/>):("")}
+                    </div>
+                    <div className="forName">
+                        <input type="text" className="in" placeholder="group name"/>
+                    </div>
+                </div>
+
+                {/* <select
+                onChange={(e) => {
+                    const selection = e.target.value;
+                    selection === "group" ? setMulti(true) : setMulti(false)
+                }}>
+                    <option value="1v1">1v1</option>
+                    <option value="group">Group</option>
+                </select> */}
+
+{/* Second selection  */}
+                
+                <div className="settingSecondPart">
+                    <Link to="#" className="submit" onClick={handleClose}>Send</Link>
+
+                    {selectTags.map((selectTag) =>(
+                    <div key={selectTag.id}>
+
+                    <select 
+                        value={selectTag.selectedOption}
+                        onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}>
+                    {Rank.map((item, index) => {
+                        return (
+                            <>
+                            <option >Select a name</option>
+                            <option value={new_name}>{item.name}</option>
+                            
+                            </>
+                        )
+                    })}
+                    </select>           
+                    </div>
+                ))
+                }
+                <div>
+                    <Link to="#" className="submit">Ban</Link>
+                    <Link to="#" className="submit">Mute</Link>
+                    <Link to="#" className="submit">Admin</Link>
+                </div>
+
+                </div>
+                {/* {selectTags.map((selectTag) =>(
+                    <div key={selectTag.id}>
+
+                    <select 
+                        value={selectTag.selectedOption}
+                        onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}>
+                    {Rank.map((item, index) => {
+                        return (
+                            <>
+                            <option value={new_name}>{item.name}</option>
+                            
+                            </>
+                        )
+                    })}
+                    </select>           
+                    </div>
+                ))
+                }
+                <div>
+                    <h3>Selected Option:</h3>
+                    <ul>
+                        {selectedOptionArray.map((option, index) => (
+                            <li key={index}>{option}</li>
+                        ))}
+                    </ul>
+                </div>
+                <div>
+                    {multi === true ? (
+                    <GrAdd onClick={addNewSelectedTag}/>) : " "}
+                </div>
+                <div className="div_submit">
+                    <Link to='#' className="submit" onClick={ saveSelectedOptions}>Submit</Link>
+                    
+                    <Link to="#" className="submit" onClick={handleClose}>Cancel</Link>
+                </div> */}
+
+            </motion.div>
+        </Backdrop>
+    )
+}
+
+export default ModalSetting

containers/react/src/styles/Messages.css

@@ -1,5 +1,5 @@
 .home{
-	background-color: black;
+	background-color: rgb(0, 0, 0);
 	height: 90vh;
 	display: flex;
 	align-items: center;
@@ -38,6 +38,10 @@ select{
 	overflow: scroll;
 }
 
+::-webkit-scrollbar{
+	display:none;
+}
+
 .newMessage{
 	color: white;
 	font-size: 18px;
@@ -46,14 +50,14 @@ select{
 .contact{
 	background-color: rgb(46, 46, 46);
 	align-items: left;
-	height: 29.7rem;
+	height: 30.2rem;
 	overflow: scroll;
 	/* width: 2rem; */
 	/* height: 4rem; */
 }
 
 .messages_box{
-	background-color: black;
+	background-color: rgb(0, 0, 0);
 	/* height: 90vh; */
 	display: flex;
 	align-items: center;
@@ -73,7 +77,7 @@ select{
 .sidebar{
 	flex:1;
 	border-right: 1px solid #3e3c61;
-	background-color: #060b26;
+	background-color: #a2a3ac;
 	color: white;
 }
 
@@ -95,6 +99,7 @@ select{
 	color: white;
 	padding: 3px;
 	border-radius: 10px 10px 0px 0px;
+	margin-top: 0px;
 }
 
 .pic{
@@ -122,9 +127,9 @@ select{
 }
 
 .messages{
-	background-color: black;
+	background-color: rgb(26, 26, 26);
 	/* height: calc(100% - 118px); */
-	width: 40rem;
+	width: 70%;
 	overflow: scroll;
 }
 
@@ -185,6 +190,7 @@ input{
 	font-size: 1.2rem;
 	text-decoration: none;
 	font-weight:lighter;
+	margin: 1%;
 }
 
 .div_submit {
@@ -261,3 +267,41 @@ input{
 	color: rgba(255, 255, 255, 1);
 }
 
+.modalSetting{
+	width: clamp(50%, 700px, 90%);
+	height: min(50%, 300px);
+
+	margin: auto;
+	padding: 2rem;
+	border-radius: 12px;
+	display: flex;
+	/* flex-direction: column; */
+	/* align-items: center; */
+	background-color: #3e3c61;
+}
+
+.settingFirstPart{
+	margin-top: 10%;
+	margin-left: 15%;
+}
+
+.settingSecondPart{
+	margin-top: 10%;
+	margin-left: 10%;
+
+	/* margin-left: 20%; */
+}
+
+.checkbox{
+	display:flex;
+	flex-direction:row;
+}
+
+input.in{
+	margin-top: 5%;
+	margin-left: 0px;
+	background-color: black;
+	color: white;
+	border-radius: 12px;
+	width: 70%;
+}

containers/react/src/styles/Win_Loss.css

@@ -15,6 +15,10 @@
 	overflow: scroll;
 }
 
+.scroll::-webkit-scrollbar{
+	display:none;
+}
+
 .elements {
 	/* display: flex; */
 	border-width:1px;