Merge pull request #27 from atlp-rwanda/ft-header-nav-#187984455

#187984455 header navigation
atlp-rwanda · Jul 26, 2024 · 1186659 · 1186659
2 parents a60a1e6 + ecd5111
commit 1186659
Show file tree

Hide file tree

Showing 32 changed files with 540 additions and 281 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/phoenix.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Eagles Ecommerce</title>
   </head>

diff --git a/public/phoenix.png b/public/phoenix.png
diff --git a/src/App.css b/src/App.css
@@ -74,7 +74,7 @@ body {
 }
 .breadcrumbs .crumb a {
   color: #161616;
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 500;
 }
 
@@ -96,3 +96,20 @@ input[type="date"]::-webkit-datetime-edit-year-field:focus {
   color: white;
   outline: none;
 }
+
+.categories-list {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.active-category {
+  position: relative;
+  font-weight: bold;
+}
+.active-category::after {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 2px;
+  background-color: white;
+  margin-top: 1px;
+}
diff --git a/src/__test__/chatWindow.test.tsx b/src/__test__/chatWindow.test.tsx
@@ -2,7 +2,7 @@ import { render, screen, fireEvent } from "@testing-library/react";
 import MockAdapter from "axios-mock-adapter";
 import { configureStore } from "@reduxjs/toolkit";
 
-import ChatWindow from "../page-sections/chat/ChatWindow";
+import ChatWindow from "../page-sections/ChatWindow";
 import api from "../redux/api/api";
 import chatSlice from "../redux/reducers/chatSlice";
 

diff --git a/src/__test__/hero-test.test.tsx b/src/__test__/hero-test.test.tsx
@@ -20,15 +20,8 @@ describe("Testing HeroSection Component", () => {
 
     expect(screen.getByTestId("hero-section")).toBeInTheDocument();
     expect(screen.getByText("Your One-Stop Online Market")).toBeInTheDocument();
-    // expect(screen.getByText("Electronic Market")).toBeInTheDocument();
     expect(screen.getByText(/Welcome to eagles/i)).toBeInTheDocument();
     expect(screen.getByTestId("get-started-button")).toBeInTheDocument();
-    expect(screen.getByText("Get Started")).toBeInTheDocument();
-
-    // const navLinks = screen.getAllByRole("link");
-    // const productsLink = screen.getByText("Products");
-
-    // expect(productsLink).toBeInTheDocument();
-    // expect(productsLink).toHaveAttribute("href", "/products");
+    expect(screen.getByText("Shop Now")).toBeInTheDocument();
   });
 });
diff --git a/src/__test__/userList.test.tsx b/src/__test__/userList.test.tsx
@@ -3,7 +3,7 @@ import { Provider } from "react-redux";
 import { configureStore } from "@reduxjs/toolkit";
 import MockAdapter from "axios-mock-adapter";
 
-import UserList from "../page-sections/chat/UserList";
+import UserList from "../page-sections/UserList";
 import chatSlice from "../redux/reducers/chatSlice";
 import api from "../redux/api/api";
 

diff --git a/src/assets/eagles.svg b/src/assets/eagles.svg
diff --git a/src/assets/phoenix.png b/src/assets/phoenix.png
diff --git a/src/components/common/ProfileDropdown.tsx b/src/components/common/ProfileDropdown.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+interface ProfileDropdownProps {
+  userInfo: any;
+}
+
+const ProfileDropdown: React.FC<ProfileDropdownProps> = ({ userInfo }) => (
+  <div className="absolute right-1 md:right-8 lg:right-8 top-12 w-48 bg-white border-t border-[#DB4444] rounded-md shadow-lg z-50">
+    <ul className="py-1">
+      {userInfo ? (
+        <>
+          <li>
+            <Link
+              to="/profile"
+              className="block px-4 py-2 text-sm text-gray-700 hover:bg-slate-100"
+            >
+              Profile
+            </Link>
+          </li>
+          {userInfo.roleId === 1 && (
+            <li>
+              <Link
+                to="/orders"
+                className="block px-4 py-2 text-sm text-gray-700 hover:bg-slate-100"
+              >
+                My Orders
+              </Link>
+            </li>
+          )}
+          {(userInfo.roleId === 2 || userInfo.roleId === 3) && (
+            <li>
+              <Link
+                to={userInfo.roleId === 2 ? "/dashboard" : "/admin"}
+                className="block px-4 py-2 text-sm text-gray-700 hover:bg-slate-100"
+              >
+                My Dashboard
+              </Link>
+            </li>
+          )}
+          <li>
+            <Link
+              to="/"
+              className="block px-4 py-2 text-sm text-gray-700 hover:bg-slate-100"
+            >
+              Logout
+            </Link>
+          </li>
+        </>
+      ) : (
+        <li>
+          <Link
+            to="/login"
+            className="block px-4 py-2 text-sm text-gray-700 hover:bg-slate-100"
+          >
+            Login
+          </Link>
+        </li>
+      )}
+    </ul>
+  </div>
+);
+
+export default ProfileDropdown;
diff --git a/src/components/common/breadcrum/BreadCrum.tsx b/src/components/common/breadcrum/BreadCrum.tsx
@@ -44,8 +44,8 @@ const BreadCrums: React.FC<IBreadCrumbsProps> = ({
       );
     });
   return (
-    <div className=" px-3 flex justify-between items-center">
-      <div className="breadcrumbs flex-1">{crums}</div>
+    <div className="w-full px-[5%] flex justify-between items-center">
+      <div className="breadcrumbs flex-1 text-sm">{crums}</div>
       {location.pathname === "/products" && (
         <div className="flex items-center" onClick={handleClick}>
           <FaFilter

diff --git a/src/components/common/featured-products/FeaturedProducts.tsx b/src/components/common/featured-products/FeaturedProducts.tsx
@@ -43,8 +43,8 @@ const FeaturedProducts = () => {
     return (
       <div className="my-5">
         <div className="flex items-center gap-2 p-3">
-          <p className="w-5 h-9 bg-red-400 rounded-md" />
-          <p className="text-red-400">Our Products</p>
+          <p className="w-5 h-9 bg-[#DB4444] rounded-md" />
+          <p className="text-[#DB4444] font-medium">Our Products</p>
         </div>
         <Typography className="p-3 font-bold" variant="h5">
           Featured Products
@@ -76,8 +76,8 @@ const FeaturedProducts = () => {
   return (
     <div className="my-5">
       <div className="flex items-center gap-2 p-3">
-        <p className="w-5 h-9 bg-red-400 rounded-md" />
-        <p className="text-red-400">Our Products</p>
+        <p className="w-5 h-9 bg-[#DB4444] rounded-md" />
+        <p className="text-[#DB4444] font-medium">Our Products</p>
       </div>
       <Typography className="p-3 font-bold" variant="h5">
         Featured Products