Enhance Teacher Dashboard and AI Pages with UI Improvements and New Components

- Refactored TeacherDashboard.jsx to improve card styles and animations, enhancing user experience with hover effects and consistent styling.
- Updated AI pages (AiAgent, AiChat, AiCourseOutline, AiExplain, AiFeedback, AiPerformance, AiQuiz, AiStudyPlan, AiSummarize) to include AiPlaygroundNav for better navigation.
- Improved form styling across AI pages for consistency and better user interaction.
- Adjusted theme variables in ThemeApplier.jsx for a darker aesthetic, enhancing readability and visual appeal.
- Cleaned up unused imports and ensured consistent formatting across components.

Author: Ishita06-ai

client/package-lock.json

@@ -0,0 +1,42 @@
+import { useNavigate, useLocation } from "react-router-dom";
+
+const TABS = [
+  { id: "chat", label: "Chat", icon: "💬" },
+  { id: "quiz", label: "Quiz Generator", icon: "📝" },
+  { id: "summarize", label: "Summarize", icon: "📋" },
+  { id: "feedback", label: "Feedback", icon: "✅" },
+  { id: "study-plan", label: "Study Plan", icon: "📅" },
+  { id: "explain", label: "Explain", icon: "💡" },
+  { id: "performance", label: "Performance", icon: "📊" },
+  { id: "course-outline", label: "Course Outline", icon: "🎓" },
+  { id: "agent", label: "Agent", icon: "🤖" },
+];
+
+export default function AiPlaygroundNav() {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const current = pathname.split("/").pop() || "chat";
+
+  return (
+    <div className="mb-6 flex flex-wrap gap-2">
+      {TABS.map((tab) => {
+        const active = tab.id === current;
+        return (
+          <button
+            key={tab.id}
+            type="button"
+            onClick={() => navigate(`/ai-playground/${tab.id}`)}
+            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-semibold transition-all ${
+              active
+                ? "bg-[var(--accent)] text-white shadow-lg"
+                : "glass border border-[var(--border)]/40 text-[var(--muted)] hover:text-[var(--text)]"
+            }`}
+          >
+            <span>{tab.icon}</span>
+            <span>{tab.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

client/src/components/AiPlaygroundNav.jsx

@@ -12,8 +12,8 @@ function CourseHeader({
       icon: "📄",
       val: materials.length,
       label: "Materials",
-      gradient: "from-blue-500 to-indigo-600",
-      bgGlow: "bg-blue-500/10",
+      gradient: "from-emerald-500 to-teal-500",
+      bgGlow: "bg-emerald-500/10",
     },
     {
       icon: "📋",

client/src/components/CourseView/CourseHeader.jsx

@@ -35,11 +35,11 @@ function LiveClassCard({
         }
       : {
           label: "Scheduled",
-          dot: "bg-blue-400",
-          bg: "bg-blue-500/10",
-          text: "text-blue-400",
-          border: "border-blue-500/20",
-          bar: "from-blue-500 to-indigo-600",
+          dot: "bg-emerald-400 shadow-[0_0_8px_rgba(16,185,129,0.5)]",
+          bg: "bg-emerald-500/10",
+          text: "text-emerald-300",
+          border: "border-emerald-500/20",
+          bar: "from-emerald-500 to-teal-600",
           icon: "📅",
           cardBorder:
             "border-[var(--border)]/12 hover:border-[var(--accent)]/18",

client/src/components/CourseView/LiveClassCard.jsx

@@ -29,7 +29,7 @@ function LiveClassesTab({
       {/* Section header */}
       <div className="flex items-center justify-between mb-6">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-red-500/20 to-red-600/10 border border-red-500/15 flex items-center justify-center text-lg">
+          <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/10 border border-emerald-500/15 flex items-center justify-center text-lg">
             📹
           </div>
           <div>
@@ -40,7 +40,7 @@ function LiveClassesTab({
               {liveClasses.length}{" "}
               {liveClasses.length === 1 ? "session" : "sessions"} total
               {liveNow.length > 0 && (
-                <span className="text-red-400 font-bold ml-1">
+                <span className="text-emerald-300 font-bold ml-1">
                   · {liveNow.length} live now
                 </span>
               )}
@@ -67,8 +67,8 @@ function LiveClassesTab({
                         shadow-[0_4px_24px_-8px_rgba(0,0,0,0.06)]"
         >
           <div
-            className="w-16 h-16 rounded-3xl bg-red-500/10 border border-red-500/15 flex items-center justify-center text-3xl mx-auto mb-5
-                          shadow-[0_8px_24px_-8px_rgba(239,68,68,0.15)]"
+            className="w-16 h-16 rounded-3xl bg-emerald-500/10 border border-emerald-500/15 flex items-center justify-center text-3xl mx-auto mb-5
+                          shadow-[0_8px_24px_-8px_rgba(16,185,129,0.15)]"
           >
             📹
           </div>
@@ -94,7 +94,7 @@ function LiveClassesTab({
           {liveNow.length > 0 && (
             <section>
               <SectionLabel
-                dot="bg-red-500 animate-pulse shadow-[0_0_8px_rgba(239,68,68,0.5)]"
+                dot="bg-emerald-400 animate-pulse shadow-[0_0_8px_rgba(16,185,129,0.5)]"
                 label="Live Now"
                 count={liveNow.length}
               />
@@ -121,7 +121,7 @@ function LiveClassesTab({
           {upcoming.length > 0 && (
             <section>
               <SectionLabel
-                dot="bg-blue-400"
+                dot="bg-emerald-400"
                 label="Upcoming"
                 count={upcoming.length}
               />

client/src/components/CourseView/LiveClassesTab.jsx

@@ -20,10 +20,10 @@ const TYPE_META = {
   link: {
     icon: "🔗",
     label: "Link",
-    bg: "from-blue-500/20 to-blue-600/8",
-    text: "text-blue-400",
-    border: "border-blue-500/20",
-    iconBg: "bg-blue-500/12",
+    bg: "from-emerald-500/20 to-teal-600/8",
+    text: "text-emerald-400",
+    border: "border-emerald-500/20",
+    iconBg: "bg-emerald-500/12",
   },
   image: {
     icon: "🖼️",

client/src/components/CourseView/MaterialCard.jsx

@@ -18,7 +18,7 @@ function MaterialsTab({
       {/* Section header + Add button */}
       <div className="flex items-center justify-between mb-6">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-blue-500/20 to-indigo-600/10 border border-blue-500/15 flex items-center justify-center text-lg">
+          <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-600/10 border border-emerald-500/15 flex items-center justify-center text-lg">
             📄
           </div>
           <div>
@@ -81,8 +81,8 @@ function MaterialsTab({
                         shadow-[0_4px_24px_-8px_rgba(0,0,0,0.06)]"
         >
           <div
-            className="w-16 h-16 rounded-3xl bg-blue-500/10 border border-blue-500/15 flex items-center justify-center text-3xl mx-auto mb-5
-                          shadow-[0_8px_24px_-8px_rgba(59,130,246,0.15)]"
+            className="w-16 h-16 rounded-3xl bg-emerald-500/10 border border-emerald-500/15 flex items-center justify-center text-3xl mx-auto mb-5
+                          shadow-[0_8px_24px_-8px_rgba(16,185,129,0.15)]"
           >
             📄
           </div>

client/src/components/CourseView/MaterialsTab.jsx

@@ -113,7 +113,7 @@ function QuizzesTab({ quizzes, isTeacher, onDelete, onAddClick }) {
                       ⭐ {q.totalPoints} pts
                     </span>
                     {q.timeLimit > 0 && (
-                      <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-bold bg-blue-500/8 text-blue-400 border border-blue-500/12">
+                      <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-bold bg-emerald-500/8 text-emerald-300 border border-emerald-500/12">
                         ⏱ {q.timeLimit} min
                       </span>
                     )}

client/src/components/CourseView/QuizzesTab.jsx

@@ -1,10 +1,10 @@
 const AVATAR_COLORS = [
-  "from-violet-500/35 to-purple-500/15 text-violet-300 border-violet-500/18",
-  "from-blue-500/35 to-indigo-500/15 text-blue-300 border-blue-500/18",
   "from-emerald-500/35 to-teal-500/15 text-emerald-300 border-emerald-500/18",
+  "from-violet-500/35 to-purple-500/15 text-violet-300 border-violet-500/18",
+  "from-teal-500/35 to-cyan-500/15 text-teal-300 border-teal-500/18",
   "from-pink-500/35 to-rose-500/15 text-pink-300 border-pink-500/18",
   "from-amber-500/35 to-orange-500/15 text-amber-300 border-amber-500/18",
-  "from-cyan-500/35 to-sky-500/15 text-cyan-300 border-cyan-500/18",
+  "from-emerald-500/35 to-lime-500/15 text-emerald-300 border-emerald-500/18",
 ];
 
 function StudentsTab({ students }) {

client/src/components/CourseView/StudentsTab.jsx

@@ -55,9 +55,16 @@ const NAV_LINKS = [
       path: `/ai-playground/${t.id}`,
     })),
   },
-  { label: "Live Classes", icon: "📹", path: "/live-classes" },
+  {
+    label: "Live Classes",
+    icon: "📹",
+    isLiveClass: true   // ✅ IMPORTANT FLAG
+  }
 ];
 
+
+
+
 function Navbar({ showBack }) {
   const navigate = useNavigate();
   const location = useLocation();
@@ -169,21 +176,41 @@ function Navbar({ showBack }) {
     setThemeName(next);
   };
 
-  const handleLogout = () => {
-    logout();
-    navigate("/signin");
-  };
+  const goToLiveClass = async () => {
+  try {
+    const res = await fetch("/api/live-classes/active");
+    const data = await res.json();
+
+    if (data?.id) {
+      navigate(`/live-class/${data.id}`);
+    } else {
+      alert("No live class available");
+    }
+  } catch (err) {
+    console.error(err);
+    alert("Error fetching live class");
+  }
+};
+
+const handleLogout = () => {
+  logout();
+  navigate("/signin");
+};
 
   return (
     <nav
       data-theme={themeName}
       className={`sticky top-0 z-50 h-auto sm:h-16 px-4 sm:px-6 py-3 sm:py-0 flex items-center justify-between
                  text-[var(--text)] transition-all duration-500 ease-out
-                 ${
-                   scrolled
-                     ? "glass-heavy border-b border-[var(--border)]/60 shadow-[0_4px_30px_-8px_rgba(0,0,0,0.25)]"
-                     : "bg-transparent border-b border-transparent"
-                 }`}
+${
+  themeName === themeMap.dark
+    ? scrolled
+      ? "bg-[#0b0f1a]/80 backdrop-blur-xl border-b border-white/10 shadow-[0_8px_40px_rgba(0,0,0,0.6)]"
+      : "bg-transparent"
+    : scrolled
+    ? "glass-heavy border-b border-[var(--border)]/60 shadow-[0_4px_30px_-8px_rgba(0,0,0,0.25)]"
+    : "bg-transparent border-b border-transparent"
+}`}
     >
       {/* Left Section - Logo & Brand */}
       <div className="flex items-center gap-2 sm:gap-5 min-w-0 flex-1">
@@ -257,13 +284,16 @@ function Navbar({ showBack }) {
                   <button
                     type="button"
                     onClick={() => {
-                      if (link.dropdown) {
-                        setNavDropdown(isOpen ? null : link.label);
-                      } else {
-                        navigate(link.path);
-                        setNavDropdown(null);
-                      }
-                    }}
+  if (link.isLiveClass) {
+    goToLiveClass();
+    setNavDropdown(null);
+  } else if (link.dropdown) {
+    setNavDropdown(isOpen ? null : link.label);
+  } else {
+    navigate(link.path);
+    setNavDropdown(null);
+  }
+}}
                     className={`flex items-center gap-1.5 px-3 py-2 rounded-xl text-sm font-semibold transition-all duration-300 active:scale-95 border-none cursor-pointer
                       ${
                         active
@@ -412,10 +442,13 @@ function Navbar({ showBack }) {
               {/* Notifications Dropdown */}
               {open && (
                 <div
-                  className="absolute right-0 top-12 w-[360px] sm:w-96 rounded-2xl border border-[var(--border)]/60
-                             glass-heavy shadow-[0_20px_60px_-12px_rgba(0,0,0,0.3)] overflow-hidden z-[200] 
-                             animate-[scale-in_0.3s_cubic-bezier(0.16,1,0.3,1)_both]
-                             origin-top-right"
+                  className={`absolute right-0 top-12 w-[360px] sm:w-96 rounded-2xl border overflow-hidden z-[200]
+animate-[scale-in_0.3s_cubic-bezier(0.16,1,0.3,1)_both] origin-top-right
+${
+  themeName === themeMap.dark
+    ? "bg-[#0f172a]/90 backdrop-blur-xl border-white/10 shadow-[0_20px_60px_rgba(0,0,0,0.6)]"
+    : "border-[var(--border)]/60 glass-heavy shadow-[0_20px_60px_-12px_rgba(0,0,0,0.3)]"
+}`}
                 >
                   <div
                     className="flex items-center justify-between px-5 py-4 border-b border-[var(--border)]/40
@@ -546,9 +579,13 @@ function Navbar({ showBack }) {
                         key={link.path}
                         type="button"
                         onClick={() => {
-                          navigate(link.path);
-                          setMobileMenuOpen(false);
-                        }}
+  if (link.isLiveClass) {
+    goToLiveClass();
+  } else {
+    navigate(link.path);
+  }
+  setMobileMenuOpen(false);
+}}
                         className={`w-full text-left px-4 py-2.5 rounded-xl text-sm font-semibold flex items-center gap-2.5
                           transition-all duration-300 active:scale-95 border-none cursor-pointer
                           ${
@@ -607,4 +644,4 @@ function Navbar({ showBack }) {
   );
 }
 
-export default Navbar;
+export default Navbar;