From 0b97c54ddc8b73bfa75909a87a6637af5f094c59 Mon Sep 17 00:00:00 2001 From: nitin mohan Date: Tue, 7 Jul 2026 17:30:43 +0530 Subject: [PATCH 1/3] improve background colour and overall visual heirerchy of dashboard page --- app/dashboard/page.tsx | 114 ++++++++++++++---- app/globals.css | 18 +++ components/dashboard/quick-action-card.tsx | 73 ++++++----- components/dashboard/recent-activity-card.tsx | 104 +++++++++++----- components/syllabus/module-card.tsx | 32 +++-- lib/content/index.ts | 14 ++- 6 files changed, 250 insertions(+), 105 deletions(-) diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx index 5594e22..52dcc5c 100644 --- a/app/dashboard/page.tsx +++ b/app/dashboard/page.tsx @@ -6,39 +6,103 @@ import { RecentActivityCard } from "@/components/dashboard/recent-activity-card" export default function DashboardPage() { return ( -
+
+ {/* Background Layers */} +
+ {/* Light Mode Wavy Refraction Background (Properly visible at the top) */} +
+
+ {/* Top Section Divider for visual separation from Universities */}
{/* 1. Premium Welcome Banner (Full Width) */} -
-
-
-
+
+ {/* Ambient Background Glow (Dark Mode only) */} +
+
-
-
-
- Student Dashboard -
-

- Welcome Back 👋 +
+
+ Student Dashboard +
+ +
+

+ Welcome Back, Alex{" "} + 👋

-

- Pick up where you left off. Access your syllabus, study your - AI-generated notes, and practice with past year questions. +

+ Pick up where you left off. Access your personalized syllabus, + study your AI-generated notes, and practice with past year + questions.

+ + {/* Decorative Activity Pulse (Hidden on mobile) */} +
+ + {/* Faint Background Track */} + + {/* Live Pulse (subtle) */} + + +
+ + + + + + Workspace Active + +
+

-
+
{/* 2. Continue Learning Section (Left side) */}
-
+

Continue Learning

@@ -49,23 +113,25 @@ export default function DashboardPage() { View all history →
-
+
@@ -73,12 +139,12 @@ export default function DashboardPage() { {/* 3. Quick Actions (Right side grid) */}
-
+

Quick Actions

-
+
-
+ {/* Subtle Radial Glow on the Right Edge (Only in Dark Mode or very faint in Light Mode) */} +
-
-
- -
+
+ + {/* Top Section: Icon */} +
- +
-
-

+ {/* Bottom Section: Text */} +
+

{title}

-

+

{description}

diff --git a/components/dashboard/recent-activity-card.tsx b/components/dashboard/recent-activity-card.tsx index 35a1784..b754cd7 100644 --- a/components/dashboard/recent-activity-card.tsx +++ b/components/dashboard/recent-activity-card.tsx @@ -7,8 +7,10 @@ interface RecentActivityCardProps { href: string; timeAgo: string; progressText: string; - statusColor: string; + statusColor?: string; // Kept for backwards compatibility type: "book" | "file"; + progressValue: number; + theme?: "cyan" | "orange"; } export function RecentActivityCard({ @@ -17,46 +19,92 @@ export function RecentActivityCard({ href, timeAgo, progressText, - statusColor, type, + progressValue, + theme = "cyan", }: RecentActivityCardProps) { const Icon = type === "book" ? BookOpen : FileText; + // Determine dynamic colors based on theme + const isCyan = theme === "cyan"; + const glowBorderClass = isCyan + ? "group-hover:border-cyan-500/30" + : "group-hover:border-orange-500/30"; + const iconBgClass = isCyan + ? "bg-cyan-500/10 text-cyan-400 border-cyan-500/20" + : "bg-orange-500/10 text-orange-400 border-orange-500/20"; + const trackBgClass = "bg-zinc-800/50"; + const barBgClass = isCyan + ? "bg-cyan-400 shadow-[0_0_15px_rgba(34,211,238,0.56)]" + : "bg-orange-400 shadow-[0_0_15px_rgba(251,146,60,0.56)]"; + const dotClass = isCyan + ? "bg-white shadow-[0_0_10px_rgba(34,211,238,1)]" + : "bg-white shadow-[0_0_10px_rgba(251,146,60,1)]"; + const statusDotClass = isCyan ? "bg-cyan-400" : "bg-orange-400"; + return ( -
- -
-
-
- +
+ {/* Header Row */} +
+
+
+ +
+
+

+ {title} +

+

+ {subtitle} +

+
-
-

- {title} -

-

- {subtitle} -

+ +
+
+ + {timeAgo} +
+ + {progressValue}% complete +
-
- - {timeAgo} -
-
-
-
- - {progressText} + {/* Full-Width Progress Bar Row */} +
+
+ {/* Glowing Knob */} +
-
- Resume{" "} - + + {/* Footer Row */} +
+
+ + {progressText} +
+
+ Resume{" "} + +
diff --git a/components/syllabus/module-card.tsx b/components/syllabus/module-card.tsx index 806f27c..94e055c 100644 --- a/components/syllabus/module-card.tsx +++ b/components/syllabus/module-card.tsx @@ -104,18 +104,26 @@ export default function ModuleCard({ {/* TOPICS - ALWAYS VISIBLE */}
- {(module.topics || []).map((topic) => ( - e.stopPropagation()} - className="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition hover:border-blue-500/40 hover:text-blue-500" - > - {topic.title} - - ))} + {(module.topics || []).map((topic, index) => { + const isString = typeof topic === "string"; + const topicId = isString ? (topic as string) : (topic as any).id; + const topicTitle = isString + ? (topic as string) + : (topic as any).title; + + return ( + e.stopPropagation()} + className="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition hover:border-blue-500/40 hover:text-blue-500" + > + {topicTitle} + + ); + })}
diff --git a/lib/content/index.ts b/lib/content/index.ts index a073467..6f9a4c8 100644 --- a/lib/content/index.ts +++ b/lib/content/index.ts @@ -98,11 +98,21 @@ export async function getTopicById( for (const syllabusModule of modules) { const topics = syllabusModule.topics ?? []; - const topic = topics.find((item) => item.id === topicId); + const topic = topics.find((item) => { + if (typeof item === "string") { + return item === topicId; + } + return (item as any).id === topicId; + }); if (topic) { + const topicObj = + typeof topic === "string" + ? ({ id: topic, title: topic, slug: topic, displayOrder: 0 } as Topic) + : (topic as Topic); + return { - topic, + topic: topicObj, module: { id: syllabusModule.id, number: syllabusModule.number, From f37cbc7072d54c5e7dee5ce8a116de67361e43da Mon Sep 17 00:00:00 2001 From: nitin mohan Date: Tue, 7 Jul 2026 17:37:18 +0530 Subject: [PATCH 2/3] fixed eslint --- components/dashboard/quick-action-card.tsx | 2 +- components/dashboard/recent-activity-card.tsx | 7 ------- components/syllabus/module-card.tsx | 4 ++-- lib/content/index.ts | 2 +- 4 files changed, 4 insertions(+), 11 deletions(-) diff --git a/components/dashboard/quick-action-card.tsx b/components/dashboard/quick-action-card.tsx index 995c814..e3a6461 100644 --- a/components/dashboard/quick-action-card.tsx +++ b/components/dashboard/quick-action-card.tsx @@ -1,5 +1,5 @@ import Link from "next/link"; -import { ArrowRight, LucideIcon } from "lucide-react"; +import { LucideIcon } from "lucide-react"; type ColorVariant = "blue" | "indigo" | "emerald" | "purple"; diff --git a/components/dashboard/recent-activity-card.tsx b/components/dashboard/recent-activity-card.tsx index b754cd7..168b7a3 100644 --- a/components/dashboard/recent-activity-card.tsx +++ b/components/dashboard/recent-activity-card.tsx @@ -27,13 +27,6 @@ export function RecentActivityCard({ // Determine dynamic colors based on theme const isCyan = theme === "cyan"; - const glowBorderClass = isCyan - ? "group-hover:border-cyan-500/30" - : "group-hover:border-orange-500/30"; - const iconBgClass = isCyan - ? "bg-cyan-500/10 text-cyan-400 border-cyan-500/20" - : "bg-orange-500/10 text-orange-400 border-orange-500/20"; - const trackBgClass = "bg-zinc-800/50"; const barBgClass = isCyan ? "bg-cyan-400 shadow-[0_0_15px_rgba(34,211,238,0.56)]" : "bg-orange-400 shadow-[0_0_15px_rgba(251,146,60,0.56)]"; diff --git a/components/syllabus/module-card.tsx b/components/syllabus/module-card.tsx index 94e055c..72e5bd7 100644 --- a/components/syllabus/module-card.tsx +++ b/components/syllabus/module-card.tsx @@ -106,10 +106,10 @@ export default function ModuleCard({
{(module.topics || []).map((topic, index) => { const isString = typeof topic === "string"; - const topicId = isString ? (topic as string) : (topic as any).id; + const topicId = isString ? (topic as string) : (topic as { id: string }).id; const topicTitle = isString ? (topic as string) - : (topic as any).title; + : (topic as { title: string }).title; return ( Date: Tue, 7 Jul 2026 17:37:59 +0530 Subject: [PATCH 3/3] fixed format --- components/syllabus/module-card.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/syllabus/module-card.tsx b/components/syllabus/module-card.tsx index 72e5bd7..3fb4fae 100644 --- a/components/syllabus/module-card.tsx +++ b/components/syllabus/module-card.tsx @@ -106,7 +106,9 @@ export default function ModuleCard({
{(module.topics || []).map((topic, index) => { const isString = typeof topic === "string"; - const topicId = isString ? (topic as string) : (topic as { id: string }).id; + const topicId = isString + ? (topic as string) + : (topic as { id: string }).id; const topicTitle = isString ? (topic as string) : (topic as { title: string }).title;