From 72a4f42cdb286454e21231660edd6cbc96508d76 Mon Sep 17 00:00:00 2001
From: Elisee ADJIGUIDI <sadjigui@bess-f2r2s18.clusters.42paris.fr>
Date: Fri, 23 Jun 2023 19:59:07 +0200
Subject: [PATCH] change design

---
 .../react/src/components/Alert/RedAlert.tsx   |  4 +--
 .../react/src/components/Game/PlayButton.tsx  |  6 ++--
 .../react/src/components/Messages/Message.tsx | 10 +++---
 .../react/src/components/Messages/Modal.tsx   | 34 +++++++++++--------
 containers/react/src/styles/Messages.css      | 34 +++++++++++++++----
 containers/react/src/styles/Profile.css       |  5 +--
 containers/react/src/styles/field.css         | 10 ++----
 7 files changed, 64 insertions(+), 39 deletions(-)

diff --git a/containers/react/src/components/Alert/RedAlert.tsx b/containers/react/src/components/Alert/RedAlert.tsx
index 9ec3c4bc..98062543 100644
--- a/containers/react/src/components/Alert/RedAlert.tsx
+++ b/containers/react/src/components/Alert/RedAlert.tsx
@@ -32,11 +32,11 @@ function RedAlert ({handleClose, text}: AlertProps) {
                 initial="hidden"
                 animate="visible"
                 exit="exit"
-            >
+                >
             <BiErrorCircle/>
             <p>{text}</p>
             </motion.div>
-            {setTimeout(handleClose, 1500)}
+                {setTimeout(handleClose, 1500)}
         </Backdrop>
     )
 }
diff --git a/containers/react/src/components/Game/PlayButton.tsx b/containers/react/src/components/Game/PlayButton.tsx
index 7e018a04..c42523c2 100644
--- a/containers/react/src/components/Game/PlayButton.tsx
+++ b/containers/react/src/components/Game/PlayButton.tsx
@@ -40,9 +40,9 @@ function PlayButton() {
 			<button onClick={handleButtonClick} className="playButton">Play</button>
 			{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
 			<div className='checkbox'>
-				<p><input type="checkbox" value="superpower"/> Super Power </p>
-				<p><input type="checkbox" value="obstacle"/> Obstacle </p>
-				<p><input type="checkbox" value="speed"/> Faster and Faster </p>
+				<p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power </p>
+				<p><input className="inside_checkbox" type="checkbox" value="obstacle"/> Obstacle </p>
+				<p><input className="inside_checkbox" type="checkbox" value="speed"/> Faster and Faster </p>
 			</div>
 		</div>
 		);
diff --git a/containers/react/src/components/Messages/Message.tsx b/containers/react/src/components/Messages/Message.tsx
index d04e250b..e1c368e7 100644
--- a/containers/react/src/components/Messages/Message.tsx
+++ b/containers/react/src/components/Messages/Message.tsx
@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   Message.tsx                                        :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
+/*   By: sadjigui <sadjigui@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/01 18:24:46 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/20 12:47:33 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/23 19:33:40 by sadjigui         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -42,11 +42,13 @@ function MessageMe({message, own}: MessageMeProps){
 	const [user, setUser] = useState<User>();
 	const scrollRef = useRef<HTMLDivElement>(null);
 
+
 	useEffect(() => {
 		if (scrollRef.current)
 		{
-			scrollRef.current.scrollIntoView({ behavior: "smooth",})
-		}
+			scrollRef.current.scrollIntoView({ behavior: "smooth"});
+		}})
+	useEffect(() => {
 		const fetchProfilePicture = async () => {
 			try {
 			//   const user = await api.get("/profile");
diff --git a/containers/react/src/components/Messages/Modal.tsx b/containers/react/src/components/Messages/Modal.tsx
index 16a50bce..8bb6fc01 100644
--- a/containers/react/src/components/Messages/Modal.tsx
+++ b/containers/react/src/components/Messages/Modal.tsx
@@ -103,25 +103,26 @@ const Modal = ({handleClose}) => {
         <Backdrop>
             <motion.div
                 onClick={(e) => e.stopPropagation()}
-                className="modal"
+                className="modalSetting"
                 variant={dropIn}
                 initial="hidden"
                 animate="visible"
                 exit="exit"
             >
                 {/* <p>New Conversation</p> */}
+				<div className="settingFirstPart2">
 
 				{selectTags.map((selectTag) => (
-				  <div key={selectTag.id}>
+					<div key={selectTag.id}>
 				    <select
 				      value={selectTag.selectedOption}
 				      onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
-				    >
+					  >
 				      <option value="">{
-				        selectTag.selectedOption ? selectTag.selectedOption : "Select an option"
-				      }</option>
+						  selectTag.selectedOption ? selectTag.selectedOption : "Select an option"
+						}</option>
 				      {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.name)).map((item, index) => (
-				        <option key={index} value={item.username}>
+						  <option key={index} value={item.username}>
 				          {item.username}
 				        </option>
 				      ))}
