css changes

db.json

@@ -1,13 +1,13 @@
 {
   "authlogin": [
     {
-      "id": 1,
+      "id": "1",
       "email": "admin@gmail.com",
       "password": "123",
       "role": "admin"
     },
     {
-      "id": 2,
+      "id": "2",
       "email": "employee@gmail.com",
       "password": "123",
       "role": "employee"
@@ -18,27 +18,27 @@
   },
   "admin": [
     {
-      "id": 1,
+      "id": "1",
       "name": "Admin User",
       "email": "adminuser@example.com"
     }
   ],
   "employee": [
     {
-      "id": 1,
+      "id": "1",
       "name": "Employee User",
       "email": "employeeuser@example.com"
     }
   ],
   "products": [
     {
-      "id": 1,
+      "id": "1",
       "name": "Product 1",
       "category": "Category 1",
       "price": 100
     },
     {
-      "id": 2,
+      "id": "2",
       "name": "Product 2",
       "category": "Category 2",
       "price": 200
@@ -46,23 +46,23 @@
   ],
   "categories": [
     {
-      "id": 1,
+      "id": "1",
       "name": "Category 1"
     },
     {
-      "id": 2,
+      "id": "2",
       "name": "Category 2"
     }
   ],
   "customers": [
     {
-      "id": 1,
+      "id": "1",
       "name": "Customer 1",
       "email": "customer1@example.com",
       "phone": "1234567890"
     },
     {
-      "id": 2,
+      "id": "2",
       "name": "Customer 2",
       "email": "customer2@example.com",
       "phone": "0987654321"
@@ -74,7 +74,7 @@
       "email": "surajbirewar001@gmail.com",
       "address": "Bavdhan, Pune",
       "mobile": "07559393995",
-      "id": 3
+      "id": "3"
     },
     {
       "name": "rahul",
@@ -83,7 +83,7 @@
       "email": "rahul001@gmail.com",
       "address": "Bavdhan, Pune",
       "mobile": "7559393995",
-      "id": 4
+      "id": "4"
     },
     {
       "name": "atharv",
@@ -92,7 +92,16 @@
       "email": "atharv@gmail.com",
       "address": "baner pune ",
       "mobile": "784365873",
-      "id": 5
+      "id": "5"
+    },
+    {
+      "id": "3682",
+      "name": "dikshant",
+      "age": "23",
+      "gender": "male",
+      "email": "dikshant001@gmail.com",
+      "address": "Bavdhan, Pune",
+      "mobile": "45654665645"
     }
   ]
 }

src/App.jsx

@@ -26,7 +26,7 @@ const App = () => {
                 <Routes>
                   <Route exact path="/" element={<LoginPage />} />
                   <Route path="/home" element={<EmployeeDashboard />} /> {/* Add HomePage route */}
-                  <Route path="/admin-dashboard" element={<PrivateRoute><AdminDashboard /></PrivateRoute>} />
+                  <Route path="/admin" element={<PrivateRoute><AdminDashboard /></PrivateRoute>} />
                   <Route path="/employee" element={<PrivateRoute><EmployeeDashboard /></PrivateRoute>} />
                   <Route path="/customers" element={<PrivateRoute><CustomerList /></PrivateRoute>} />
                   <Route path="/add-customer" element={<PrivateRoute><AddCustomer /></PrivateRoute>} />

src/components/Auth/LoginPage.css

@@ -4,8 +4,8 @@ body, html {
   margin: 0;
   padding: 0;
   font-family: 'Nunito Sans', sans-serif;
-  background-color: #09090B;
+  background-color: #ffffff;
-  color: #fff;
+  /* color: #fff; */
 }
 
 .login-page {
@@ -14,7 +14,7 @@ body, html {
   justify-content: center;
   min-height: 100vh;
   padding: 4rem;
-  background-color: #09090B;
+  background-color: #ffffff;
 }
 
 .login-container {
@@ -39,15 +39,15 @@ body, html {
   align-items: center;
 }
 
-h2 {
+h1 {
   margin-top: 0;
-  color: #F97316;
+  color: #0e355b;
   text-align: center;
 }
 
 p {
   margin-bottom: 20px;
-  color: #ccc;
+  color: #4b5563;
   text-align: center;
 }
 
@@ -82,13 +82,13 @@ input[type="password"] {
   border: 1px solid #B3B3B3; /* Darker border */
   border-radius: 4px;
   font-size: 16px;
-  background-color: #09090B; /* Dark background for input fields */
+  background-color: #e8e8e8; /* Dark background for input fields */
-  color: #fff; /* White text for input fields */
+  color: #4b5563; /* White text for input fields */
 }
 
 input[type="email"]:focus,
 input[type="password"]:focus {
-  border-color: #F97316;
+  border-color: #4b5563;
   outline: none;
 }
 
@@ -97,40 +97,40 @@ input[type="password"]:focus {
   display: flex;
   justify-content: flex-end;
   margin-bottom: 10px;
-  color: #B3B3B3;
+  color: #4b5563;
 }
 
 .forgot-password-container a {
-  color: #B3B3B3;
+  color: #4b5563;
   text-decoration: none;
 }
 
-.forgot-password-container a:hover {
+/* .forgot-password-container a:hover {
   text-decoration: underline;
-}
+} */
 
 .login-button {
   width: 100%;
   padding: 15px 30px;
   font-size: 18px;
-  background-color: #F97316;
+  background-color: #0e355b;
-  color: #09090B;
+  color: #d1d5db;
   border: none;
   border-radius: 4px;
   cursor: pointer;
 }
 
 .login-button:hover {
-  background-color: #f26502;
+  background-color: #154676;
 }
 
 .login-page input:focus {
-  border-color: #F97316; /* Orange border on focus */
+  border-color: #0e355b; /* Orange border on focus */
   outline: none;
 }
 
 .login-page a {
-  color: #B3B3B3;
+  color: #4b5563;
   text-decoration: none;
   margin-bottom: 20px;
   display: inline-block;

src/components/Auth/LoginPage.jsx

@@ -44,7 +44,7 @@ const LoginPage = () => {
     <div className="flex flex-row min-h-screen justify-center items-center">
       <div className="login-page flex items-center justify-center min-h-screen w-full md:w-1/2 lg:w-1/3 p-4">
         <div className="w-full">
-          <h2>Welcome Back</h2>
+          <h1>Welcome Back</h1>
           <p>Be among the first to experience 3D magic! Register for private alpha.</p>
           {error && <p className="error-message">{error}</p>}
           <form onSubmit={handleLogin} className="space-y-4">

src/components/admin/AdminDashboard.jsx

@@ -1,18 +1,50 @@
 import React from 'react';
-import { Button } from 'antd';
 import { useNavigate } from 'react-router-dom';
+import Sidebar from '../sidebar/Sidebar';
 import './Dashboard.css';
 
 const AdminDashboard = () => {
   const navigate = useNavigate();
 
+  const handleClick = (link) => {
+    navigate(link); // Redirect to the provided link
+  };
+
   return (
-    <div className="dashboard">
+    <div className="flex flex-row">
-      <h1 className="dashboard-title">Admin Dashboard</h1>
+      <Sidebar />
-      <div className="dashboard-content">
+      <div className="w-full flex flex-col min-h-screen text-white">
-        <Button type="primary" onClick={() => navigate('/admin/create-order')}>Create Order</Button>
+        <header className="w-full p-4 flex justify-between items-center">
-        <Button type="primary" onClick={() => navigate('/admin/view-orders')}>View Orders</Button>
+          <div className="flex items-center">
-        <Button type="primary" onClick={() => navigate('/admin/view-customers')}>View Customers</Button>
+            <h1 className="text-#0e355b text-2xl font-bold">Admin Dashboard</h1>
+          </div>
+          <div>
+            <p className="text-#4b5563">welcome back (ester howard)</p>
+          </div>
+        </header>
+        <main className="flex-1 flex flex-col items-center justify-center p-6">
+          <div className="w-full max-w-3xl text-center">
+            <img src="path_to_image" alt="Dashboard Graphic" className="w-full rounded-md mb-6" />
+            <button
+              className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
+              onClick={() => handleClick('/admin/create-order')}
+            >
+              Create Order
+            </button>
+            <button
+              className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
+              onClick={() => handleClick('/admin/view-orders')}
+            >
+              View Orders
+            </button>
+            <button
+              className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
+              onClick={() => handleClick('/admin/view-customers')}
+            >
+              View Customers
+            </button>
+          </div>
+        </main>
       </div>
     </div>
   );

src/components/admin/Dashboard.css

@@ -12,8 +12,8 @@
 
 .dashboard {
   padding: 24px;
-  background-color: #09090B;
+  background-color: #ffffff;
-  color: #F97316;
+  /* color: #; */
   height: 100vh;
   display: flex;
   flex-direction: column;
@@ -53,20 +53,20 @@
 }
 
 .dashboard-button {
-  background-color: #F97316;
+  background-color: #0e355b;
-  border-color: #F97316;
+  border-color: #0e355b;
   width: 300px;
   height: 60px;
   font-size: 16px;
 }
 
 .dashboard-link {
-  color: #09090B;
+  color: #0e355b;
 }
 
 .dashboard-button:hover {
-  background-color: #f26502;
+  background-color: #154676;
-  border-color: #f26502;
+  border-color: #154676;
 }
 
 /* Responsive Styles */

src/components/categories/CategoryList.jsx

@@ -1,37 +1,124 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
-import axiosInstance from '../../api/axiosConfig'; 
+import ProductRow from "./ProductRow";
-import Sidebar from '../sidebar/Sidebar';
+import PropTypes from "prop-types";
 
-const CategoryList = () => {
+const CategoryList = ({ className = "" }) => {
-  const [categories, setCategories] = useState([]);
+  const navigate = useNavigate();
 
-  useEffect(() => {
+  const handleNavigation = (path) => {
-    axios.get('http://localhost:3001/categories')
+    navigate(path);
-      .then(response => {
+  };
-        setCategories(response.data);
-      })
-      .catch(error => {
-        console.error('Error fetching categories:', error);
-      });
-  }, []);
 
   return (
-    <div className="min-h-screen bg-gray-900 text-white p-10">
+    <div
-      <h1 className="text-4xl font-bold mb-8">Categories</h1>
+      className={`w-full bg-primary overflow-y-auto flex flex-row items-start justify-start gap-[3px] leading-[normal] tracking-[normal] text-center text-29xl text-primary1 font-button mq1100:flex-wrap ${className}`}
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-6">
+    >
-        {categories.map(category => (
+      <div className="flex flex-col items-start justify-start py-0 pr-[33px] pl-0">
-          <Link key={category.id} to={`/products/${category.name}`}>
+        <div className="overflow-hidden flex flex-col items-start justify-start pt-4 px-5 pb-[50px] gap-[235.5px] mq450:pb-[21px] mq450:box-border mq1025:pt-5 mq1025:pb-8 mq1025:box-border">
-            <div className="bg-gray-800 rounded-lg p-6 flex flex-col items-center hover:bg-gray-700 transition">
+          <div className="flex flex-col items-start justify-start gap-[146.5px]">
-              <img src={`/images/${category.name}.png`} alt={category.name} className="w-32 h-32 mb-4" />
+            <div className="w-10 h-[147px] relative">
-              <h2 className="text-2xl font-semibold">{category.name}</h2>
+              <img
-              <p className="text-gray-400">click to view products</p>
+                className="absolute h-[27.21%] w-full top-[0%] right-[0%] bottom-[72.79%] left-[0%] max-w-full overflow-hidden max-h-full"
+                loading="lazy"
+                alt=""
+                src="/brooks-logo.svg"
+              />
+              <div className="absolute top-[70px] left-[calc(50%_-_20px)] w-10 h-[77px] hidden">
+                <div className="absolute top-[0px] left-[0px] w-full h-full hidden">
+                  <div className="absolute top-[0px] left-[0px] rounded-[50px] box-border w-full h-full border-[1px] border-solid border-secondary-accent" />
+                  <div className="absolute top-[40px] left-[3px] rounded-[50%] bg-secondary-accent w-[34px] h-[34px]" />
+                </div>
+              </div>
             </div>
-          </Link>
+            <div className="flex flex-row items-start justify-start py-0 pr-2 pl-[7px]">
-        ))}
+              <div className="flex flex-col items-start justify-start gap-[70px]">
+                <img
+                  className="w-[25px] h-[25px] relative overflow-hidden shrink-0 cursor-pointer"
+                  loading="lazy"
+                  alt="Home"
+                  src="/home-icon.svg"
+                  onClick={() => handleNavigation('/home')}
+                />
+                <img
+                  className="w-[25px] h-[25px] relative overflow-hidden shrink-0 cursor-pointer"
+                  loading="lazy"
+                  alt="Categories"
+                  src="/category-icon.svg"
+                  onClick={() => handleNavigation('/categories')}
+                />
+                <img
+                  className="w-[25px] h-[25px] relative overflow-hidden shrink-0 cursor-pointer"
+                  loading="lazy"
+                  alt="Customer List"
+                  src="/customer-list-icon.svg"
+                  onClick={() => handleNavigation('/customers')}
+                />
+                <img
+                  className="w-[25px] h-[25px] relative overflow-hidden shrink-0 cursor-pointer"
+                  loading="lazy"
+                  alt="Orders"
+                  src="/orders-icon.svg"
+                  onClick={() => handleNavigation('/employee/create-order')}
+                />
+                <img
+                  className="w-[25px] h-[25px] relative overflow-hidden shrink-0 cursor-pointer"
+                  loading="lazy"
+                  alt="Account"
+                  src="/account-icon.svg"
+                  onClick={() => handleNavigation('/account')}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-row items-start justify-start py-0 px-2">
+            <div className="flex flex-col items-start justify-start">
+              <img
+                className="w-6 h-6 relative overflow-hidden shrink-0 cursor-pointer"
+                loading="lazy"
+                alt="Logout"
+                src="/materialsymbolslogout.svg"
+                onClick={() => handleNavigation('/logout')}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col items-start justify-start pt-[46px] px-0 pb-0">
+        <div className="relative leading-[53px] lowercase font-semibold mq450:text-10xl mq450:leading-[32px] mq1025:text-19xl mq1025:leading-[42px]">
+          categories
+        </div>
+      </div>
+      <div className="w-[820px] flex flex-col items-start justify-start pt-[135px] px-0 pb-0 box-border max-w-full mq750:pt-[57px] mq750:box-border mq1025:pt-[88px] mq1025:box-border">
+        <div className="self-stretch h-[820px] overflow-y-auto shrink-0 flex flex-row flex-wrap items-start justify-start p-5 box-border relative gap-[80px_76px]">
+          <ProductRow image17="/image-17@2x.png" shirts="Shirts" />
+          <ProductRow
+            image17="/image-18@2x.png"
+            shirts="Suits"
+            propLeft="450px"
+            propTop="20px"
+          />
+          <ProductRow
+            image17="/image-6@2x.png"
+            shirts="Tuxedos"
+            propLeft="20px"
+            propTop="450px"
+          />
+          <ProductRow
+            image17="/image-28@2x.png"
+            shirts="jackets"
+            propLeft="450px"
+            propTop="450px"
+          />
+          
+        </div>
       </div>
     </div>
   );
 };
 
+CategoryList.propTypes = {
+  className: PropTypes.string,
+};
+
 export default CategoryList;

src/components/categories/ProductList.jsx

@@ -1,34 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import axios from 'axios';
-
-const ProductList = () => {
-  const { category } = useParams();
-  const [products, setProducts] = useState([]);
-
-  useEffect(() => {
-    axios.get(`http://localhost:3001/products?category=${category}`)
-      .then(response => {
-        setProducts(response.data);
-      })
-      .catch(error => {
-        console.error('Error fetching products:', error);
-      });
-  }, [category]);
-
-  return (
-    <div className="min-h-screen bg-gray-900 text-white p-10">
-      <h1 className="text-4xl font-bold mb-8">Products in {category}</h1>
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {products.map(product => (
-          <div key={product.id} className="bg-gray-800 rounded-lg p-6 flex flex-col items-center">
-            <h2 className="text-2xl font-semibold mb-4">{product.name}</h2>
-            <p className="text-gray-400">Price: ${product.price}</p>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default ProductList;

src/components/categories/ProductRow.jsx

@@ -0,0 +1,47 @@
+import { useMemo } from "react";
+import PropTypes from "prop-types";
+
+const ProductRow = ({ className = "", image17, shirts, propLeft, propTop }) => {
+  const productRowStyle = useMemo(() => {
+    return {
+      left: propLeft,
+      top: propTop,
+    };
+  }, [propLeft, propTop]);
+
+  return (
+    <div
+      className={`h-[350px] w-[350px] !m-[0] absolute top-[20px] left-[20px] rounded-3xs box-border flex flex-col items-start justify-start py-5 px-0 gap-[15px] text-center text-29xl text-tertiary font-button border-[0.7px] border-solid border-tertiary ${className}`}
+      style={productRowStyle}
+    >
+      <img
+        className="self-stretch flex-1 relative max-w-full overflow-hidden max-h-full object-cover"
+        loading="lazy"
+        alt=""
+        src={image17}
+      />
+      <div className="self-stretch flex flex-row items-start justify-center py-0 pr-[21px] pl-5">
+        <div className="relative leading-[53px] lowercase font-semibold inline-block min-w-[124px] mq450:text-10xl mq450:leading-[32px] mq1025:text-19xl mq1025:leading-[42px]">
+          {shirts}
+        </div>
+      </div>
+      <div className="flex flex-row items-start justify-start py-0 px-[66px] text-3xl">
+        <div className="relative leading-[110%] lowercase font-semibold mq450:text-lg mq450:leading-[19px]">
+          Click to view products
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ProductRow.propTypes = {
+  className: PropTypes.string,
+  image17: PropTypes.string,
+  shirts: PropTypes.string,
+
+  /** Style props */
+  propLeft: PropTypes.any,
+  propTop: PropTypes.any,
+};
+
+export default ProductRow;

src/components/customer/AddCustomer.jsx

@@ -40,8 +40,8 @@ const AddCustomer = () => {
       <div className="w-full flex flex-col min-h-screen text-white">
         <div className="min-h-screen text-gray-300 p-6">
           <div className="flex justify-between items-center mb-6">
-            <h1 className="text-2xl font-semibold text-orange-500">Add Customer</h1>
+            <h1 className="text-2xl font-semibold text-#0e355b">Add Customer</h1>
-            <Link to="/" className="text-orange-500">Skip for now</Link>
+            <Link to="/" className="text-#0e355b">Skip for now</Link>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
             <div className="space-y-6">
@@ -55,10 +55,10 @@ const AddCustomer = () => {
               </div>
               <div>
                 <Link to="/">
-                  <h2 className="text-lg font-semibold text-black-700">Customer Information</h2>
+                  <h2 className="text-lg font-semibold text-">Customer Information</h2>
                 </Link>
                 <Link to="/measurements">
-                  <h2 className="text-lg font-semibold text-black-700">Measurements</h2>
+                  <h2 className="text-lg font-semibold text-">Measurements</h2>
                 </Link>
               </div>
             </div>

src/components/customer/CustomerList.css

@@ -8,7 +8,7 @@
   }
   
   .customer-list h1 {
-    color: #F97316; 
+    color: #0e355b; 
     text-align: center;
   }
   
@@ -20,7 +20,7 @@
   
   .add-customer-button {
     padding: 10px 20px;
-    background-color: #F97316;
+    background-color: #0e355b;
     color: #09090B;
     border: none;
     cursor: pointer;
@@ -29,7 +29,7 @@
   }
   
   .add-customer-button:hover {
-    background-color: #F26502;
+    background-color: #154676;
   }
   
   .customer-table {
@@ -58,13 +58,13 @@
   }
   
   .customer-table tbody tr:hover {
-    background-color: #09090B; 
+    background-color: #0e355b; 
   }
   
   .edit-button {
     padding: 5px 10px;
-    background-color: #F26502;
+    background-color: #0e355b;
-    color: #09090B;
+    color: #ffffff;
     border: none;
     cursor: pointer;
     border-radius: 5px;
@@ -72,7 +72,7 @@
   }
   
   .edit-button:hover {
-    background-color: #F26502;
+    background-color: #154676;
   }
   
 

src/components/customer/CustomerList.jsx

@@ -32,7 +32,7 @@ const CustomerList = () => {
       <div className="w-full flex flex-col bg-#090909B text-white">
         <div className="bg-[#090909B] text-gray-300 p-6 rounded-lg">
           <div className="flex justify-between items-center mb-4">
-            <h1 className="text-xl font-semibold text-orange-500">Customers List</h1>
+            <h1 className="text-xl font-semibold text-#0e355b">Customers List</h1>
             <button
               className="bg-orange-500 text-black px-4 py-2 rounded-md text-sm"
               onClick={handleAddCustomer}

src/components/customer/CustomerMeasurements.jsx

@@ -27,8 +27,8 @@ const CustomerMeasurements = () => {
       <div className="w-full flex flex-col min-h-screen text-white">
         <div className="min-h-screen text-gray-300 p-6">
           <div className="flex justify-between items-center mb-6">
-            <h1 className="text-2xl font-semibold text-orange-500">Customer Measurements</h1>
+            <h1 className="text-2xl font-semibold text-#0e355b">Customer Measurements</h1>
-            <Link to="/CategoryList" className="text-orange-500">skip for now</Link>
+            <Link to="/CategoryList" className="text-0e355b">skip for now</Link>
           </div>
           <Form onFinish={onFinish} className="space-y-4">
             <h2 className="text-lg font-semibold text-gray-400">Upper Body Measurements</h2>

src/components/employee/Dashboard.css

@@ -1,6 +1,6 @@
 .dashboard {
   padding: 20px;
-  background-color: #f5f5f5;
+  background-color: #ffffff;
 }
 
 .dashboard-title {

src/components/employee/EmployeeDashboard.jsx

@@ -12,29 +12,29 @@ const HomePage = () => {
       <div className="w-full flex flex-col min-h-screen  text-white">
         <header className="w-full p-4 flex justify-between items-center">
           <div className="flex items-center">
-            <h1 className="text-orange-500 text-2xl font-bold">home</h1>
+            <h1 className="text-#0e355b text-2xl font-bold">home</h1>
           </div>
           <div>
-            <p className="text-gray-400">welcome back (ester howard)</p>
+            <p className="text-#4b5563">welcome back (ester howard)</p>
           </div>
         </header>
         <main className="flex-1 flex flex-col items-center justify-center p-6">
           <div className="w-full max-w-3xl text-center">
             <img src="path_to_image" alt="Suit" className="w-full rounded-md mb-6" />
             <button
-              className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
+              className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
               onClick={() => handleClick('/customers')}
             >
               create a new order
             </button>
             <button
-              className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
+              className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
               onClick={() => handleClick('')}
             >
               view orders
             </button>
             <button
-              className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
+              className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
               onClick={() => handleClick('')}
             >
               view customers

src/components/sidebar/EmployeeSidebar.jsx

@@ -5,6 +5,7 @@ import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
 } from '@ant-design/icons';
+import BrookslogoIcon from '../../assets/thob-data/BrookslogoIcon.svg';
 import HomeIcon from '../../assets/thob-data/HomeIcon.svg';
 import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg';
 import OrdersIcon from '../../assets/thob-data/OrdersIcon.svg';
@@ -35,26 +36,28 @@ const EmployeeSidebar = () => {
         width={80}
         style={{ height: '100vh' }}
       >
-        <div className="flex items-center justify-center h-16 w-16 m-5 bg-white" style={{ width: '40px', height: '40px', marginTop: '16px', marginLeft: '20px' }}>
+        <div className="flex items-center justify-center h-16 w-16 m-5 bg-white" style={{ width: '40px', height: '40px', marginTop: '16px', marginLeft: '20px' }}>   
-          <div className="text-black">t.</div>
+        <Link to="/employee" className="my-6">
+            <img src={BrookslogoIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
+          </Link>
         </div>
         <div className="flex flex-col items-center">
-          <Link to="/employee-dashboard" className="my-6">
+          <Link to="/employee" className="my-6">
             <img src={HomeIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
           </Link>
-          <Link to="/employee/categories" className="my-6">
+          <Link to="/categories" className="my-6">
             <img src={CategoriesIcon} alt="Categories" className="hover:opacity-75 sidebar-icon" />
           </Link>
-          <Link to="/employee/manage-customers" className="my-6">
+          <Link to="/customers" className="my-6">
             <img src={AddCustomerIcon} alt="Add Customer" className="hover:opacity-75 sidebar-icon" />
           </Link>
-          <Link to="/employee/orders" className="my-6">
+          <Link to="/orders" className="my-6">
             <img src={OrdersIcon} alt="Orders" className="hover:opacity-75 sidebar-icon" />
           </Link>
-          <Link to="/employee/profile" className="my-6">
+          <Link to="/profile" className="my-6">
             <img src={ProfileIcon} alt="Profile" className="hover:opacity-75 sidebar-icon" />
           </Link>
-          <Link to="/employee/logout" className="my-6">
+          <Link to="/logout" className="my-6">
             <img src={LogoutIcon} alt="Logout" className="hover:opacity-75 sidebar-icon" />
           </Link>
         </div>

src/components/sidebar/Sidebar.css

@@ -16,11 +16,11 @@
   padding-top: 20px;
 }
 
-.logo {
+/* .logo {
   font-size: 24px;
   color: #F97316;
   margin-bottom: 40px;
-}
+} */
 
 .menu {
   display: flex;
@@ -30,7 +30,7 @@
 }
 
 .menu-item {
-  color: #F97316;
+  color: #4b5563;
   margin: 10px 0;
   width: 100%;
   text-align: center;

src/index.css

@@ -10,7 +10,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #09090B;
+  background-color: #ffffff;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -20,11 +20,11 @@
 
 a {
   font-weight: 500;
-  color: #F26502;
+  color: #4b5563;
   text-decoration: inherit;
 }
 a:hover {
-  color: #F26502;
+  color: #0e355b;
 }
 
 h1 {
@@ -39,13 +39,13 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #09090B;
+  background-color: #0e355b;
   cursor: pointer;
   transition: border-color 0.25s;
   
 }
 button:hover {
-  border-color: #F26502;
+  border-color: #154676;
 }
 button:focus,
 button:focus-visible {
@@ -54,11 +54,11 @@ button:focus-visible {
 
 @media (prefers-color-scheme: light) {
   :root {
-    color: #09090B;
+    color: #ffffff;
     background-color: #ffffff;
   }
   a:hover {
-    color: #F26502;
+    color: #154676;
   }
   button {
     background-color: #f9f9f9;