fix_layout

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

Hide file tree

Showing 7 changed files with 38 additions and 26 deletions.
diff --git a/frontend/code/src/components/Home/assets/Button.tsx b/frontend/code/src/components/Home/assets/Button.tsx
@@ -1,20 +1,20 @@
+import './css/style.css'
 export const Button = () => {
     return (
+        <div className="mystyle transition duration-500 hover:-translate-y-1 hover:scale-110 ease-in-out hover:cursor-pointer hover:fill-primary flex absolute justify-center items-center left-[40%] sm:left-[41.4%] top-[60%] sm:top-3/4   w-[22vw] sm:w-[17.5vw]">
+            <span className=" absolute text-white font-montserrat text-[1.4vw]">PLAY NOW</span>
+            <svg width="211" height="57" viewBox="0 0 211 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect className="" x="0.84375" width="209.158" height="57" rx="6" fill="url(#paint0_linear_377_5387)"/>
 
-    <div className="flex absolute justify-center items-center left-[40%] sm:left-[41.4%] top-[60%] sm:top-3/4   w-[22vw] sm:w-[17.5vw]">
-        <span className="absolute text-white font-montserrat text-[1.4vw]">PLAY NOW</span>
-        <svg width="211" height="57" viewBox="0 0 211 57" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect x="0.84375" width="209.158" height="57" rx="6" fill="url(#paint0_linear_377_5387)"/>
-
-            <defs>
-            <linearGradient id="paint0_linear_377_5387" x1="105.423" y1="0" x2="105.423" y2="57" gradientUnits="userSpaceOnUse">
-            <stop stopColor="#7940CF"/>
-            <stop offset="1" stopColor="#5921CB"/>
-            </linearGradient>
-            </defs>
+                <defs>
+                <linearGradient id="paint0_linear_377_5387" x1="105.423" y1="0" x2="105.423" y2="57" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#7940CF"/>
+                <stop offset="1" stopColor="#5921CB"/>
+                </linearGradient>
+                </defs>
+
+            </svg>
 
-        </svg>
-
-    </div>
+        </div>
     )
 }
diff --git a/frontend/code/src/components/Home/assets/Table.tsx b/frontend/code/src/components/Home/assets/Table.tsx
@@ -10,15 +10,16 @@ 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)  
     },[])
@@ -32,16 +33,16 @@ export const Table = () =>
                 <th>Score</th>
               </tr>
             </thead>
-            <tbody className='flex flex-col justify-start items-center gap-2 sm:gap-4'>
+            <tbody className='flex flex-col justify-between items-center gap-2 sm:gap-4'>
               {users.map((x: any, index: number) => (
                 <tr
                   key={index}
-                  className='bg-accent border-base-200 rounded-3xl w-[80vw] flex justify-start sm:justify-between px-4 sm:px-10 items-center'
+                  className='bg-accent border-base-200 rounded-xl w-[80vw] flex justify-between 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 /> {index}
+                        <Trophy /> {index + 1}
                       </div>
                     </div>
                   </td>
@@ -53,7 +54,7 @@ export const Table = () =>
 
                     <div className="flex font-montserrat w-12">{x.name.first}</div>
                   </td>
-                  <td className='flex justify-between items-center'><Daimond/> 14</td>
+                  <td className='flex justify-start items-center gap-x-1 w-16'><Daimond/> 14</td>
                 </tr>
               ))}
             </tbody>

diff --git a/frontend/code/src/components/Home/assets/css/style.css b/frontend/code/src/components/Home/assets/css/style.css
@@ -0,0 +1,5 @@
+.mystyle:hover > svg * ,
+.mystyle:hover {
+    transition-duration: 300ms;
+    fill: hsl(var(--p) / 1);
+}  
diff --git a/frontend/code/src/components/Layout/index.tsx b/frontend/code/src/components/Layout/index.tsx
@@ -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-[8vw] xl:w-[7vw]'>
+            <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="flex flex-col pl-[1.4vw] justify-evenly content-start gap-y-10 pb-44 ">
                     <Dash/>
                     <Game/>
@@ -45,7 +45,7 @@ tart ">
                     <Out/>
                 </div>
             </div>
-                <div className=" h-[8vh] sm:hidden btm-nav bg-base-200 ">
+                <div className=" h-[8vh] sm:hidden btm-nav bg-base-200 flex justify-end z-50">
                     <button className="">
                         <Dash/>                    
                     </button>
@@ -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-auto no-scrollbar'>
+                <div className='sm:absolute sm:w-[91vw] xl:w-[95vw] md:w-[92.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
@@ -15,6 +15,10 @@
       }
     }
   }
-@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');
+@import url('https://fonts.googleapis.com/css2?family=Lexend+Peta:wght@400;700&family=Montserrat:ital,wght@0,700;1,500&display=swap');
+@layer base {
+  html {
+      font-family: Montserrat;
+  }
+}
diff --git a/frontend/code/src/index.tsx b/frontend/code/src/index.tsx
@@ -13,6 +13,7 @@ const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
+  <React.StrictMode>
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Login />}></Route>
@@ -23,7 +24,7 @@ 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
@@ -10,6 +10,7 @@ module.exports = {
         poppins: ['Poppins', 'sans-serif'],
         lexend: ['Lexend Peta', 'sans-serif'],
         montserrat : ['Montserrat', 'sans-serif']
+
       },
       backgroundImage: {
         'login': "url('./components/Login/Assets/bg.gif')",