Skip to content

refactor: update theme styles and improve ThemeApplier functionality #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adity1raut merged 1 commit into from
Apr 4, 2026
Merged

refactor: update theme styles and improve ThemeApplier functionality #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 2 additions & 19 deletions client/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,25 +39,8 @@ function App() {
<ThemeContext.Provider value={themeContextValue}>
<AuthProvider>
<ThemeApplier themeName={themeName} />
<div className="min-h-screen bg-[var(--bg)] text-[var(--text)] transition-colors duration-500 relative overflow-hidden">
{/* Animated morphing background orbs */}
<div className="pointer-events-none fixed inset-0 -z-10 opacity-70">
<div className="bg-orb bg-orb-1" />
<div className="bg-orb bg-orb-2" />
<div className="bg-orb bg-orb-3" />
</div>

{/* Subtle noise texture overlay */}
<div
className="pointer-events-none fixed inset-0 -z-10 opacity-[0.015]"
style={{
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
}}
/>

<div className="relative z-10">
<AppRoutes />
</div>
<div className="min-h-screen bg-[var(--bg)] text-[var(--text)] transition-colors duration-300">
<AppRoutes />
</div>
</AuthProvider>
</ThemeContext.Provider>
Expand Down
13 changes: 5 additions & 8 deletions client/src/components/CourseView/AssignmentCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,9 @@ function AssignmentCard({

return (
<div
className="group glass-heavy rounded-2xl border border-[var(--border)]/12 hover:border-[var(--accent)]/18 transition-all duration-400 overflow-hidden
className="group bg-[var(--surface)] rounded-2xl border border-[var(--border)] hover:border-[var(--accent)]/40 transition-all duration-300 overflow-hidden
hover:shadow-[0_16px_48px_-12px_rgba(0,0,0,0.12)]"
>
{/* Status accent bar */}
<div className={`h-[2px] w-full bg-gradient-to-r ${statusConfig.bar}`} />

<div className="p-5 sm:p-6">
<div className="flex items-start gap-4">
{/* Status icon */}
Expand Down Expand Up @@ -139,14 +136,14 @@ function AssignmentCard({

{/* Student: submission form */}
{!isTeacher && !hasSubmission && (
<div className="mt-5 pt-5 border-t border-[var(--border)]/10">
<div className="mt-5 pt-5 border-t border-[var(--border)]">
<p className="text-[11px] font-bold text-[var(--muted)] mb-2.5 uppercase tracking-[0.12em]">
Your Answer
</p>
<textarea
className="w-full px-4 py-3.5 glass-heavy border border-[var(--border)]/25 rounded-2xl text-sm outline-none
resize-y focus:border-[var(--accent)] focus:ring-3 focus:ring-[var(--accent)]/10
transition-all duration-300 text-[var(--text)] placeholder:text-[var(--muted)]/35 min-h-[100px] font-medium"
className="w-full px-4 py-3.5 bg-[var(--surface-elevated)] border border-[var(--border)] rounded-2xl text-sm outline-none
resize-y focus:border-[var(--accent)] focus:ring-2 focus:ring-[var(--accent)]/12
transition-all duration-300 text-[var(--text)] placeholder:text-[var(--muted)] min-h-[100px] font-medium"
placeholder="Write your answer here..."
value={submissionText || ""}
onChange={(e) => onSubmit(assignment.id, e.target.value, true)}
Expand Down
170 changes: 61 additions & 109 deletions client/src/components/CourseView/CourseHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,129 +12,88 @@ function CourseHeader({
icon: "📄",
val: materials.length,
label: "Materials",
gradient: "from-blue-500 to-indigo-600",
bgGlow: "bg-blue-500/10",
color: "text-blue-500",
bg: "bg-blue-500/10",
},
{
icon: "📋",
val: assignments.length,
label: "Assignments",
gradient: "from-amber-500 to-orange-600",
bgGlow: "bg-amber-500/10",
color: "text-amber-500",
bg: "bg-amber-500/10",
},
{
icon: "🧠",
val: quizzes.length,
label: "Quizzes",
gradient: "from-pink-500 to-rose-600",
bgGlow: "bg-pink-500/10",
color: "text-pink-500",
bg: "bg-pink-500/10",
},
{
icon: "📹",
val: liveClasses.length,
label: "Live",
gradient: "from-red-500 to-red-700",
bgGlow: "bg-red-500/10",
color: "text-red-500",
bg: "bg-red-500/10",
},
{
icon: "👨‍🎓",
val: course.enrollmentCount ?? 0,
label: "Students",
gradient: "from-emerald-500 to-teal-600",
bgGlow: "bg-emerald-500/10",
color: "text-emerald-500",
bg: "bg-emerald-500/10",
},
];

return (
<div className="relative rounded-[2rem] overflow-hidden mb-8 animate-[slide-down_0.6s_cubic-bezier(0.16,1,0.3,1)_both] shadow-[0_32px_80px_-16px_rgba(0,0,0,0.5)]">
{/* Main gradient background */}
<div className="absolute inset-0 bg-gradient-to-br from-[var(--accent)] via-violet-600 to-fuchsia-600" />

{/* Animated mesh overlay */}
<div
className="absolute inset-0 opacity-30"
style={{
backgroundImage: `
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(236,72,153,0.2) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(139,92,246,0.15) 0%, transparent 60%)
`,
}}
/>

{/* Floating orbs */}
<div className="absolute -top-16 -right-16 w-56 h-56 rounded-full bg-white/8 blur-3xl animate-float pointer-events-none" />
<div
className="absolute -bottom-12 -left-12 w-44 h-44 rounded-full bg-pink-400/15 blur-3xl animate-float pointer-events-none"
style={{ animationDelay: "2s" }}
/>
<div
className="absolute top-1/3 right-1/3 w-32 h-32 rounded-full bg-violet-300/10 blur-2xl animate-float pointer-events-none"
style={{ animationDelay: "4s" }}
/>

{/* Subtle grid pattern */}
<div
className="absolute inset-0 opacity-[0.04] pointer-events-none"
style={{
backgroundImage:
"linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)",
backgroundSize: "40px 40px",
}}
/>

<div className="relative px-8 py-9 sm:px-10 sm:py-10">
{/* Top: breadcrumb + subject badge */}
<div className="flex items-start justify-between gap-6 mb-6">
<div className="rounded-2xl border border-[var(--border)] bg-[var(--surface)] mb-6 overflow-hidden shadow-sm transition-colors duration-300">
<div className="px-6 py-5">
{/* Top row: breadcrumb + title */}
<div className="flex items-start justify-between gap-4 mb-4">
<div className="flex-1 min-w-0">
{/* Breadcrumb */}
<div className="flex items-center gap-2.5 mb-4">
<div className="w-8 h-8 rounded-xl bg-white/15 backdrop-blur-sm flex items-center justify-center text-base ring-1 ring-white/10">
📚
</div>
<span className="text-white/60 text-[11px] font-bold uppercase tracking-[0.15em]">
<div className="flex items-center gap-2 mb-2">
<span className="text-[11px] font-bold uppercase tracking-widest text-[var(--muted)]">
Course
</span>
{course.subject && (
<>
<span className="text-white/25 text-xs">›</span>
<span className="px-2.5 py-1 rounded-lg bg-white/10 text-white/80 text-[11px] font-bold uppercase tracking-[0.12em] backdrop-blur-sm ring-1 ring-white/10">
<span className="text-[var(--muted)] text-xs">›</span>
<span className="px-2 py-0.5 rounded-md bg-[var(--accent)]/10 text-[var(--accent)] text-[11px] font-bold uppercase tracking-wide">
{course.subject}
</span>
</>
)}
</div>

{/* Title */}
<h1 className="text-3xl sm:text-[2.5rem] font-black text-white mb-3 tracking-[-0.03em] leading-[1.1] drop-shadow-lg">
<h1 className="text-xl sm:text-2xl font-black text-[var(--text)] tracking-tight leading-tight mb-1">
{course.title}
</h1>

{/* Teacher name */}
<div className="flex items-center gap-2.5 mb-1">
<div className="w-7 h-7 rounded-full bg-white/15 backdrop-blur-sm flex items-center justify-center text-xs ring-1 ring-white/10">
👨‍🏫
</div>
<span className="text-white/75 text-sm font-semibold">
{/* Teacher */}
<div className="flex items-center gap-1.5">
<span className="text-sm">👨‍🏫</span>
<span className="text-sm text-[var(--text-secondary)] font-medium">
{course.teacher?.name}
</span>
</div>

{course.description && (
<p className="text-sm text-white/50 leading-relaxed mt-3.5 max-w-2xl line-clamp-2 font-medium">
<p className="text-sm text-[var(--muted)] leading-relaxed mt-2 max-w-2xl line-clamp-1">
{course.description}
</p>
)}
</div>

{/* Subject badge (desktop) */}
{course.subject && (
<div className="shrink-0 hidden lg:block">
<div className="px-6 py-4 bg-white/10 rounded-2xl border border-white/15 backdrop-blur-md text-center ring-1 ring-white/5">
<p className="text-white font-black text-lg tracking-wide mb-0.5">
<div className="hidden lg:flex items-center justify-center shrink-0 px-4 py-2 rounded-xl bg-[var(--accent)]/8 border border-[var(--accent)]/20 text-center">
<div>
<p className="text-[var(--accent)] font-black text-base tracking-wide">
{course.subject}
</p>
<p className="text-white/50 text-[10px] font-bold uppercase tracking-[0.15em]">
<p className="text-[var(--muted)] text-[10px] font-bold uppercase tracking-widest mt-0.5">
Subject
</p>
</div>
Expand All @@ -143,25 +102,20 @@ function CourseHeader({
</div>

{/* Stats row */}
<div className="flex flex-wrap gap-2.5 mb-6">
<div className="flex flex-wrap gap-2 mb-4">
{stats.map((s) => (
<div
key={s.label}
className="group flex items-center gap-3 px-4 py-3 bg-white/8 hover:bg-white/14 rounded-2xl
border border-white/10 hover:border-white/20 backdrop-blur-sm transition-all duration-300 cursor-default
hover:shadow-[0_8px_24px_-8px_rgba(0,0,0,0.3)]"
className={`flex items-center gap-2 px-3 py-2 rounded-xl border border-[var(--border)] ${s.bg} transition-all duration-200 cursor-default hover:-translate-y-0.5`}
>
<div
className={`w-8 h-8 rounded-xl bg-gradient-to-br ${s.gradient} flex items-center justify-center text-sm
shadow-lg group-hover:scale-110 group-hover:shadow-xl transition-all duration-300`}
>
{s.icon}
</div>
<span className="text-base">{s.icon}</span>
<div>
<p className="text-white font-black text-lg leading-none tabular-nums">
<p
className={`text-sm font-black leading-none tabular-nums ${s.color}`}
>
{s.val}
</p>
<p className="text-white/50 text-[9px] font-bold uppercase tracking-[0.15em] leading-none mt-1">
<p className="text-[9px] font-bold text-[var(--muted)] uppercase tracking-wider leading-none mt-0.5">
{s.label}
</p>
</div>
Expand All @@ -171,42 +125,40 @@ function CourseHeader({

{/* Student progress bar */}
{!isTeacher && materials.length > 0 && (
<div className="bg-white/8 rounded-2xl px-5 py-4 border border-white/10 backdrop-blur-sm">
<div className="flex items-center justify-between text-xs font-bold text-white/80 mb-3">
<span className="flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-white animate-pulse" />
<span className="uppercase tracking-[0.1em] text-[11px]">
<div className="flex items-center gap-4 px-4 py-3 bg-[var(--surface-elevated)] rounded-xl border border-[var(--border)]">
<span className="text-lg shrink-0">📊</span>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between mb-1.5">
<p className="text-xs font-bold text-[var(--text-secondary)]">
Your Progress
</p>
<span className="text-sm font-black text-emerald-500 tabular-nums">
{matProgress}%
</span>
</span>
<span className="text-white font-black text-base tabular-nums">
{matProgress}%
</span>
</div>
<div className="relative h-3 bg-white/10 rounded-full overflow-hidden">
<div
className="absolute inset-y-0 left-0 bg-gradient-to-r from-white/80 to-white rounded-full
transition-all duration-1000 ease-out shadow-[0_0_20px_rgba(255,255,255,0.4)]"
style={{ width: `${matProgress}%` }}
/>
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/15 to-transparent animate-[shimmer_2.5s_infinite]" />
</div>
<div className="h-1.5 bg-[var(--border)] rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-emerald-500 to-teal-400 rounded-full transition-all duration-700"
style={{ width: `${matProgress}%` }}
/>
</div>
<p className="text-[10px] text-[var(--muted)] mt-1">
{matProgress < 100
? "Keep going — you're doing great!"
: "🎉 All materials completed!"}
</p>
</div>
<p className="text-white/40 text-[11px] font-medium mt-2">
{matProgress < 100
? "Keep going — you're doing great!"
: "🎉 All materials completed!"}
</p>
</div>
)}

{/* Teacher badges */}
{/* Teacher mode badges */}
{isTeacher && (
<div className="flex items-center gap-2.5">
<span className="flex items-center gap-2 px-4 py-2 bg-white/10 rounded-xl border border-white/12 text-white/80 text-xs font-bold backdrop-blur-sm">
<span>🎓</span> Teaching Mode
<div className="flex items-center gap-2">
<span className="flex items-center gap-1.5 px-3 py-1.5 bg-[var(--accent)]/8 rounded-lg border border-[var(--accent)]/20 text-[var(--accent)] text-xs font-bold">
🎓 Teaching Mode
</span>
<span className="flex items-center gap-2 px-4 py-2 bg-white/10 rounded-xl border border-white/12 text-white/80 text-xs font-bold backdrop-blur-sm">
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse shadow-[0_0_8px_rgba(52,211,153,0.5)]" />
<span className="flex items-center gap-1.5 px-3 py-1.5 bg-emerald-500/8 rounded-lg border border-emerald-500/20 text-xs font-bold text-emerald-600 dark:text-emerald-400">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
Active Course
</span>
</div>
Expand Down
9 changes: 2 additions & 7 deletions client/src/components/CourseView/LiveClassCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,9 @@ function LiveClassCard({

return (
<div
className={`group glass-heavy rounded-2xl border overflow-hidden transition-all duration-400
hover:shadow-[0_16px_48px_-12px_rgba(0,0,0,0.12)] ${statusMeta.cardBorder}`}
className={`group bg-[var(--surface)] rounded-2xl border overflow-hidden transition-all duration-300
hover:shadow-[0_8px_24px_-8px_rgba(0,0,0,0.10)] ${statusMeta.cardBorder}`}
>
{/* Status bar */}
<div
className={`h-[2px] w-full bg-gradient-to-r ${statusMeta.bar} ${isLive ? "animate-pulse" : ""}`}
/>

<div className="p-5 sm:p-6 flex items-start gap-4">
{/* Icon */}
<div
Expand Down
5 changes: 1 addition & 4 deletions client/src/components/CourseView/LiveClassesTab.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,7 @@ function LiveClassesTab({
</div>

{liveClasses.length === 0 ? (
<div
className="text-center py-20 glass-heavy rounded-3xl border border-[var(--border)]/10
shadow-[0_4px_24px_-8px_rgba(0,0,0,0.06)]"
>
<div className="text-center py-20 bg-[var(--surface)] rounded-2xl border border-[var(--border)]">
<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)]"
Expand Down
Loading
Loading