The scroll bar is updated

frontend/src/App.js

@@ -21,7 +21,7 @@ const router = createBrowserRouter([
     element: <Home></Home>,
   },
   {
-    path:'service',
+    path:'/service',
     element:<Service></Service>
   },
   {
@@ -64,10 +64,3 @@ function App() {
 }
 
 export default App;
-
-
-///todo 
-//messages not incoming when ad is showw
-//responsiveness
-//loading spinner
-//

frontend/src/components/HomeComponents/NavList.js

@@ -1,13 +1,9 @@
-import React from "react";
-import { NavLink } from "react-router-dom";
-import "./navbar.css";
 
-export default function NavList() {
-  function ScrollDown() {
-    const value = window.innerHeight;
-    window.scrollTo({ top: value, behavior: "smooth" });
-  }
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import './navbar.css';
 
+export default function NavList() {
   function onToggleMenu(e) {
     e.target.name = e.target.name === "grid" ? "close" : "grid";
 
@@ -17,24 +13,15 @@ export default function NavList() {
 
   return (
     <div>
-      <div id="menulinks" class="menulinks duration-500 md:static md:min-h-fit absolute min-h-[28vh] left-[0%] top-[-100%] md:w-auto w-[100%] flex justify-center py-5 fixed ">
+      <div id="menulinks" className="menulinks duration-500 md:static md:min-h-fit absolute min-h-[28vh] left-[0%] top-[-100%] md:w-auto w-[100%] flex justify-center py-5 fixed ">
         <ul className="flex md:flex-row flex-col md:items-center md:gap-[4vw] gap-8 text-white font-Roboto font-semibold ">
           <li>
-            <NavLink
-              to="/"
-              className={({ isActive }) => (isActive ? "text-[#FFCC33]" : "")}
-            >
+            <NavLink to="/" activeClassName="text-[#FFCC33]">
               Product
             </NavLink>
           </li>
           <li>
-            <NavLink
-              onClick={() => {
-                ScrollDown();
-              }}
-            >
-              Services
-            </NavLink>
+            <NavLink to="/service">Services</NavLink>
           </li>
           <li>
             <NavLink to="/login">Login</NavLink>
@@ -45,12 +32,12 @@ export default function NavList() {
         </ul>
       </div>
       <div className="flex items-center gap-6">
-          <ion-icon
-            name="grid"
-            class="cursor-pointer md:hidden"
-            onClick={onToggleMenu}
-          ></ion-icon>
-        </div>
+        <ion-icon
+          name="grid"
+          className="cursor-pointer md:hidden"
+          onClick={onToggleMenu}
+        ></ion-icon>
+      </div>
     </div>
   );
 }

frontend/src/pages/Home.js

@@ -1,49 +1,49 @@
-import React, { useEffect } from 'react'
-import NavBar from '../components/HomeComponents/NavBar'
-import Description from '../components/HomeComponents/Description'
-import Service from './Service'
-import { useState } from 'react'
-import LoadingPage from './LoadingPage'
+import React, { useEffect, useState } from 'react';
+import NavBar from '../components/HomeComponents/NavBar';
+import Description from '../components/HomeComponents/Description';
+import Service from './Service';
+import LoadingPage from './LoadingPage';
+import { useNavigate } from 'react-router-dom';
+import '../scrollbar.css';
 
-import { useNavigate } from 'react-router-dom'
 export default function Home() {
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(true);
 
-  const navigate=useNavigate();
-  const [isLoading,setIsLoading]=useState(true);
+  useEffect(() => {
+    const checkIfLoggedIn = async () => {
+      const cookie = localStorage.getItem('jwt');
+      const response = await fetch(`${process.env.REACT_APP_API_URL}/api/v1/users/protect`, {
+        method: 'post',
+        headers: {
+          'Content-type': 'application/json',
+          'Authorization': `Bearer ${cookie}`
+        }
+      });
 
-  useEffect(()=>{
-
-    const checkIfLoggedIn=async()=>{
-      const cookie=localStorage.getItem('jwt');
-      const response=await fetch(`${process.env.REACT_APP_API_URL}/api/v1/users/protect`,{
-      method:'post',
-      headers:{
-        'Content-type':'application/json',
-        'Authorization':`Bearer ${cookie}`
+      const data = await response.json();
+      if (data.status === 'success') {
+        navigate('/home/message', { replace: true });
+      } else {
+        setIsLoading(false);
       }
-    })
-
-    const data=await response.json();
-    if(data.status==='success')
-    {
-     navigate('/home/message',{replace:true})
-    }
-    else{
-      setIsLoading(false);
-    }
+    };
 
-  }
-    checkIfLoggedIn()
-  },[navigate])
+    checkIfLoggedIn();
+  }, [navigate]);
 
   return (
-     <div>
-      {isLoading&&<LoadingPage></LoadingPage>}
-      {!isLoading&&(<><div className='h-[100vh] px-40 py-5 max-[885px]:px-20 max-[653px]:px-14 bg-[#012478]'>
-        <NavBar/>
-        <Description></Description>
-     </div>
-     <Service></Service></>)}
-     </div>
-  )
+    <div className='scrollbar-thin h-screen overflow-y-scroll'> 
+      {isLoading && <LoadingPage />}
+      {!isLoading && (
+        <>
+          <div className='h-[100vh] px-40 py-5 max-[885px]:px-20 max-[653px]:px-14 bg-[#012478]'>
+            <NavBar />
+            <Description />
+          </div>
+          <Service />
+        </>
+      )}
+    </div>
+  );
 }

frontend/src/pages/Service.js

@@ -1,21 +1,25 @@
-import React from 'react'
-import Card from '../components/HomeComponents/Card'
+
+import React from 'react';
+import Card from '../components/HomeComponents/Card'; 
+import NavList from '../components/HomeComponents/NavList'; 
 
 export default function Service() {
   return (
-    <div className='h-[100vh] px-40 max-[885px]:px-20 max-[653px]:px-14 py-[5%] flex justify-center items-center'>
-    <div className='flex flex-col items-center'>
-      <div className='w-[60%]'>
-      <div className='text-[#384055] text-6xl text-center font-semibold font-Poppins max-[1127px]:text-5xl max-[607px]:text-4xl max-[440px]:text-3xl'>Get the best of all the features</div>
-      </div>
-      <div className=" mt-[10%] w-[70vw] max-[653px]:gap-4 grid grid-cols-1 place-items-center sm:grid-cols-2 gap-10">
-        <Card title='Simple' description='With intuitive interface,ChatBox is so simple you already know how to use it'></Card>
-        <Card title='Synced' description='ChatBox lets you acess your chats. Keeping it secured in databases'></Card>
-        <Card title='Private' description='ChatBox messages are heavily encrypted and can self-destruct'></Card>
-        <Card title='Secure' description='ChatBox keeps your messages safe from hacker attacks'></Card>
+    <div>
+      <NavList />
+      <div className='h-[100vh] px-40 max-[885px]:px-20 max-[653px]:px-14 py-[5%] flex justify-center items-center'>
+        <div className='flex flex-col items-center'>
+          <div className='w-[60%]'>
+            <div className='text-[#384055] text-6xl text-center font-semibold font-Poppins max-[1127px]:text-5xl max-[607px]:text-4xl max-[440px]:text-3xl'>Get the best of all the features</div>
+          </div>
+          <div className="mt-[10%] w-[70vw] max-[653px]:gap-4 grid grid-cols-1 place-items-center sm:grid-cols-2 gap-10">
+            <Card title='Simple' description='With intuitive interface, ChatBox is so simple you already know how to use it' />
+            <Card title='Synced' description='ChatBox lets you access your chats. Keeping it secured in databases' />
+            <Card title='Private' description='ChatBox messages are heavily encrypted and can self-destruct' />
+            <Card title='Secure' description='ChatBox keeps your messages safe from hacker attacks' />
+          </div>
+        </div>
       </div>
     </div>
-    </div>
-
-  )
+  );
 }

frontend/src/scrollbar.css

@@ -0,0 +1,26 @@
+/* src/scrollbar.css */
+.scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(1, 36, 120) transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: rgb(1, 36, 120);
+    border-radius: 10px;
+    border: 0;
+
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(1, 36, 120);
+  }
+

frontend/tailwind.config.js

@@ -12,5 +12,6 @@ module.exports = {
       'Poppins': ['Poppins', 'serif'] // Ensure fonts with spaces have " " surrounding it.
     },
   },
-  plugins: [],
+  plugins: [
+  ],
 }