fix responsive

Wadie-ess · Aug 26, 2023 · 3628520 · 3628520
1 parent 20b6290
commit 3628520
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 40 deletions.
diff --git a/frontend/code/src/components/Home/LeaderBoard.tsx b/frontend/code/src/components/Home/LeaderBoard.tsx
@@ -2,8 +2,8 @@ import { Chart } from './assets/Chart'
 import { Table } from './assets/Table'
 export const LeaderBoard = () => {
  return (
- <div className='flex flex-col rounded-2xl justify-start items-start mt-6 sm:h-full h-full w-full bg-base-200 overflow-scroll scroll'>
- <div className="flex justify-start items-start pl-2 pt-2 sm:pl-12 sm:pt-12 gap-x-4">
+ <div className='flex flex-col rounded-2xl justify-start items-start mt-6 sm:h-full h-full w-full bg-base-200 overflow-scroll no-scrollbar'>
+ <div className="flex justify-start items-start pl-2 pt-2 sm:pl-12 sm:pt-12 gap-x-4 py-4">
  <Chart/> <span className='font-montserrat'>Leader Board </span>
 
  </div>

diff --git a/frontend/code/src/components/Home/assets/Daimond.tsx b/frontend/code/src/components/Home/assets/Daimond.tsx
@@ -0,0 +1,8 @@
+export const Daimond = () => {
+ return (
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M9 17L1.6797 7.84963C1.34718 7.43398 1.18092 7.22615 1.13625 6.9757C1.09159 6.72524 1.17575 6.47276 1.34407 5.96778L2.0883 3.73509C2.52832 2.41505 2.74832 1.75503 3.2721 1.37752C3.79587 1 4.49159 1 5.88304 1H12.117C13.5084 1 14.2041 1 14.7279 1.37752C15.2517 1.75503 15.4717 2.41505 15.9117 3.73509L16.6559 5.96778C16.8243 6.47276 16.9084 6.72524 16.8637 6.9757C16.8191 7.22615 16.6528 7.43398 16.3203 7.84963L9 17ZM9 17L12.5 6M9 17L5.5 6M16.5 7L12.5 6M12.5 6L11 2M12.5 6H5.5M7 2L5.5 6M5.5 6L1.5 7" stroke="#F2F2F2" strokeLinecap="round"/>
+ </svg>
+
+ )
+}
diff --git a/frontend/code/src/components/Home/assets/Data.Json b/frontend/code/src/components/Home/assets/Data.Json
diff --git a/frontend/code/src/components/Home/assets/Table.tsx b/frontend/code/src/components/Home/assets/Table.tsx
@@ -1,6 +1,6 @@
 import { Trophy } from './Trophy' 
 import { useState,useEffect } from 'react'
-
+import { Daimond } from './Daimond'
 
 
 
@@ -9,25 +9,21 @@ export const Table = () =>
 {
  const [users, setUsers] = useState<any | undefined>([])
  useEffect( () => {
-
- const fetchdata = async() =>{
- for (let i = 0 ; i < 10 ; i++)
- {
- let response = await fetch(`https://randomuser.me/api/`)
- let data = await response.json()
- if (data.results && data.results.length > 0) {
- const newUser = data.results[0];
- setUsers((oldUsers : any) => [...oldUsers, newUser]);
- console.log(newUser)
- }
- }
- }
-
- fetchdata().catch(console.error)
-
+ const fetchdata = async() =>{
+
+ let response = await fetch(`https://randomuser.me/api/`)
+ let data = await response.json()
+ if (data.results && data.results.length > 0) {
+ const newUser = data.results[0];
+ setUsers((oldUsers : any) => [...oldUsers, newUser]);
+ console.log(newUser)
+ }
+
+ }
+ fetchdata().catch(console.error) 
  },[])
  return (
- <div className="overflow-x-auto w-full">
+ <div className="overflow-x-auto no-scrollbar w-full">
  <table className="table w-full">
  <thead>
  <tr className='w-[80vw] flex justify-between px-10 items-center'>
@@ -36,28 +32,28 @@ export const Table = () =>
  <th>Score</th>
  </tr>
  </thead>
- <tbody className='flex flex-col justify-center items-center content-center gap-4'>
+ <tbody className='flex flex-col justify-start items-center gap-2 sm:gap-4'>
  {users.map((x: any, index: number) => (
  <tr
  key={index}
- className='bg-base-100 border-base-200 rounded-3xl w-[80vw] flex justify-between px-10 items-center'
+ className='bg-accent border-base-200 rounded-3xl w-[80vw] flex justify-start sm:justify-between px-4 sm:px-10 items-center'
  >
  <td>
  <div className="flex items-center space-x-3">
  <div className='flex justify-center items-center gap-x-3'>
- <Trophy />
+ <Trophy /> {index}
  </div>
  </div>
  </td>
  <td className='flex justify-start items-center gap-x-2'>
- <div className="avatar">
- <div className="mask mask-squircle w-12 h-12">
- <img src={x.picture.thumbnail} alt="Avatar Tailwind CSS Component" />
- </div>
+ <div className="avatar">
+ <div className="w-10 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
+ <img src={x.picture.thumbnail} alt="Avatar Tailwind CSS Component" /> </div>
  </div>
- <div className="flex font-montserrat ">{x.name.first}</div>
+
+ <div className="flex font-montserrat w-12">{x.name.first}</div>
  </td>
- <td>24</td>
+ <td className='flex justify-between items-center'><Daimond/> 14</td>
  </tr>
  ))}
  </tbody>

diff --git a/frontend/code/src/components/Home/index.tsx b/frontend/code/src/components/Home/index.tsx
@@ -6,12 +6,12 @@ import { LeaderBoard } from './LeaderBoard'
 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-2">
+ <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-36 sm:max-h-96 w-[100vw] sm:h-3/4 sm:w-[90vw]'>
- <img className='object-fit h-full w-full px-12' src={Hero} alt="bg hero" />
+ <img className='object-fit h-full w-full sm:px-12 px-4' src={Hero} alt="bg hero" />
  <Button/>
  </div>
- <div className='flex justify-center relative items-start pt-6 h-3/6 px-12 w-[100vw] sm:h-3/4 sm:w-[90vw]'>
+ <div className='flex justify-center relative items-start pt-6 h-3/6 sm:px-12 px-4 w-[100vw] sm:h-3/4 sm:w-[90vw]'>
  <LeaderBoard/>
 
  </div>

diff --git a/frontend/code/src/components/Layout/Assets/Message.tsx b/frontend/code/src/components/Layout/Assets/Message.tsx
@@ -3,8 +3,8 @@ export const Message = () => {
  <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center ">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M19.3259 5.77772C20 6.78661 20 8.19108 20 11C20 13.8089 20 15.2134 19.3259 16.2223C19.034 16.659 18.659 17.034 18.2223 17.3259C17.3409 17.9148 16.1577 17.9892 14 17.9986V18L12.8944 20.2111C12.5259 20.9482 11.4741 20.9482 11.1056 20.2111L10 18V17.9986C7.8423 17.9892 6.65907 17.9148 5.77772 17.3259C5.34096 17.034 4.96596 16.659 4.67412 16.2223C4 15.2134 4 13.8089 4 11C4 8.19108 4 6.78661 4.67412 5.77772C4.96596 5.34096 5.34096 4.96596 5.77772 4.67412C6.78661 4 8.19108 4 11 4H13C15.8089 4 17.2134 4 18.2223 4.67412C18.659 4.96596 19.034 5.34096 19.3259 5.77772Z" stroke="#BDBDBD" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
- <path d="M9 9L15 9" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M9 13H12" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M9 9L15 9" stroke="#BDBDBD" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+ <path d="M9 13H12" stroke="#BDBDBD" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
  </div>
  )

diff --git a/frontend/code/src/components/Layout/Assets/Out.tsx b/frontend/code/src/components/Layout/Assets/Out.tsx
@@ -3,7 +3,7 @@ export const Out = () => {
  return (
  <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center ">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M7 7.13193V6.61204C7 4.46614 7 3.3932 7.6896 2.79511C8.37919 2.19703 9.44136 2.34877 11.5657 2.65224L15.8485 3.26408C18.3047 3.61495 19.5327 3.79039 20.2664 4.63628C21 5.48217 21 6.72271 21 9.20377V14.7962C21 17.2773 21 18.5178 20.2664 19.3637C19.5327 20.2096 18.3047 20.385 15.8485 20.7359L11.5657 21.3478C9.44136 21.6512 8.37919 21.803 7.6896 21.2049C7 20.6068 7 19.5339 7 17.388V17.066" stroke="#BDBDBD" stroke-width="2"/>
+ <path d="M7 7.13193V6.61204C7 4.46614 7 3.3932 7.6896 2.79511C8.37919 2.19703 9.44136 2.34877 11.5657 2.65224L15.8485 3.26408C18.3047 3.61495 19.5327 3.79039 20.2664 4.63628C21 5.48217 21 6.72271 21 9.20377V14.7962C21 17.2773 21 18.5178 20.2664 19.3637C19.5327 20.2096 18.3047 20.385 15.8485 20.7359L11.5657 21.3478C9.44136 21.6512 8.37919 21.803 7.6896 21.2049C7 20.6068 7 19.5339 7 17.388V17.066" stroke="#BDBDBD" strokeWidth="2"/>
  <path d="M16 12L16.7809 11.3753L17.2806 12L16.7809 12.6247L16 12ZM4 13C3.44771 13 3 12.5523 3 12C3 11.4477 3.44771 11 4 11V13ZM12.7809 6.3753L16.7809 11.3753L15.2191 12.6247L11.2191 7.6247L12.7809 6.3753ZM16.7809 12.6247L12.7809 17.6247L11.2191 16.3753L15.2191 11.3753L16.7809 12.6247ZM16 13H4V11H16V13Z" fill="#BDBDBD"/>
  </svg>
  </div>

diff --git a/frontend/code/src/components/Layout/index.tsx b/frontend/code/src/components/Layout/index.tsx
@@ -21,7 +21,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 justify-start z-50 pl-1 sm:pl-2  items-start h-full w-full'>
+ <div className='flex justify-start items-center z-50 pl-1 sm:pl-2 h-full w-full'>
  <Logo/>
  </div>
  <div className='flex items-center justify-end pr-6 gap-6 h-full w-full'>
@@ -62,7 +62,7 @@ tart ">
  <Settings/> 
  </button>
  </div>
- <div className='sm:absolute sm:w-[91vw] 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-scroll'>
+ <div className='sm:absolute sm:w-[91vw] 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'>
  {Content.children}
  </div>
  </div>

diff --git a/frontend/code/src/index.css b/frontend/code/src/index.css
@@ -1,6 +1,20 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@layer utilities {
+ @variants responsive {
+ /* Hide scrollbar for Chrome, Safari and Opera */
+ .no-scrollbar::-webkit-scrollbar {
+ display: none;
+ }
+
+ /* Hide scrollbar for IE, Edge and Firefox */
+ .no-scrollbar {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+ }
+ }
+ }
 @import url('https://fonts.googleapis.com/css2?family=Lexend+Peta:wght@400;700&display=swap');
 @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
 @import url('https://fonts.googleapis.com/css2?family=Lexend+Peta:wght@400;700&family=Montserrat:wght@700&display=swap');
diff --git a/frontend/code/src/index.tsx b/frontend/code/src/index.tsx
@@ -13,7 +13,6 @@ const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
 );
 root.render(
- <React.StrictMode>
  <BrowserRouter>
  <Routes>
  <Route path="/" element={<Login />}></Route>
@@ -25,7 +24,6 @@ root.render(
  </Routes>
  </BrowserRouter>
 
- </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/frontend/code/tailwind.config.js b/frontend/code/tailwind.config.js
@@ -35,7 +35,7 @@ module.exports = {
 
  "secondary": "#6A4CFC",
 
- "accent": "#aedd1f",
+ "accent": "#1A1C26",
 
  "neutral": "#161922",