ajout pop up pour changer de nom change de nom mais ne ferme pas apres le changement et changement de l'historique

frontend/src/DataBase/DataUserProfile.js

@@ -1,10 +1,8 @@
 import DefaultPic from '../assets/profile.jpg';
 
-export const UserProfile = [
-	{
+export const UserProfile = {
 		Pic: DefaultPic,
 		UserName: 'Dipper Ratman',
-	},
-]
+	}
 
 // export default UserProfile

frontend/src/components/EditName.jsx

@@ -0,0 +1,52 @@
+import {motion} from "framer-motion"
+// import Backdrop from "./Sidebar/Backdrop"
+import {Link} from 'react-router-dom';
+import { UserProfile } from "../DataBase/DataUserProfile";
+import {useState} from 'react';
+import "../styles/Profile.css"
+
+const dropIn = {
+	hidden: {
+		opacity: '0',
+	},
+	visible: {
+		opacity: "1",
+	},
+	exit: {
+		opacity: "0",
+	},
+}
+
+// const changeName = ({handleClose, name}) => {
+// 	return (
+// 		UserProfile.UserName = name
+// 	)
+// }
+
+const ModalEdit = ({ handleClose }) => {
+	// let new_name = "";
+	const [username, setUserName] = useState("");
+	const handler = e =>
+	{
+		setUserName (e.target.value);
+	}
+	return (
+		// <Backdrop onClick={handleClose}>
+			<motion.div 
+						className="modal"
+						variants={dropIn}
+						initial="hidden"
+						animate="visible"
+						exit="exit">
+				<h2>Type your new name</h2>
+				<input className="text" type="text" value={username} onChange={handler} handleClose/>
+				<div onClick={() => {UserProfile.UserName = username;}}>
+					<Link className="button">change</Link>
+				</div>
+			</motion.div>
+		// </Backdrop>
+		
+	)
+}
+
+export default ModalEdit

frontend/src/components/Sidebar/SidebarData.js

@@ -4,11 +4,12 @@ import * as AiIcons from 'react-icons/ai';
 import * as IoIcons from 'react-icons/io';
 import {BiLogOutCircle} from 'react-icons/bi';
 import {IoSettingsSharp} from 'react-icons/io5'
+import {UserProfile} from '../../DataBase/DataUserProfile'
 
 
 export const SidebarData = [
 	{
-		title: 'Dipper Ratman',
+		title: UserProfile.UserName,
 		path: '/',
 		icon: <AiIcons.AiFillHome />,
 		cName: 'nav-text'

frontend/src/pages/Home.jsx

@@ -6,10 +6,10 @@ import WinLoss from "../components/Win_Loss";
 import { motion, AnimatePresence } from 'framer-motion'
 import { AiFillEdit } from 'react-icons/ai'
 import { Link } from "react-router-dom";
-import Modal from "../components/Sidebar/Modal";
+import ModalEdit from "../components/EditName";
 // import {AiOutlineHistory} from 'react-icons/ai'
 // import { Link } from "react-router-dom";
-// import UserProfile from "../DataBase/DataProfileUser";
+import {UserProfile} from "../DataBase/DataUserProfile";
 
 
 
@@ -20,17 +20,16 @@ function Profile () {
 	return (
 		<div className="profile">
 			<img className="profile-pic" src={DefaultPicture} alt="Profile pic" />
-			<h1>Dipper Ratman</h1>
-			{/* <motion.div
-				> */}
-				<motion.button to="#" className="edit_name" onClick={() => (modalOpen ? close() : open())}>
+			<h1>{UserProfile.UserName}</h1>
+				<motion.div  onClick={() => (modalOpen ? close() : open())}>
+					<Link to="#" className="edit_name">
 						<AiFillEdit/>
-				</motion.button>
-			{/* </motion.div> */}
+					</Link>
+				</motion.div>
 			<AnimatePresence
 			initial={false}
 			onExitComplete={() => null}>
-				{modalOpen && <Modal modalOpen={modalOpen} handleClose={close}/>}
+				{modalOpen && <ModalEdit modalOpen={modalOpen} handleClose={close}/>}
 			</AnimatePresence>
 		</div>
 	)
@@ -52,10 +51,12 @@ function Home () {
 				<WinLoss/>
 			</motion.div>
 			</div>
-			<div>
-				<button className="history"
-				onClick={ () => setmove(!move)}>Match History</button>
-			</div>
+			<motion.div
+			//	{/* <button className="history" */}
+			// className="history"
+				onClick={ () => setmove(!move)}>
+					<Link to="#" className="history">Match History</Link>
+			</motion.div>
 		</motion.div>
     )
 }

frontend/src/styles/App.css

@@ -1,6 +1,7 @@
 .App {
   text-align: center;
-	/* height: 100vh; */
+	height: 100%;
+  width: 100%;
   background-color: black;
 }
 

frontend/src/styles/Header.css

@@ -41,6 +41,7 @@
 	/* justify-content: start; */
 	align-items:  center;
 	padding: 8px 0px 8px 16px;
+
 	list-style: none;
 	height: 60px;
 }
@@ -53,8 +54,10 @@
 	height: 100%;
 	display: flex;
 	align-items: center;
-	padding: 0 16px;
-	border-radius: 4px;
+	/* padding: 0 16px; */
+	padding: 8px 8px 8px 8px;
+
+	border-radius: 20px;
 }
 
 .nav-text a:hover {

frontend/src/styles/Profile.css

@@ -18,6 +18,7 @@
 	/* margin-top: -100px; */
 	/* display:inline-block; */
 	/* flex-direction: column; */
+	/* position: absolute; */
 	background-color: black;
 	text-align: center;
 
@@ -27,20 +28,54 @@
 	display: inline-block;
 	color: white;
 	background-color:  #5843e4;
-	border-radius: 4px;
-	margin: 10px;
-	/* padding: 8px 8px 8px 8px; */
+	border-radius: 20px;
+	padding: 16px;
 	font-size: 30px;
 	text-decoration: none;
 	margin-top: -400px;
-
+	font-weight: bold;
 }
 
 .edit_name {
 	margin-left: 2rem;
-	font-size: 2rem;
-	background: none;
-	color:#f5f5f5
+	font-size: 1.7rem;
+	background: #5843e4;
+	color:#f5f5f5;
+	margin: 0 16px;
+	text-decoration: none;
+	padding: 10px 16px;
+	border-radius: 20px;
+}
+
+.modal {
+	position:initial;
+	width: 400px;
+	height: 150px;
+
+	margin: auto;
+	padding: 0 2rem;
+	border-radius: 12px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	background-color: rgb(42, 41, 41);
+}
+
+.text {
+	background-color: black;
+	color: grey;
+	margin-bottom: 10px;
+}
+
+.button{
+	display: inline-block;
+	color: white;
+	background-color:  #5843e4;
+	border-radius: 15px;
+	padding: 8px;
+	font-size: 20px;
+	text-decoration: none;
+	font-weight: bold;
 }
 /* canvas {
 	margin-top: 20px;