Add:settings

Add:Play Fix:Layout and responsive view is some pages
Wadie-ess · Aug 28, 2023 · f63821e · f63821e
1 parent 1abc99a
commit f63821e
Show file tree

Hide file tree

Showing 22 changed files with 233 additions and 62 deletions.
diff --git a/frontend/code/src/components/Home/index.tsx b/frontend/code/src/components/Home/index.tsx
@@ -3,13 +3,14 @@ import {Layout} from '../Layout/'
 import { Button } from './assets/Button'
 import Hero from './assets/Hero.png'
 import { LeaderBoard } from './LeaderBoard'
+import { Link } from 'react-router-dom'
 export const Home : FC = () : JSX.Element =>{
  return (
  <Layout>
  <div className="flex flex-col items-center h-screen w-full sm:gap-y-8 gap-y-1">
  <div className='flex justify-center relative items-start pt-6 h-2/6 max-h-48 sm:max-h-96 w-[90vw] sm:h-3/4 sm:w-[85vw]'>
  <img className='object-fit h-full w-full ' src={Hero} alt="bg hero" />
- <Button/>
+ <Link to={"/Play"}><Button/></Link>
  </div>
  <div className='flex justify-center relative items-start pt-6 h-3/6 w-[90vw] sm:h-3/4 sm:w-[85vw]'>
  <LeaderBoard/>

diff --git a/frontend/code/src/components/Layout/Assets/Dash.tsx b/frontend/code/src/components/Layout/Assets/Dash.tsx
@@ -1,12 +1,15 @@
+import { Link } from 'react-router-dom'
 export const Dash = () => {
  return (
- <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer">
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <rect x="4" y="4" width="6" height="7" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
- <rect x="4" y="15" width="6" height="5" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
- <rect x="14" y="4" width="6" height="5" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
- <rect x="14" y="13" width="6" height="7" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
- </svg>
- </div>
+ <Link to={"/Home"}>
+ <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer">
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect x="4" y="4" width="6" height="7" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
+ <rect x="4" y="15" width="6" height="5" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
+ <rect x="14" y="4" width="6" height="5" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
+ <rect x="14" y="13" width="6" height="7" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
+ </svg>
+ </div>
+ </Link>
  )
 }
diff --git a/frontend/code/src/components/Layout/Assets/Logo.tsx b/frontend/code/src/components/Layout/Assets/Logo.tsx
diff --git a/frontend/code/src/components/Layout/Assets/Profile.tsx b/frontend/code/src/components/Layout/Assets/Profile.tsx
@@ -1,10 +1,13 @@
+import {Link} from 'react-router-dom'
 
 export const Profile = () => {
  return (
- <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer">
- <svg width="19" height="24" viewBox="0 0 19 24" fill="#BDBDBD" xmlns="http://www.w3.org/2000/svg">
- <path d="M9.3615 15.416C14.4385 15.416 18.723 16.241 18.723 19.4239C18.723 22.608 14.4104 23.4037 9.3615 23.4037C4.28566 23.4037 0 22.5788 0 19.3958C0 16.2117 4.31259 15.416 9.3615 15.416ZM9.3615 0C12.8008 0 15.5565 2.75465 15.5565 6.19152C15.5565 9.6284 12.8008 12.3842 9.3615 12.3842C5.92337 12.3842 3.16654 9.6284 3.16654 6.19152C3.16654 2.75465 5.92337 0 9.3615 0Z" fill="#BDBDBD"/>
- </svg>
- </div>
+ <Link to={"/Profile"}>
+ <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer">
+ <svg width="19" height="24" viewBox="0 0 19 24" fill="#BDBDBD" xmlns="http://www.w3.org/2000/svg">
+ <path d="M9.3615 15.416C14.4385 15.416 18.723 16.241 18.723 19.4239C18.723 22.608 14.4104 23.4037 9.3615 23.4037C4.28566 23.4037 0 22.5788 0 19.3958C0 16.2117 4.31259 15.416 9.3615 15.416ZM9.3615 0C12.8008 0 15.5565 2.75465 15.5565 6.19152C15.5565 9.6284 12.8008 12.3842 9.3615 12.3842C5.92337 12.3842 3.16654 9.6284 3.16654 6.19152C3.16654 2.75465 5.92337 0 9.3615 0Z" fill="#BDBDBD"/>
+ </svg>
+ </div>
+ </Link>
  )
 }
diff --git a/frontend/code/src/components/Layout/Assets/Search.tsx b/frontend/code/src/components/Layout/Assets/Search.tsx
@@ -3,7 +3,7 @@ import {BiSearch} from 'react-icons/bi'
 export const Search = () => {
  return (
  <div className='hidden sm:flex sm:items-center absolute pr-24 '>
- <input type="text" placeholder="Search" className={`input w-60 mr-4 h-12`}/>
+ <input type="text" placeholder="Search" className={`input w-44 h-8 md:w-60 mr-4 md:h-12`}/>
  <div className='relative right-12 top-0 w-12 '><BiSearch size="1.4em" /></div>
  </div> 
  )

diff --git a/frontend/code/src/components/Layout/Assets/Settings.tsx b/frontend/code/src/components/Layout/Assets/Settings.tsx
@@ -1,9 +1,13 @@
+import { Link } from "react-router-dom"
+
 export const Settings = () => {
 return (
- <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer">
- <svg width="24" height="24" viewBox="0 0 24 24" fill="#BDBDBD" xmlns="http://www.w3.org/2000/svg">
- <path d="M12.1514 0C13.0508 0 13.8651 0.499506 14.3148 1.23687C14.5336 1.59366 14.6794 2.0337 14.643 2.49753C14.6186 2.85432 14.728 3.21111 14.9225 3.54412C15.5424 4.55502 16.9158 4.9356 17.9853 4.36473C19.1886 3.67494 20.7079 4.09119 21.4007 5.2686L22.215 6.67198C22.9199 7.84939 22.531 9.3598 21.3156 10.0377C20.2825 10.6442 19.9179 11.9882 20.5377 13.011C20.7322 13.3321 20.951 13.6056 21.2913 13.7721C21.7167 13.9981 22.0448 14.3549 22.2758 14.7117C22.7255 15.449 22.689 16.3529 22.2515 17.1497L21.4007 18.5769C20.951 19.338 20.1123 19.8138 19.2494 19.8138C18.824 19.8138 18.35 19.6948 17.961 19.457C17.645 19.2548 17.2804 19.1834 16.8915 19.1834C15.6882 19.1834 14.6794 20.1705 14.643 21.348C14.643 22.7156 13.5248 23.786 12.127 23.786H10.4741C9.0642 23.786 7.94602 22.7156 7.94602 21.348C7.92171 20.1705 6.91292 19.1834 5.70966 19.1834C5.30857 19.1834 4.94395 19.2548 4.64009 19.457C4.25116 19.6948 3.76499 19.8138 3.35175 19.8138C2.47665 19.8138 1.63802 19.338 1.18831 18.5769L0.349678 17.1497C-0.100025 16.3767 -0.124334 15.449 0.32537 14.7117C0.519836 14.3549 0.884461 13.9981 1.2977 13.7721C1.63802 13.6056 1.85679 13.3321 2.06341 13.011C2.67112 11.9882 2.3065 10.6442 1.27339 10.0377C0.0701326 9.3598 -0.3188 7.84939 0.373986 6.67198L1.18831 5.2686C1.89325 4.09119 3.40037 3.67494 4.61578 4.36473C5.67319 4.9356 7.04661 4.55502 7.66648 3.54412C7.86094 3.21111 7.97033 2.85432 7.94602 2.49753C7.92171 2.0337 8.05541 1.59366 8.28634 1.23687C8.73604 0.499506 9.55037 0.023786 10.4376 0H12.1514ZM11.3127 8.53918C9.40452 8.53918 7.86094 10.0377 7.86094 11.9049C7.86094 13.7721 9.40452 15.2587 11.3127 15.2587C13.2209 15.2587 14.728 13.7721 14.728 11.9049C14.728 10.0377 13.2209 8.53918 11.3127 8.53918Z" fill="#BDBDBD"/>
- </svg>
- </div>
+ <Link to={"/Settings"}>
+ <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer">
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="#BDBDBD" xmlns="http://www.w3.org/2000/svg">
+ <path d="M12.1514 0C13.0508 0 13.8651 0.499506 14.3148 1.23687C14.5336 1.59366 14.6794 2.0337 14.643 2.49753C14.6186 2.85432 14.728 3.21111 14.9225 3.54412C15.5424 4.55502 16.9158 4.9356 17.9853 4.36473C19.1886 3.67494 20.7079 4.09119 21.4007 5.2686L22.215 6.67198C22.9199 7.84939 22.531 9.3598 21.3156 10.0377C20.2825 10.6442 19.9179 11.9882 20.5377 13.011C20.7322 13.3321 20.951 13.6056 21.2913 13.7721C21.7167 13.9981 22.0448 14.3549 22.2758 14.7117C22.7255 15.449 22.689 16.3529 22.2515 17.1497L21.4007 18.5769C20.951 19.338 20.1123 19.8138 19.2494 19.8138C18.824 19.8138 18.35 19.6948 17.961 19.457C17.645 19.2548 17.2804 19.1834 16.8915 19.1834C15.6882 19.1834 14.6794 20.1705 14.643 21.348C14.643 22.7156 13.5248 23.786 12.127 23.786H10.4741C9.0642 23.786 7.94602 22.7156 7.94602 21.348C7.92171 20.1705 6.91292 19.1834 5.70966 19.1834C5.30857 19.1834 4.94395 19.2548 4.64009 19.457C4.25116 19.6948 3.76499 19.8138 3.35175 19.8138C2.47665 19.8138 1.63802 19.338 1.18831 18.5769L0.349678 17.1497C-0.100025 16.3767 -0.124334 15.449 0.32537 14.7117C0.519836 14.3549 0.884461 13.9981 1.2977 13.7721C1.63802 13.6056 1.85679 13.3321 2.06341 13.011C2.67112 11.9882 2.3065 10.6442 1.27339 10.0377C0.0701326 9.3598 -0.3188 7.84939 0.373986 6.67198L1.18831 5.2686C1.89325 4.09119 3.40037 3.67494 4.61578 4.36473C5.67319 4.9356 7.04661 4.55502 7.66648 3.54412C7.86094 3.21111 7.97033 2.85432 7.94602 2.49753C7.92171 2.0337 8.05541 1.59366 8.28634 1.23687C8.73604 0.499506 9.55037 0.023786 10.4376 0H12.1514ZM11.3127 8.53918C9.40452 8.53918 7.86094 10.0377 7.86094 11.9049C7.86094 13.7721 9.40452 15.2587 11.3127 15.2587C13.2209 15.2587 14.728 13.7721 14.728 11.9049C14.728 10.0377 13.2209 8.53918 11.3127 8.53918Z" fill="#BDBDBD"/>
+ </svg>
+ </div>
+ </Link>
  )
 }
diff --git a/frontend/code/src/components/Layout/index.tsx b/frontend/code/src/components/Layout/index.tsx
@@ -20,7 +20,7 @@ export const Layout : FC<myNodetype> = (Content) : JSX.Element =>
  <>
  <div data-theme="mytheme" className=' h-screen bg-slate-50 '> 
 
- <div className=' flex flex-row w-screen h-[8vh] bg-base-200'> 
+ <div className=' flex flex-row w-screen md:h-[8vh]  bg-base-200'> 
  <div className='flex justify-start items-center z-50 pl-1 sm:pl-2 h-full w-full'>
  <Logo/>
  </div>
@@ -32,7 +32,7 @@ export const Layout : FC<myNodetype> = (Content) : JSX.Element =>
  </div>
  <div className='flex'>
 
- <div className='sm:flex flex-col hidden justify-around items-stretch h-[92vh] bg-base-200 sm:w-[11vw] md:w-[9vw] xl:w-[7vw]'>
+ <div className='sm:flex flex-col hidden justify-around items-stretch h-[94vh] bg-base-200 overflow-auto md:pt-10 sm:w-[11vw] md:w-[9vw] xl:w-[7vw]'>
  <div className="flex flex-col pl-[1.4vw] justify-evenly content-start gap-y-10 pb-44 ">
  <Dash/>
  <Game/>
@@ -62,7 +62,7 @@ tart ">
  <Settings/> 
  </button>
  </div>
- <div className='sm:-ml-4 sm:w-[92vw] xl:w-[95vw] md:w-[93.5vw] w-screen right-0 z-10 h-[84vh] sm:h-[92vh] bg-base-100 sm:rounded-tl-2xl overflow-auto no-scrollbar'>
+ <div className='sm:-ml-4 sm:w-[92vw] xl:w-[95vw] md:w-[93.5vw] w-screen right-0 z-10 h-[85.6vh] sm:h-[94vh] bg-base-100 sm:rounded-tl-2xl overflow-auto no-scrollbar'>
  {Content.children}
  </div>
  </div>