Fix: REVAMP THE NOTIFICATION PAGE ON THE EMPLOYER DASHBOARD TO LOOK L…

…IKE THE DESIGN (#213) * Fix: REVAMP THE NOTIFICATION PAGE ON THE EMPLOYER DASHBOARD TO LOOK LIKE THE DESIGN * Fix: made change to fit figma design * Fix changes * Fixed chaanges * commented unsused varables * Fix: added changes * Removed Logo * Update notifications.tsx
skill-mind · Mar 2, 2025 · bf1aa36 · bf1aa36
1 parent 7c2b56a
commit bf1aa36
Show file tree

Hide file tree

Showing 19 changed files with 340 additions and 176 deletions.
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -3,9 +3,15 @@ import { Metadata } from "next";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import { skillNetGoals } from "../utils/data";
+import { Ubuntu } from "next/font/google";
 import InformationCard from "@/components/InformationCard";
 
 
+const ubuntu = Ubuntu({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+})
+
 export const metadata: Metadata = {
   title: "About",
   description: "Learn about SkillNet, a decentralized platform for job seekers and employers.",
@@ -19,9 +25,9 @@ export default function About() {
   return (
     <main className="bg-[#101110]">
       <Navbar />
-      <section className="flex justify-center items-center py-10 mt-10 px-4">
+      <section className={`${ubuntu.className} flex justify-center items-center py-10 mt-10 px-4`}>
         <div className="w-full max-w-[1256px] mx-auto flex flex-col items-center gap-6 py-10 md:py-[100px] px-4 md:px-[80px]">
-          <h1 className="text-[28px] md:text-[40px] text-center font-bold uppercase leading-tight w-full md:w-[331px]">
+          <h1 className="text-[28px] md:text-[40px] text-center font-bold uppercase leading-tight w-full md:w-[331px] text-[#FCFCFC]">
             About Skillnet
           </h1>
           <p className="w-full max-w-[600px] pt-5 sm:max-w-[934px] mx-auto text-left sm:text-justify lg:text-center text-sm md:text-lg leading-8 md:leading-10 text-[#ABABAB] px-4">

diff --git a/src/app/contact-us/page.tsx b/src/app/contact-us/page.tsx
@@ -3,6 +3,7 @@ import Footer from "@/components/Footer";
 import Navbar from "@/components/Navbar";
 import React from "react";
 import Form from "./components/form";
+import { Ubuntu } from "next/font/google";
 
 export const metadata: Metadata = {
   title: "Contact Us",
@@ -17,6 +18,10 @@ export const metadata: Metadata = {
 };
 
 
+const ubuntu = Ubuntu({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+})
 
 
 const page = () => {
@@ -28,7 +33,7 @@ const page = () => {
   <>
     <Navbar/>
 
-   <section className="mt-20">
+   <section className={`mt-20 ${ubuntu.className}`}>
       <div className="w-full mx-auto flex flex-col items-center gap-6 py-14 px-7 md:py-[100px] md:px-[80px] mt-10 ">
 
       <div className="text-center ">

diff --git a/src/app/dashboard/employer/components/employer-sidebar.tsx b/src/app/dashboard/employer/components/employer-sidebar.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, Headset } from "lucide-react";
 import Image from "next/image";
 import { ReactNode, useContext } from "react";
 import profilePic from "@/public/img/dashboardProfile.svg";
@@ -10,6 +10,7 @@ import supportIcon from "@/public/img/supportIcon.svg";
 import paymentIcon from "@/public/img/tutor icon/walletDashboard.svg";
 import { DashBoardContext } from "@/app/useContext/dashboardContext";
 import ChatBotButton from "@/components/ChatBotButton";
+import Link from "next/link";
 
 
 interface NavItemProps {
@@ -38,8 +39,8 @@ export function Sidebar() {
     useContext(DashBoardContext);
 
   return (
-    <aside className="w-64 border-r min-h-[90vh] bg-[#161716] border-gray-800 overflow-y-auto">
-      <div className="p-4 h-[100%] overflow-y-auto scrollbar-hide scroll-smooth">
+    <aside className="w-64 border-r min-h-[90vh] bg-[#161716] border-gray-800 overflow-y-auto flex flex-col justify-between">
+      <div className="p-4 overflow-y-auto scrollbar-hide scroll-smooth">
         <div
           onClick={() => onSectionChange("profile")}
           className={`flex relative cursor-pointer items-center gap-3 mb-8 border rounded-md p-2 border-[#2F302F] hover:bg-[#FFFFFF1A] ${
@@ -100,10 +101,20 @@ export function Sidebar() {
           active={activeSection === "payments"}
           onClick={() => onSectionChange("payments")}
           />
-
-          <ChatBotButton />
         </nav>
       </div>
+
+      <div className="p-4">
+        <Link
+          href="/dashboard/employer/support"
+          className="flex items-center gap-x-3 py-2 px-3 text-zinc-400 hover:text-white hover:bg-white/10 rounded-lg transition-all duration-300"
+        >
+          <Headset />
+          <span className="font-medium">Support</span>
+        </Link>
+
+        <ChatBotButton />
+      </div>
     </aside>
   );
 }
diff --git a/src/app/dashboard/employer/components/header.tsx b/src/app/dashboard/employer/components/header.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import React, { useState, useEffect, useContext } from "react";
+import { useState, useEffect, useContext } from "react";
 import { Menu, MoreVertical, Search, X } from "lucide-react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+// import { usePathname } from "next/navigation";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
 import pen from "@/public/paint-brush-01.png";
@@ -13,35 +13,35 @@ import Avatar from "@/public/img/Avatar.png";
 import { DashBoardContext } from "@/app/useContext/dashboardContext";
 
 function Header() {
-  const { activeSection, activeNotificationTab } = useContext(DashBoardContext);
-  const pathname = usePathname();
+  const { activeSection } = useContext(DashBoardContext);
+  // const pathname = usePathname();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-  const getNavigation = () => {
+  // Dynamic navigation based on active section
+   const getNavigation = () => {
     switch (activeSection) {
       case "home":
         return [
           { name: "Home", href: "/account/dashboard/employer" },
           { name: "Dashboard", href: "/account/dashboard/employer" },
-          { name: "Profile", href: "/account/dashboard/employer" },
         ];
       case "job openings":
-        return [{ name: "Job Openings", href: "/account/dashboard/employer" }];
+        return [{ name: "Job Openings", href: "/account/dashboard/employer" },  { name: "Dashboard", href: "/account/dashboard/employer" }];
       case "notifications":
-        return [{ name: "Notifications", href: "/account/dashboard/employer" }];
-      case "payments":
-        return [
-          {
-            name: "Payment",
-            href: "/account/dashboard/employer/payment",
-            active: true,
-          },
-          {
-            name: "Total Earnings",
-            href: "/account/dashboard/employer/payment",
-            active: false,
-          },
-        ];
+        return [{ name: "Notifications", href: "/account/dashboard/employer" }, { name: "Question", href: "/account/dashboard/employer" }];
+        case "payments":
+          return [
+            {
+              name: "Payment",
+              href: "/account/dashboard/employer/payment",
+              active: true,
+            },
+            {
+              name: "Total Earnings",
+              href: "/account/dashboard/employer/payment",
+              active: false,
+            },
+          ];
       default:
         return [{ name: "Home", href: "/account/dashboard/employer" }];
     }
@@ -56,41 +56,7 @@ function Header() {
   return (
     <header className="bg-[#101110] py-5">
       <div className="flex items-center justify-between pl-4 md:px-24 pr-8 px-3 py-3 sm:px-6 ">
-        <div className="flex items-center gap-2">
-          <nav className="hidden lg:flex items-center justify-center gap-4">
-            {navigation.map((item, index) => (
-              <div key={item.name} className="flex items-center">
-                {index > 0 && activeSection === "payments" ? (
-                  <span className="text-gray-400 mx-2">|</span>
-                ) : (
-                  index > 0 && (
-                    <div className="bg-[#1D1D1C] w-[3px] h-4 rounded-lg mx-2"></div>
-                  )
-                )}
-                <Link
-                  href={item.href}
-                  className={cn(
-                    "text-sm font-medium hover:text-[#FCFCFC]",
-                    pathname === item.href || ("active" in item && item.active)
-                      ? "text-[#FCFCFC]"
-                      : "text-[#ABABAB]"
-                  )}
-                >
-                  {item.name}
-                </Link>
-                {activeSection === "notifications" &&
-                  item.name === "Notifications" && (
-                    <>
-                      <div className="bg-[#1D1D1C] w-[3px] h-4 rounded-lg mx-2"></div>
-                      <span className="text-white text-xs font-bold">
-                        {activeNotificationTab}
-                      </span>
-                    </>
-                  )}
-              </div>
-            ))}
-          </nav>
-        </div>
+
 
         {/* Mobile menu button */}
         <button
@@ -100,6 +66,27 @@ function Header() {
           {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
         </button>
 
+        {/* Desktop Navigation */}
+        <nav className="hidden lg:flex items-center justify-center gap-4">
+          {navigation.map((item, index) => (
+            <div key={item.name} className="flex items-center">
+              {index > 0 && (
+                <div className="bg-[#1D1D1C] w-[3px] h-4 rounded-lg mx-2"></div>
+              )}
+              <Link
+                href={item.href}
+                className={cn(
+                  "text-sm font-medium hover:text-[#FCFCFC]",
+                  index === 0 ? "text-[#FCFCFC]" : "text-[#ABABAB]"
+                )}
+              >
+                {item.name}
+              </Link>
+
+            </div>
+          ))}
+        </nav>
+
         <div className="hidden lg:flex items-center gap-4">
           <div className="relative flex items-center gap-2">
             <Image
@@ -120,15 +107,15 @@ function Header() {
             />
           </div>
 
-          {(activeSection === "notifications" ||
-            activeSection === "payments") && (
-            <button className="px-4 py-2 bg-transparent text-gray-400 hover:text-white rounded-lg border border-[#1F1F1F] outline-none flex items-center gap-2 transition-colors">
-              <Image src={pen} width={18} height={18} alt="pen" />
-              <span>Create Courses</span>
+          {/* Create Courses button - Only for Notifications Page */}
+          {activeSection === "notifications" && (
+            <button className="px-4 py-2 bg-transparent  text-white rounded-lg border border-[#1F1F1F] outline-none flex items-center gap-2">
+              <Image src={pen} width={20} height={20} alt="pen" />
+              Create Courses
             </button>
           )}
 
-          <div className="flex items-center gap-2 hover:bg-[#FFFFFF1A] bg-[#161716] p-2 rounded-lg">
+          <div className="flex items-center gap-2 hover:bg-[#FFFFFF1A]  bg-[#161716] p-2 rounded-lg">
             <Image
               src={Avatar}
               width={25}

diff --git a/src/app/dashboard/employer/notifications/components/Announcements.tsx b/src/app/dashboard/employer/notifications/components/Announcements.tsx
@@ -23,13 +23,13 @@ const Announcements = () => {
           className="w-full flex justify-between items-center p-6 bg-[#161716] rounded-lg "
         >
           <div className="flex items-center gap-[18px] ">
-            <span className=" h-12 w-12 rounded-full bg-[#2D2E2D] flex-shrink-0 flex items-center justify-center ">
+            <span className=" md:h-12 md:w-12 w-6 h-6 rounded-full bg-[#2D2E2D] flex-shrink-0 flex items-center justify-center ">
               <Image
                 src={speakerIcon}
                 alt="students"
                 height={100}
                 width={100}
-                className="w-6 h-6 object-contain "
+                className="md:w-6 md:h-6 w-3 h-3 object-contain "
               />
             </span>
             <div>

diff --git a/src/app/dashboard/employer/notifications/components/Newrequests.tsx b/src/app/dashboard/employer/notifications/components/Newrequests.tsx
@@ -2,7 +2,22 @@ import questionIcon from "@/public/questionsimage.svg";
 import Image from "next/image";
 import Link from "next/link";
 
-const questionsNotifications = [
+// Helper function to truncate text
+interface Notification {
+  image: string;
+  time: string;
+  category: string;
+  content: string;
+}
+
+const truncateText = (text: string, maxLength: number): string => {
+  if (text.length > maxLength) {
+    return text.substring(0, maxLength) + "...";
+  }
+  return text;
+};
+
+const questionsNotifications: Notification[] = [
   {
     image: questionIcon,
     time: "15 mins",
@@ -46,7 +61,7 @@ const Newrequests = () => {
       {questionsNotifications.map((questionsNotification, index) => (
         <div
           key={index}
-          className="w-full flex justify-between items-center p-6 bg-[#161716] rounded-lg "
+          className="w-full flex flex-col sm:flex-row justify-between items-start sm:items-center p-6 bg-[#161716] rounded-lg mb-4"
         >
           <div className="flex items-start sm:items-center justify-start gap-2 sm:gap-[31px]">
             <div className="w-9 h-9 sm:w-[41px] sm:h-[41px] rounded-full flex items-center justify-center overflow-hidden flex-shrink-0">
@@ -60,35 +75,35 @@ const Newrequests = () => {
             </div>
 
             <div className="flex flex-col gap-2 sm:gap-3">
-              <h4 className="text-[#6E6E6E] text-xs sm:text-base font-medium flex flex-wrap items-center">
+              <div className="text-[#6E6E6E] text-xs sm:text-base font-medium flex flex-wrap items-center">
                 Submitted {questionsNotification.time} ago
                 <div className="bg-[#2F302F] w-[3px] h-3 mx-2 sm:mx-3 hidden sm:block"></div>
-                <span className="text-[#3D5682] text-xs sm:text-base ml-0 sm:ml-0 mt-1 sm:mt-0">
+                <span className="text-[#3D5682] text-xs sm:text-base ml-1">
                   {questionsNotification.category}
                 </span>
-              </h4>
+              </div>
 
-              <p className="text-[#CCCCCC] text-sm sm:text-base font-medium max-w-full ">
-                {questionsNotification.content}
+              <p className="text-[#CCCCCC] text-sm sm:text-base font-medium max-w-full">
+                {truncateText(questionsNotification.content, 60)}
               </p>
             </div>
           </div>
-
-          <Link
-            href={"/dashboard/tutor/question"}
-            className="self-start sm:self-auto"
-          >
-            <button className="mx-4 border-[1px] border-[#2D2E2D] rounded-lg py-2 sm:py-3 px-4 sm:px-[18px] transition duration-200 ease-in-out active:scale-95 text-white font-bold text-xs sm:text-sm whitespace-nowrap mt-2 sm:mt-0">
-              Reject
-            </button>
-            <button className="mx-4 border-[1px] border-[#2D2E2D] rounded-lg py-2 sm:py-3 px-4 sm:px-[18px] transition duration-200 ease-in-out active:scale-95 text-white font-bold text-xs sm:text-sm whitespace-nowrap mt-2 sm:mt-0">
-              Accept
-            </button>
-          </Link>
+          <div className="flex gap-x-2 mt-4 sm:mt-0">
+            <Link href={"/dashboard/tutor/question"} className="self-start sm:self-auto">
+              <button className="border-[1px] border-[#2D2E2D] rounded-lg w-[8.75rem] h-[3rem] flex justify-center items-center transition duration-200 ease-in-out active:scale-95 text-white font-bold text-xs sm:text-sm whitespace-nowrap">
+                Reject
+              </button>
+            </Link>
+            <Link href={"/dashboard/tutor/question"} className="self-start sm:self-auto">
+              <button className="border-[1px] border-[#2D2E2D] rounded-lg w-[8.75rem] h-[3rem] flex justify-center items-center transition duration-200 ease-in-out active:scale-95 text-white font-bold text-xs sm:text-sm whitespace-nowrap">
+                Accept
+              </button>
+            </Link>
+          </div>
         </div>
       ))}
     </>
   );
 };
 
-export default Newrequests;
+export default Newrequests;
diff --git a/src/app/dashboard/employer/notifications/components/Payments.tsx b/src/app/dashboard/employer/notifications/components/Payments.tsx
@@ -18,16 +18,16 @@ const Payments = () => {
       {paymentNotifications.map((paymentNotification, index) => (
         <div
           key={index}
-          className="w-full flex flex-col md:flex-row justify-start items-start md:justify-between md:items-center py-3 border-b-[1px] border-[#2D2E2D] "
+          className="w-full flex flex-row justify-between items-center py-3 border-b-[1px] border-[#2D2E2D] "
         >
           <div className="flex items-center gap-[18px] ">
-            <span className=" h-12 w-12 rounded-full bg-[#2D2E2D] flex items-center flex-shrink-0 justify-center ">
+            <span className="md:h-12 md:w-12 w-6 h-6 rounded-full bg-[#2D2E2D] flex items-center flex-shrink-0 justify-center ">
               <Image
                 src={walletIcon}
                 alt="students"
                 height={100}
                 width={100}
-                className="w-6 h-6 object-contain "
+                className="md:w-6 md:h-6 w-3 h-3 object-contain "
               />
             </span>
             <div>