@@ -136,28 +137,30 @@ const Modal = ({handleClose}) => {
 						
 					<Link to="#" className="submit" onClick={handleClose}>Cancel</Link>
 				</div>
+				</div>
 
 
+				<div className="settingSecondPart">
 
 				{convs.length > 0 && (
-        			<select
-        			  value={channel}
-        			  onChange={(event) => setChannel(event.target.value)}
-
+					<select
+					value={channel}
+					onChange={(event) => setChannel(event.target.value)}
+					
         			>
         			  <option value="">Select an option</option>
         			  {convs.map((conv) => (
-        			    !(!conv.group || conv.private || (conv.banned && conv.banned.includes(user.username)) || (conv.members && conv.members.includes(user.username))) && (
-        			      <option key={conv.id} value={conv.id}>
+						  !(!conv.group || conv.private || (conv.banned && conv.banned.includes(user.username)) || (conv.members && conv.members.includes(user.username))) && (
+							  <option key={conv.id} value={conv.id}>
         			        {conv.name}
         			      </option>
         			    )
-        			  ))}
+						))}
         			</select>
       			)}
 				  {channel.private ? (
-					<input className="mdp" placeholder="password" type="text" />
-				  ):("")}
+					  <input className="mdp" placeholder="password" type="text" />
+					  ):("")}
 
 
 				<div className="div_submit">
@@ -166,6 +169,7 @@ const Modal = ({handleClose}) => {
 
 
 
+				</div>
             </motion.div>
         </Backdrop>
     )
diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css
index 81d05423..dead8106 100644
--- a/containers/react/src/styles/Messages.css
+++ b/containers/react/src/styles/Messages.css
@@ -1,6 +1,6 @@
 .home{
 	background-color: rgb(0, 0, 0);
-	height: 90vh;
+	height: 70vh;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -202,6 +202,7 @@ p {
 	text-decoration: none;
 	font-weight:lighter;
 	margin: 1%;
+	height: 25px;
 }
 
 .darkSubmit{
@@ -307,11 +308,17 @@ p {
 	/* flex-direction: column; */
 	/* align-items: center; */
 	background-color: #3e3c61;
+	overflow: scroll;
 }
 
 .settingFirstPart{
 	margin-top: 10%;
-	margin-left: 15%;
+	margin-left: 20%;
+}
+
+.settingFirstPart2{
+	margin-top: 10%;
+	margin-left: 30%;
 }
 
 .settingSecondPart{
@@ -324,6 +331,7 @@ p {
 .checkbox{
 	display:flex;
 	flex-direction:row;
+	margin-left: 60px;
 }
 
 input.in{
@@ -331,17 +339,25 @@ input.in{
 	margin-left: 0px;
 	background-color: black;
 	color: white;
-	border-radius: 12px;
+	border-radius: 4px;
 	width: 70%;
+	height: 100%;
+	font-weight:100;
+	font-size: 20px;
+	padding: 7px;
 }
 
 input.in_howLong{
-	margin-top: 14.5%;
+	margin-top: 13%;
 	margin-left: 0px;
 	background-color: black;
 	color: white;
-	border-radius: 12px;
-	width: 15%;
+	border-radius: 4px;
+	width: 10%;
+	height: 10%;
+	font-weight:100;
+	font-size: 20px;
+	padding: 7px;
 }
 
 .mdp{
@@ -351,3 +367,9 @@ input.in_howLong{
 	width: 20%;
 }
 
+.case{
+	height: auto;
+	width: auto;
+	margin-left: 10px; 
+}
+
diff --git a/containers/react/src/styles/Profile.css b/containers/react/src/styles/Profile.css
index 9749e86e..e1b76a49 100644
--- a/containers/react/src/styles/Profile.css
+++ b/containers/react/src/styles/Profile.css
@@ -62,6 +62,7 @@
 .page {
 	text-align: center;
 	overflow-y: scroll;
+	/* height: 80vh; */
 	/* height: 50vh; */
 	/* width: 50vh; */
 	/* background-color: black; */
@@ -96,11 +97,11 @@
 }
 
 .history{
-	display: inline-block;
+	display:inline-block;
 	color: white;
 	background-color:  #5843e4;
 	border-radius: 20px;
-	padding: 14px;
+	padding: 20px 500px;
 	font-size: 1.7rem;
 	text-decoration: none;
 	font-weight: bold;
diff --git a/containers/react/src/styles/field.css b/containers/react/src/styles/field.css
index 07beeba9..bb3ad554 100644
--- a/containers/react/src/styles/field.css
+++ b/containers/react/src/styles/field.css
@@ -1,18 +1,14 @@
 .playButton {
 	background-image: linear-gradient(90deg, #5843e4, #5a0760);
-	display: flex;
-	flex-wrap: wrap;
-	overflow: hidden;
 	border-radius: 5vh;
 	color: white;
-	/* display: block; */
+	display: block;
 	margin: auto;
 	margin-top: 30vh;
-	padding: 2vh 4vw;
+	padding: 2vh 5vw;
 	height: 10vh;
 	width: 20vw;
-	font-size: 250%;
-	text-align: center;
+	font-size: 300%;
   }