merge all all

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

@@ -6,15 +6,14 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/01 18:24:46 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/20 19:05:10 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/23 20:25:32 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
-import React, { HtmlHTMLAttributes } from "react";
 import { useEffect, useState, useRef } from "react";
-import api from '../../script/axiosApi';
+import api from '../../script/axiosApi.tsx';
 import styled from "styled-components"
-// import DefaultPicture from '../../assets/profile.jpg'
+import DefaultPicture from '../../assets/profile.jpg'
 // import { useRef } from "react";
 // import { useEffect } from "react";
 import '../../styles/Messages.css'
@@ -28,7 +27,6 @@ const MeStyleP = styled.p`
 	color: white;
 	margin-right: 20px;
 `
-<<<<<<< HEAD
 
 interface MessageMeProps {
 	message: Message;
@@ -44,20 +42,13 @@ function MessageMe({message, own}: MessageMeProps){
 	const [user, setUser] = useState<User>();
 	const scrollRef = useRef<HTMLDivElement>(null);
 
-	// console.log("Message eher")
 
-=======
-function MessageMe({message, own}){
-	
-	const [profilePicture, setProfilePicture] = useState('');
-	const scrollRef = useRef<HTMLDivElement>(null);
-	const DefaultPicture: string = '../../assets/profile.jpg'
->>>>>>> sadjigui
 	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");
@@ -91,20 +82,13 @@ function MessageMe({message, own}){
 	};
 
 	if (!user || !sender || !conv)
-	{
-		// console.log("return")
 		return (<></>);
-	}
 	// console.log("result includes=", conv.banned.includes(user.username))
 	// console.log("result includes=", conv.blocked.includes(user.username))
 	if (user.blocked && user.blocked.includes(message.sender))
 		return (<></>);
-	// else if (conv.banned && conv.banned.includes(user.username))
+	else if (conv.banned && conv.banned.includes(user.username))
-	// {
+		return (<></>);
-		// console.log("return2")	
-		// return (<></>);
-	// }
-		// console.log("noy return")
 	// if (user.blocked.includes(message.sender))/
 
 	return (

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

@@ -1,11 +1,11 @@
 import { motion } from "framer-motion";
-import Backdrop from "../Sidebar/Backdrop";
+import Backdrop from "../Sidebar/Backdrop.tsx";
 // import { Rank } from "../../DataBase/DataRank"
 import '../../styles/Messages.css'
 import { useState, useEffect } from "react";
 import { GrAdd } from "react-icons/gr";
 import { Link } from "react-router-dom";
-import api from "../../script/axiosApi";
+import api from "../../script/axiosApi.tsx";
 import React from "react";
 
 const dropIn = {
@@ -21,7 +21,6 @@ const dropIn = {
             }},
     exit:{y: "100vh",
             opacity: 0,},
-
 };
 
 const Modal = ({handleClose}) => {
@@ -100,19 +99,18 @@ const Modal = ({handleClose}) => {
     // let new_name;
 
     return (
-<<<<<<< HEAD
+        <Backdrop>
-        <Backdrop onClick={handleClose}>
-=======
-        <Backdrop >
->>>>>>> sadjigui
             <motion.div
                 onClick={(e) => e.stopPropagation()}
-                className="modal"
+                className="modalSetting"
-                // variant={dropIn}
+                variant={dropIn}
                 initial="hidden"
                 animate="visible"
                 exit="exit"
             >
+                {/* <p>New Conversation</p> */}
+				<div className="settingFirstPart2">
+
 				{selectTags.map((selectTag) => (
 					<div key={selectTag.id}>
 				    <select
@@ -138,8 +136,10 @@ const Modal = ({handleClose}) => {
 						
 					<Link to="#" className="submit" onClick={handleClose}>Cancel</Link>
 				</div>
+				</div>
 
 
+				<div className="settingSecondPart">
 
 				{convs.length > 0 && (
 					<select
@@ -168,6 +168,7 @@ const Modal = ({handleClose}) => {
 
 
 
+				</div>
             </motion.div>
         </Backdrop>
     )

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;
+	border-radius: 4px;
-	width: 15%;
+	width: 10%;
+	height: 10%;
+	font-weight:100;
+	font-size: 20px;
+	padding: 7px;
 }
 
 .mdp{
@@ -351,3 +367,8 @@ input.in_howLong{
 	width: 20%;
 }
 
+.case{
+	height: auto;
+	width: auto;
+	margin-left: 10px; 
+}

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; */
@@ -80,7 +81,6 @@
 	border-radius: 50%;
 	border: thick;
 	border-color: red;
-	margin-left: 10px;
 	/* border-image: linear-gradient(90deg, #5843e4, #5a0760); */
 
 	/* margin-top: 20px; */
@@ -97,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;

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%;
+	font-size: 300%;
-	text-align: center;
   }