diff --git a/frontend/src/DataBase/DataProfileUser.js b/frontend/src/DataBase/DataProfileUser.js new file mode 100644 index 00000000..e456e13c --- /dev/null +++ b/frontend/src/DataBase/DataProfileUser.js @@ -0,0 +1,10 @@ +import DefaultPic from '../assets/profile.jpg'; + +export const UserProfile = [ + { + Pic: DefaultPic, + UserName: 'Dipper Ratman', + }, +] + +// export default UserProfile \ No newline at end of file diff --git a/frontend/src/DataBase/DataProfileUser.jsx b/frontend/src/DataBase/DataProfileUser.jsx deleted file mode 100644 index 5c19e67c..00000000 --- a/frontend/src/DataBase/DataProfileUser.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import DefaultPic from '../assets/profile.jpg'; - -const UserProfile = [ - { - Pic: DefaultPic, - UserName: "Dipper Ratman", - }, -] - -export default UserProfile \ No newline at end of file diff --git a/frontend/src/DataBase/DummyDBWinLoss.js b/frontend/src/DataBase/DummyDBWinLoss.js index a44b6410..02f9cadf 100644 --- a/frontend/src/DataBase/DummyDBWinLoss.js +++ b/frontend/src/DataBase/DummyDBWinLoss.js @@ -2,29 +2,36 @@ export const DBWinLoss = [ { title: 'Victory', score: '10 - 6', + openent: 'kinou' }, { title: 'Defeat', score: '9 - 10', + openent: 'Flatman' }, { title: 'Victory', score: '10 - 0', + openent: 'fuck dat' }, { title: 'Victory', score: '10 - 9', + openent: 'Eren jeager' }, { title: 'Defeat', score: '3 - 10', + openent: 'justin' }, { - title: 'Deafet', + title: 'Defeat', score: '9 - 10', + openent: 'blabla car' }, { title: 'Victory', score: '10 - 9', + openent: 'jean-marie', }, ] \ No newline at end of file diff --git a/frontend/src/components/Sidebar/Modal.jsx b/frontend/src/components/Sidebar/Modal.jsx index 40f211e1..ee606771 100644 --- a/frontend/src/components/Sidebar/Modal.jsx +++ b/frontend/src/components/Sidebar/Modal.jsx @@ -55,9 +55,11 @@ const Modal = ({ handleClose }) => {
+ +
diff --git a/frontend/src/components/Win_Loss.jsx b/frontend/src/components/Win_Loss.jsx index 89349668..e02070b0 100644 --- a/frontend/src/components/Win_Loss.jsx +++ b/frontend/src/components/Win_Loss.jsx @@ -1,60 +1,68 @@ // import PropTypes from "prop-types" -import styled from 'styled-components'; -import '../DataBase/DummyDBWinLoss.js' +// import styled from 'styled-components'; +// import '../DataBase/DummyDBWinLoss.js' +// import '../DataBase/DataProfileUser.js' import { DBWinLoss } from '../DataBase/DummyDBWinLoss.js'; +import '../styles/Win_Loss.css' +// import { UserProfile } from '../DataBase/DataProfileUser.js'; // import color from '../../utils/style/color.js'; -const CardWrapper = styled.div` - display: flex; - flex-direction: column; - padding: 15px; - // background-color: black; - // border-radius: 30px; - // width: 350px; - // transition: 200ms; - // margin-top: 50px; - // &:hover { - // cursor: pointer; - // box-shadow: 2px 2px 10px #b6b6b6; - } -` +// const CardWrapper = styled.div` +// display: flex; +// flex-direction: column; +// padding: 15px; +// background-color: black; +// border-radius: 30px; +// width: 350px; +// transition: 200ms; +// margin-top: 50px; +// &:hover { +// cursor: pointer; +// box-shadow: 2px 2px 10px #b6b6b6; +// } +// ` -const CardLabel1 = styled.span` - color: #5843e4; - font-size: 22px; - font-weight: bold; - margin-bottom: 25px; -` -const CardLabel2 = styled.span` - color: #5843e4; - font-size: 22px; - font-weight: bold; - display: flex; - flex-direction: column; -` +// const CardLabel1 = styled.h1` +// color: #5843e4; +// // font-size: 22px; +// font-weight: bold; +// margin-bottom: 25px; +// ` +// const CardLabel2 = styled.span` +// color: #5843e4; +// font-size: 22px; +// font-weight: bold; +// display: flex; +// flex-direction: column; +// ` // const CardImage = styled.img` // heigh: 80px; // width: 80px; // border-radius: 50%; // ` - + function WinLoss() { return ( - - Match history Win/Loss - {/* */} - {DBWinLoss.map((item, index) => { - return ( -
  • - {item.title} - {item.score} -
    • - ) - })} -     + +
    +

    Match history Win/Loss

    +
    + {DBWinLoss.map((item, index) => { + return ( +
    +
  • +

    {item.title}

    +

    you {item.score} {item.openent}

    + {/*

    {item.openent}

    */} +
    • +
    + ) + })} +
    +
    ) } diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx index 8224bbc9..fbf3911f 100644 --- a/frontend/src/pages/Home.jsx +++ b/frontend/src/pages/Home.jsx @@ -3,7 +3,10 @@ import '../styles/Profile.css' import '../styles/App.css' import DefaultPicture from "../assets/profile.jpg"; import WinLoss from "../components/Win_Loss"; -import { motion } from 'framer-motion' +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 {AiOutlineHistory} from 'react-icons/ai' // import { Link } from "react-router-dom"; // import UserProfile from "../DataBase/DataProfileUser"; @@ -11,10 +14,24 @@ import { motion } from 'framer-motion' function Profile () { + const [modalOpen, setModalOpen] = useState(false); + const close = () => setModalOpen(false); + const open = () => setModalOpen(true); return (
    - Profile pic -

    Dipper Ratman

    + Profile pic +

    Dipper Ratman

    + {/* */} + (modalOpen ? close() : open())}> + + + {/* */} + null}> + {modalOpen && } +
    ) } @@ -27,7 +44,7 @@ function Home () { animate={{opacity: 1}} exit={{opacity: 0}}>
    - diff --git a/frontend/src/styles/Profile.css b/frontend/src/styles/Profile.css index ea271b00..ff2d7730 100644 --- a/frontend/src/styles/Profile.css +++ b/frontend/src/styles/Profile.css @@ -16,9 +16,9 @@ .home{ /* margin-top: -100px; */ - display: block; + /* display:inline-block; */ /* flex-direction: column; */ - /* background-color: black; */ + background-color: black; text-align: center; } @@ -32,6 +32,15 @@ /* padding: 8px 8px 8px 8px; */ font-size: 30px; text-decoration: none; + margin-top: -400px; + +} + +.edit_name { + margin-left: 2rem; + font-size: 2rem; + background: none; + color:#f5f5f5 } /* canvas { margin-top: 20px; diff --git a/frontend/src/styles/Win_Loss.css b/frontend/src/styles/Win_Loss.css new file mode 100644 index 00000000..4f73e2d5 --- /dev/null +++ b/frontend/src/styles/Win_Loss.css @@ -0,0 +1,53 @@ +.tab{ + display: flex; + flex-direction: column; + /* background-color: red; */ + height: 70vh; + /* padding: 15px; */ + /* overflow: scroll; */ + +} + +.scroll { + /* border:3px; */ + /* background-color: #5843e4; */ + /* border-color: white; */ + overflow: scroll; +} + +.elements { + border-width:1px; + border-style:solid; + /* background-color: #5843e4; */ + border-color: grey; + /* overflow: scroll; */ +} + +.title { + color: #5843e4; + /* font-size: 22px; */ + font-weight: bold; + margin-bottom: 25px; +} + +.content { + color: white; + /* font-size: 22px; */ + font-weight: bold; + display: flex; + flex-direction: column; + margin-bottom: 5px; +} + +div::-webkit-scrollbar { + width: 1; +} + +div::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); +} + +div::-webkit-scrollbar-thumb { + background-color: black; + outline: 1px solid black; +} \ No newline at end of file