From 952ad3578111e461379d62818740c82a31531f1c Mon Sep 17 00:00:00 2001 From: PrStein Date: Wed, 17 May 2023 23:13:37 +0200 Subject: [PATCH] ajout pop up pour changer de nom change de nom mais ne ferme pas apres le changement et changement de l'historique --- ...{DataProfileUser.js => DataUserProfile.js} | 6 +-- frontend/src/components/EditName.jsx | 52 +++++++++++++++++++ .../src/components/Sidebar/SidebarData.js | 3 +- frontend/src/pages/Home.jsx | 29 ++++++----- frontend/src/styles/App.css | 3 +- frontend/src/styles/Header.css | 7 ++- frontend/src/styles/Profile.css | 49 ++++++++++++++--- 7 files changed, 120 insertions(+), 29 deletions(-) rename frontend/src/DataBase/{DataProfileUser.js => DataUserProfile.js} (76%) create mode 100644 frontend/src/components/EditName.jsx diff --git a/frontend/src/DataBase/DataProfileUser.js b/frontend/src/DataBase/DataUserProfile.js similarity index 76% rename from frontend/src/DataBase/DataProfileUser.js rename to frontend/src/DataBase/DataUserProfile.js index e456e13c..7563a575 100644 --- a/frontend/src/DataBase/DataProfileUser.js +++ b/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 \ No newline at end of file diff --git a/frontend/src/components/EditName.jsx b/frontend/src/components/EditName.jsx new file mode 100644 index 00000000..b4e73078 --- /dev/null +++ b/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 ( + // + +

Type your new name

+ +
{UserProfile.UserName = username;}}> + change +
+ + // + + ) +} + +export default ModalEdit \ No newline at end of file diff --git a/frontend/src/components/Sidebar/SidebarData.js b/frontend/src/components/Sidebar/SidebarData.js index 3f3224c0..e46b250a 100644 --- a/frontend/src/components/Sidebar/SidebarData.js +++ b/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: , cName: 'nav-text' diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx index fbf3911f..ce6671f0 100644 --- a/frontend/src/pages/Home.jsx +++ b/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 (
Profile pic -

Dipper Ratman

- {/* */} - (modalOpen ? close() : open())}> - - - {/* */} +

{UserProfile.UserName}

+ (modalOpen ? close() : open())}> + + + + null}> - {modalOpen && } + {modalOpen && }
) @@ -52,10 +51,12 @@ function Home () { -
- -
+ setmove(!move)}> + Match History + ) } diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css index 3b9cd18f..21d4943a 100644 --- a/frontend/src/styles/App.css +++ b/frontend/src/styles/App.css @@ -1,6 +1,7 @@ .App { text-align: center; - /* height: 100vh; */ + height: 100%; + width: 100%; background-color: black; } diff --git a/frontend/src/styles/Header.css b/frontend/src/styles/Header.css index 0da0f3c1..81f24e09 100644 --- a/frontend/src/styles/Header.css +++ b/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 { diff --git a/frontend/src/styles/Profile.css b/frontend/src/styles/Profile.css index ff2d7730..1423fb6d 100644 --- a/frontend/src/styles/Profile.css +++ b/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;