Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement dark mode support by adjusting background and text colors across various pages and components.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-02-26 16:57:28 -03:00
parent 947abcb0bc
commit e5373919c9
56 changed files with 536 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/studio/src/app/courses/[id]/analytics/advanced/page.tsx
+18 -18
View File
@@ -50,27 +50,27 @@ export default function AdvancedAnalyticsPage({ params }: { params: { id: string
}, [id, user]);
if (loading) return (
<div className="min-h-screen bg-gray-900 flex items-center justify-center">
<div className="min-h-screen bg-transparent flex items-center justify-center">
<div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
</div>
);
if (error || !course || !analytics) return (
<div className="min-h-screen bg-[#0f1115] text-white p-20 text-center flex flex-col items-center justify-center gap-6">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-20 text-center flex flex-col items-center justify-center gap-6">
<div className="text-gray-400">{error || "Data unavailable"}</div>
<button onClick={() => router.back()} className="btn-premium px-8">Go Back</button>
</div>
);
return (
<div className="min-h-screen bg-[#0f1115] text-white p-8">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="flex items-center justify-between mb-12">
<div className="flex items-center gap-4">
<button
onClick={() => router.push(`/courses/${id}/analytics`)}
className="p-2 hover:bg-white/10 rounded-full transition-colors"
className="p-2 hover:bg-black/10 dark:hover:bg-white/10 rounded-full transition-colors"
>
<ArrowLeft className="w-6 h-6" />
</button>
@@ -78,7 +78,7 @@ export default function AdvancedAnalyticsPage({ params }: { params: { id: string
<h1 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-indigo-400 bg-clip-text text-transparent">
Advanced Insights
</h1>
<p className="text-gray-400 mt-1">Cohort analysis and student retention for {course.title}</p>
<p className="text-gray-600 dark:text-gray-400 mt-1">Cohort analysis and student retention for {course.title}</p>
</div>
</div>
</div>
@@ -92,28 +92,28 @@ export default function AdvancedAnalyticsPage({ params }: { params: { id: string
<Layers className="text-purple-500" />
Cohort Completion
</h2>
<div className="flex items-center gap-2 text-xs font-bold text-gray-500 uppercase tracking-widest bg-white/5 px-4 py-2 rounded-xl">
<div className="flex items-center gap-2 text-xs font-bold text-gray-500 uppercase tracking-widest bg-black/5 dark:bg-white/5 px-4 py-2 rounded-xl">
<Filter size={14} /> Grouped by Month
</div>
</div>
<div className="overflow-hidden rounded-3xl border border-white/10 bg-white/[0.02]">
<div className="overflow-hidden rounded-3xl border border-black/10 dark:border-white/10 bg-black/[0.02] dark:bg-white/[0.02]">
<table className="w-full text-left border-collapse">
<thead>
<tr className="bg-white/5">
<tr className="bg-black/5 dark:bg-white/5">
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Cohort (Enrollment Month)</th>
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Students</th>
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Avg. Completion Rate</th>
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Engagement Status</th>
</tr>
</thead>
<tbody className="divide-y divide-white/5">
<tbody className="divide-y divide-black/5 dark:divide-white/5">
{analytics.cohorts.length === 0 ? (
<tr>
<td colSpan={4} className="p-12 text-center text-gray-600 italic">No cohort data available yet.</td>
</tr>
) : analytics.cohorts.map((cohort) => (
<tr key={cohort.period} className="hover:bg-white/[0.02] transition-colors">
<tr key={cohort.period} className="hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors">
<td className="p-6 font-bold flex items-center gap-3">
<Calendar size={16} className="text-purple-400" />
{cohort.period}
@@ -161,17 +161,17 @@ export default function AdvancedAnalyticsPage({ params }: { params: { id: string
<div key={item.lesson_id} className="group relative">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-4">
<div className="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center text-[10px] font-black text-gray-500">
<div className="w-8 h-8 rounded-lg bg-black/5 dark:bg-white/5 flex items-center justify-center text-[10px] font-black text-gray-500">
{index + 1}
</div>
<span className="font-bold text-gray-300">{item.lesson_title}</span>
<span className="font-bold text-gray-900 dark:text-gray-300">{item.lesson_title}</span>
</div>
<div className="text-right">
<div className="text-sm font-black text-white">{item.student_count} Students</div>
<div className="text-sm font-black text-gray-900 dark:text-white">{item.student_count} Students</div>
<div className="text-[10px] font-bold text-gray-600 uppercase tracking-widest">{Math.round(percentage)}% Retention</div>
</div>
</div>
<div className="h-4 w-full bg-white/5 rounded-lg overflow-hidden border border-white/5">
<div className="h-4 w-full bg-black/5 dark:bg-white/5 rounded-lg overflow-hidden border border-black/5 dark:border-white/5">
<div
className={`h-full transition-all duration-1000 ${percentage > 80 ? 'bg-indigo-500' :
percentage > 50 ? 'bg-indigo-600/70' :
@@ -199,7 +199,7 @@ export default function AdvancedAnalyticsPage({ params }: { params: { id: string
Engagement Heatmap
</h2>
<select
className="bg-white/5 border border-white/10 rounded-xl px-4 py-2 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all"
className="bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-xl px-4 py-2 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all"
onChange={(e) => {
const lessonId = e.target.value;
if (lessonId) {
@@ -220,7 +220,7 @@ export default function AdvancedAnalyticsPage({ params }: { params: { id: string
</div>
{heatmapData.length > 0 ? (
<div className="p-8 rounded-3xl border border-white/10 bg-white/[0.02] space-y-8">
<div className="p-8 rounded-3xl border border-black/10 dark:border-white/10 bg-black/[0.02] dark:bg-white/[0.02] space-y-8">
<p className="text-sm text-gray-500 uppercase font-black tracking-widest">
Playback concentration by second (Total Interactions: {heatmapData.reduce((acc: number, p: HeatmapPoint) => acc + Number(p.count), 0)})
</p>
@@ -242,14 +242,14 @@ export default function AdvancedAnalyticsPage({ params }: { params: { id: string
className="flex-1 bg-orange-500/20 hover:bg-orange-500 transition-all rounded-t-[1px] relative group/bar"
style={{ height: `${(count / maxCount) * 100}%` }}
>
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-black text-[10px] font-black rounded opacity-0 group-hover/bar:opacity-100 whitespace-nowrap z-10 pointer-events-none">
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 dark:bg-black text-[10px] font-black rounded opacity-0 group-hover/bar:opacity-100 whitespace-nowrap z-10 pointer-events-none transition-opacity">
{Math.floor(i / 60)}:{(i % 60).toString().padStart(2, '0')} - {count} views
</div>
</div>
));
})()}
</div>
<div className="flex justify-between text-[10px] font-black text-gray-600 uppercase tracking-widest pt-4 border-t border-white/5">
<div className="flex justify-between text-[10px] font-black text-gray-600 uppercase tracking-widest pt-4 border-t border-black/5 dark:border-white/5">
<span>0:00 Start</span>
<span>Video Timeline</span>
<span>End</span>
web/studio/src/app/courses/[id]/analytics/page.tsx
+11 -11
View File
@@ -67,24 +67,24 @@ export default function AnalyticsPage() {
}, [id, user, router, selectedCohortId]);
if (loading) return (
<div className="min-h-screen bg-gray-900 flex items-center justify-center">
<div className="min-h-screen bg-transparent flex items-center justify-center">
<div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
</div>
);
if (authError) return (
<div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-20 text-center gap-6">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white flex flex-col items-center justify-center p-20 text-center gap-6">
<div className="w-20 h-20 bg-red-500/10 rounded-full flex items-center justify-center text-red-500">
<AlertTriangle size={40} />
</div>
<h2 className="text-2xl font-bold">Access Denied</h2>
<p className="text-gray-400 max-w-md">{authError}</p>
<p className="text-gray-600 dark:text-gray-400 max-w-md">{authError}</p>
<button onClick={() => router.back()} className="btn-premium px-8 py-3">Go Back</button>
</div>
);
if (!course || !analytics) return (
<div className="min-h-screen bg-gray-900 text-white p-20 text-center">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-20 text-center">
Course not found or analytics unavailable.
</div>
);
@@ -94,7 +94,7 @@ export default function AnalyticsPage() {
.sort((a, b) => a.average_score - b.average_score);
return (
<div className="min-h-screen bg-[#0f1115] text-white p-8">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="flex items-center justify-between mb-12">
@@ -109,14 +109,14 @@ export default function AnalyticsPage() {
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
Course Analytics
</h1>
<p className="text-gray-400 mt-1">Performance insights and student progress for {course?.title}</p>
<p className="text-gray-600 dark:text-gray-400 mt-1">Performance insights and student progress for {course?.title}</p>
</div>
</div>
<div className="flex items-center gap-4">
<select
value={selectedCohortId}
onChange={(e) => setSelectedCohortId(e.target.value)}
className="bg-white/5 text-white border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50"
className="bg-black/5 dark:bg-white/5 text-gray-900 dark:text-white border border-black/10 dark:border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50"
>
<option value="">All Students</option>
{cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
@@ -139,19 +139,19 @@ export default function AnalyticsPage() {
<div className="flex items-center gap-1 mb-10 p-1 bg-white/5 rounded-2xl w-fit">
<button
onClick={() => setActiveAnalyticsTab("overview")}
className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "overview" ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20' : 'text-gray-400 hover:text-white hover:bg-white/5'}`}
className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "overview" ? 'bg-blue-600 text-gray-900 dark:text-white shadow-lg shadow-blue-500/20' : 'text-gray-400 hover:text-gray-900 dark:text-white hover:bg-white/5'}`}
>
<BarChart3 size={16} /> Overview
</button>
<button
onClick={() => setActiveAnalyticsTab("risks")}
className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "risks" ? 'bg-red-600 text-white shadow-lg shadow-red-500/20' : 'text-gray-400 hover:text-white hover:bg-white/5'}`}
className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "risks" ? 'bg-red-600 text-gray-900 dark:text-white shadow-lg shadow-red-500/20' : 'text-gray-400 hover:text-gray-900 dark:text-white hover:bg-white/5'}`}
>
<ShieldAlert size={16} /> Predictive Risks
</button>
<button
onClick={() => setActiveAnalyticsTab("live")}
className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "live" ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20' : 'text-gray-400 hover:text-white hover:bg-white/5'}`}
className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "live" ? 'bg-blue-600 text-gray-900 dark:text-white shadow-lg shadow-blue-500/20' : 'text-gray-400 hover:text-gray-900 dark:text-white hover:bg-white/5'}`}
>
<Video size={16} /> Live Sessions
</button>
@@ -204,7 +204,7 @@ export default function AnalyticsPage() {
</h2>
<div className="space-y-4">
{analytics.lessons.map((lesson) => (
<div key={lesson.lesson_id} className="bg-white/5 border border-white/10 rounded-2xl p-6 hover:bg-white/[0.07] transition-all">
<div key={lesson.lesson_id} className="bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-2xl p-6 hover:bg-black/[0.07] dark:hover:bg-white/[0.07] transition-all">
<div className="flex items-start justify-between mb-4">
<div>
<h3 className="font-bold">{lesson.lesson_title}</h3>
web/studio/src/app/courses/[id]/analytics/reports/page.tsx
+11 -11
View File
@@ -65,7 +65,7 @@ export default function ReportsPage() {
};
if (loading) return (
<div className="min-h-screen bg-gray-900 flex items-center justify-center">
<div className="min-h-screen bg-transparent flex items-center justify-center">
<div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
</div>
);
@@ -73,13 +73,13 @@ export default function ReportsPage() {
if (!course || !analytics) return <div className="p-20 text-center text-red-400">Error caricamento dati.</div>;
return (
<div className="min-h-screen bg-[#0f1115] text-white p-8">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
<div className="max-w-7xl mx-auto">
<div className="flex items-center justify-between mb-12">
<div className="flex items-center gap-4">
<button
onClick={() => router.push(`/courses/${id}/analytics`)}
className="p-2 hover:bg-white/10 rounded-full transition-colors"
className="p-2 hover:bg-black/10 dark:hover:bg-white/10 rounded-full transition-colors"
>
<ArrowLeft className="w-6 h-6" />
</button>
@@ -87,7 +87,7 @@ export default function ReportsPage() {
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
Custom Report Builder
</h1>
<p className="text-gray-400 mt-1">Generate and export engagement data for {course.title}</p>
<p className="text-gray-600 dark:text-gray-400 mt-1">Generate and export engagement data for {course.title}</p>
</div>
</div>
@@ -103,11 +103,11 @@ export default function ReportsPage() {
<CourseEditorLayout activeTab="analytics">
<div className="p-8 space-y-12">
{/* Filters */}
<div className="flex items-center gap-4 bg-white/5 p-4 rounded-2xl border border-white/5">
<div className="flex items-center gap-4 bg-black/5 dark:bg-white/5 p-4 rounded-2xl border border-black/5 dark:border-white/5">
<Filter size={18} className="text-gray-500 ml-2" />
<span className="text-xs font-black uppercase tracking-widest text-gray-500">Filter by Cohort:</span>
<select
className="bg-transparent text-sm font-bold text-white focus:outline-none"
className="bg-transparent text-sm font-bold text-gray-900 dark:text-white focus:outline-none"
value={filter}
onChange={(e) => setFilter(e.target.value)}
>
@@ -119,20 +119,20 @@ export default function ReportsPage() {
</div>
{/* Report Table */}
<div className="rounded-3xl border border-white/10 bg-white/[0.02] overflow-hidden">
<div className="rounded-3xl border border-black/10 dark:border-white/10 bg-black/[0.02] dark:bg-white/[0.02] overflow-hidden">
<table className="w-full text-left border-collapse">
<thead>
<tr className="bg-white/5">
<tr className="bg-black/5 dark:bg-white/5">
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Lección</th>
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Completado por</th>
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Puntaje Promedio</th>
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Tendencia</th>
</tr>
</thead>
<tbody className="divide-y divide-white/5">
<tbody className="divide-y divide-black/5 dark:divide-white/5">
{analytics.lessons.map((lesson) => (
<tr key={lesson.lesson_id} className="hover:bg-white/[0.02] transition-colors">
<td className="p-6 font-bold text-gray-300">{lesson.lesson_title}</td>
<td className="p-6 font-bold text-gray-900 dark:text-gray-300">{lesson.lesson_title}</td>
<td className="p-6">
<div className="flex items-center gap-2">
<Users size={14} className="text-blue-400" />
@@ -142,7 +142,7 @@ export default function ReportsPage() {
</td>
<td className="p-6">
<div className="flex items-center gap-4">
<div className="flex-1 h-2 bg-white/5 rounded-full overflow-hidden min-w-[100px]">
<div className="flex-1 h-2 bg-black/5 dark:bg-white/5 rounded-full overflow-hidden min-w-[100px]">
<div
className="h-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]"
style={{ width: `${lesson.average_score * 100}%` }}
web/studio/src/app/courses/[id]/announcements/page.tsx
+8 -8
View File
@@ -54,7 +54,7 @@ export default function AnnouncementsPage() {
);
return (
<div className="min-h-screen bg-[#0f1115] text-white p-8">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
<div className="max-w-5xl mx-auto">
{/* Header */}
<div className="flex items-center justify-between mb-8">
@@ -109,7 +109,7 @@ export default function AnnouncementsPage() {
<div key={a.id} className={`relative p-6 rounded-2xl border transition-all duration-300 ${a.is_pinned ? 'bg-orange-500/10 border-orange-500/30' : 'bg-white/5 border-white/10 hover:border-white/20'}`}>
<div className="flex items-start justify-between mb-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center text-white font-bold overflow-hidden">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center text-gray-900 dark:text-white font-bold overflow-hidden">
{a.author_avatar ? (
<img src={a.author_avatar} alt={a.author_name} className="w-full h-full object-cover" />
) : (
@@ -117,7 +117,7 @@ export default function AnnouncementsPage() {
)}
</div>
<div>
<h4 className="font-semibold text-white">{a.author_name}</h4>
<h4 className="font-semibold text-gray-900 dark:text-white">{a.author_name}</h4>
<div className="flex items-center gap-2 text-sm text-gray-400">
<span>{formatDistanceToNow(new Date(a.created_at), { addSuffix: true, locale: es })}</span>
{a.cohort_ids && a.cohort_ids.length > 0 && (
@@ -142,7 +142,7 @@ export default function AnnouncementsPage() {
</button>
</div>
</div>
<h3 className="text-xl font-bold text-white mb-2">{a.title}</h3>
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{a.title}</h3>
<p className="text-gray-300 whitespace-pre-wrap">{a.content}</p>
{/* Display Target Cohort Names if segmented */}
@@ -164,7 +164,7 @@ export default function AnnouncementsPage() {
) : (
<div className="bg-white/5 border border-white/10 rounded-2xl p-20 text-center">
<Megaphone className="w-12 h-12 text-gray-600 mx-auto mb-4" />
<h3 className="text-xl font-bold text-white mb-2">No announcements found</h3>
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">No announcements found</h3>
<p className="text-gray-400">Start by creating a new announcement for your students.</p>
</div>
)}
@@ -228,7 +228,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
<Megaphone className="w-5 h-5 text-orange-500" />
Create New Announcement
</h2>
<button onClick={onClose} className="text-gray-500 hover:text-white transition-colors">
<button onClick={onClose} className="text-gray-500 hover:text-gray-900 dark:text-white transition-colors">
<Plus className="w-6 h-6 rotate-45" />
</button>
</div>
@@ -267,7 +267,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
key={c.id}
type="button"
onClick={() => toggleCohort(c.id)}
className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all border ${selectedCohorts.includes(c.id) ? 'bg-blue-600 border-blue-500 text-white' : 'bg-white/5 border-white/10 text-gray-400 hover:bg-white/10'}`}
className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all border ${selectedCohorts.includes(c.id) ? 'bg-blue-600 border-blue-500 text-gray-900 dark:text-white' : 'bg-white/5 border-white/10 text-gray-400 hover:bg-white/10'}`}
>
{c.name}
</button>
@@ -295,7 +295,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
<button
type="submit"
disabled={loading}
className="px-8 py-2.5 bg-orange-600 hover:bg-orange-500 disabled:opacity-50 text-white rounded-xl font-bold flex items-center gap-2 shadow-lg shadow-orange-500/20"
className="px-8 py-2.5 bg-orange-600 hover:bg-orange-500 disabled:opacity-50 text-gray-900 dark:text-white rounded-xl font-bold flex items-center gap-2 shadow-lg shadow-orange-500/20"
>
{loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Megaphone className="w-4 h-4" />}
Publish Announcement
web/studio/src/app/courses/[id]/calendar/page.tsx
+2 -2
View File
@@ -89,7 +89,7 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
const prevMonth = () => setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1));
if (loading) return (
<div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
<div className="min-h-screen bg-transparent flex items-center justify-center">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
);
@@ -98,7 +98,7 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
const year = currentDate.getFullYear();
return (
<div className="min-h-screen bg-[#0f1115] text-white p-8">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
<div className="max-w-6xl mx-auto">
{/* Header */}
<div className="flex items-center justify-between mb-12">
web/studio/src/app/courses/[id]/files/page.tsx
+1 -1
View File
@@ -128,7 +128,7 @@ export default function CourseFilesPage() {
<div className="flex items-center gap-3">
{getIcon(asset.mimetype)}
<div>
<div className="font-medium text-white">{asset.filename}</div>
<div className="font-medium text-gray-900 dark:text-white">{asset.filename}</div>
<div className="text-xs text-blue-400">{getImageUrl(asset.storage_path.replace('uploads/', '/assets/'))}</div>
</div>
</div>
web/studio/src/app/courses/[id]/grades/page.tsx
+7 -7
View File
@@ -136,13 +136,13 @@ export default function GradebookPage() {
};
if (loading && students.length === 0) return (
<div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
<div className="min-h-screen bg-transparent flex items-center justify-center">
<div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
</div>
);
return (
<div className="min-h-screen bg-[#0f1115] text-white p-8">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="flex items-center justify-between mb-12">
@@ -207,7 +207,7 @@ export default function GradebookPage() {
value={bulkEmails}
onChange={(e) => setBulkEmails(e.target.value)}
placeholder="student1@example.com&#10;student2@example.com"
className="w-full h-48 bg-black/20 border border-white/10 rounded-xl p-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-white placeholder-gray-600 resize-none font-mono"
className="w-full h-48 bg-black/20 border border-white/10 rounded-xl p-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-gray-900 dark:text-white placeholder-gray-600 resize-none font-mono"
/>
</div>
<div className="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 flex gap-3 italic text-sm text-blue-400">
@@ -289,7 +289,7 @@ export default function GradebookPage() {
<select
value={selectedCohortId}
onChange={(e) => setSelectedCohortId(e.target.value)}
className="appearance-none bg-black/20 text-white border border-white/10 rounded-xl pl-4 pr-10 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-[200px]"
className="appearance-none bg-black/20 text-gray-900 dark:text-white border border-white/10 rounded-xl pl-4 pr-10 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-[200px]"
>
<option value="">All Cohorts</option>
{cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
@@ -305,7 +305,7 @@ export default function GradebookPage() {
placeholder="Search students..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full bg-black/20 border border-white/10 rounded-xl pl-10 pr-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-white placeholder-gray-600"
className="w-full bg-black/20 border border-white/10 rounded-xl pl-10 pr-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-gray-900 dark:text-white placeholder-gray-600"
/>
</div>
</div>
@@ -345,11 +345,11 @@ export default function GradebookPage() {
<tr key={s.user_id} className="hover:bg-white/[0.02] transition-colors group">
<td className="p-6">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-sm">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-gray-900 dark:text-white font-bold text-sm">
{s.full_name.charAt(0)}
</div>
<div>
<div className="font-bold text-white group-hover:text-blue-400 transition-colors">{s.full_name}</div>
<div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors">{s.full_name}</div>
<div className="text-xs text-gray-500 flex items-center gap-1 mt-0.5">
<Mail size={10} /> {s.email}
</div>
web/studio/src/app/courses/[id]/grading/page.tsx
+9 -9
View File
@@ -74,13 +74,13 @@ export default function GradingPolicyPage() {
const isBalanced = totalWeight === 100;
if (loading) return (
<div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
<div className="min-h-screen bg-transparent flex items-center justify-center">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
);
return (
<div className="min-h-screen bg-[#0f1115] text-white p-8">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
<div className="max-w-4xl mx-auto">
{/* Header */}
<div className="flex items-center justify-between mb-12">
@@ -145,7 +145,7 @@ export default function GradingPolicyPage() {
</div>
<button
onClick={() => handleDelete(cat.id)}
className="p-3 bg-red-500/10 text-red-400 rounded-xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white transition-all duration-300"
className="p-3 bg-red-500/10 text-red-400 rounded-xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-gray-900 dark:text-white transition-all duration-300"
>
<Trash2 className="w-5 h-5" />
</button>
@@ -169,11 +169,11 @@ export default function GradingPolicyPage() {
onChange={(e) => setNewName(e.target.value)}
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 mt-1.5 focus:outline-none focus:border-blue-500 transition-all text-gray-100 appearance-none"
>
<option value="" className="bg-gray-900 text-gray-500">Select a type...</option>
<option value="Continuous Assessment" className="bg-gray-900">Continuous Assessment (Min 4)</option>
<option value="Midterm" className="bg-gray-900">Midterm</option>
<option value="Final Test" className="bg-gray-900">Final Test</option>
<option value="Exam" className="bg-gray-900">Exam</option>
<option value="" className="bg-white dark:bg-gray-900 text-gray-500">Select a type...</option>
<option value="Continuous Assessment" className="bg-white dark:bg-gray-900">Continuous Assessment (Min 4)</option>
<option value="Midterm" className="bg-white dark:bg-gray-900">Midterm</option>
<option value="Final Test" className="bg-white dark:bg-gray-900">Final Test</option>
<option value="Exam" className="bg-white dark:bg-gray-900">Exam</option>
</select>
</div>
@@ -194,7 +194,7 @@ export default function GradingPolicyPage() {
<button
onClick={handleAdd}
disabled={submitting || !newName || newWeight <= 0}
className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white font-bold py-4 rounded-2xl mt-4 transition-all shadow-lg shadow-blue-500/20 active:scale-95 flex items-center justify-center gap-2"
className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-gray-900 dark:text-white font-bold py-4 rounded-2xl mt-4 transition-all shadow-lg shadow-blue-500/20 active:scale-95 flex items-center justify-center gap-2"
>
{submitting ? "Adding..." : (
<>
web/studio/src/app/courses/[id]/lessons/[lessonId]/page.tsx
+10 -10
View File
@@ -369,7 +369,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 border-b border-white/5 pb-8">
<div className="space-y-1">
<div className="flex items-center gap-2 text-[10px] text-blue-500 font-bold uppercase tracking-[0.2em]">
<Link href={`/courses/${params.id}`} className="hover:text-white transition-colors">Outline</Link>
<Link href={`/courses/${params.id}`} className="hover:text-gray-900 dark:text-white transition-colors">Outline</Link>
<span className="text-gray-700">/</span>
<span>Activity</span>
</div>
@@ -391,7 +391,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<h2 className="text-4xl font-black tracking-tight">{lesson.title}</h2>
<button
onClick={() => { setEditingId('lesson-title'); setEditValue(lesson.title); }}
className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-white transition-opacity"
className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
>
<Pencil className="w-5 h-5" />
</button>
@@ -540,7 +540,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
className="sr-only peer"
/>
<div className="w-10 h-6 bg-gray-700 rounded-full peer peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-4"></div>
<span className="text-sm font-bold text-gray-400 peer-checked:text-white transition-colors">Allow Instant Corrections</span>
<span className="text-sm font-bold text-gray-400 peer-checked:text-gray-900 dark:text-white transition-colors">Allow Instant Corrections</span>
</label>
<p className="text-[10px] text-gray-600 italic">Enables &quot;Check Answer&quot; buttons for individual blocks</p>
</div>
@@ -769,7 +769,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<button
onClick={() => moveBlock(index, 'up')}
disabled={index === 0}
className="w-10 h-10 rounded-xl bg-white/5 text-gray-400 flex items-center justify-center hover:bg-blue-500 hover:text-white transition-all border border-white/10 disabled:opacity-20 disabled:cursor-not-allowed group-hover/block:scale-110"
className="w-10 h-10 rounded-xl bg-white/5 text-gray-400 flex items-center justify-center hover:bg-blue-500 hover:text-gray-900 dark:text-white transition-all border border-white/10 disabled:opacity-20 disabled:cursor-not-allowed group-hover/block:scale-110"
title="Move Up"
>
<ChevronUp className="w-5 h-5" />
@@ -777,7 +777,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<button
onClick={() => moveBlock(index, 'down')}
disabled={index === blocks.length - 1}
className="w-10 h-10 rounded-xl bg-white/5 text-gray-400 flex items-center justify-center hover:bg-blue-500 hover:text-white transition-all border border-white/10 disabled:opacity-20 disabled:cursor-not-allowed group-hover/block:scale-110"
className="w-10 h-10 rounded-xl bg-white/5 text-gray-400 flex items-center justify-center hover:bg-blue-500 hover:text-gray-900 dark:text-white transition-all border border-white/10 disabled:opacity-20 disabled:cursor-not-allowed group-hover/block:scale-110"
title="Move Down"
>
<ChevronDown className="w-5 h-5" />
@@ -785,14 +785,14 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<div className="h-4"></div>
<button
onClick={() => openSaveToLibraryModal(block)}
className="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-400 flex items-center justify-center hover:bg-emerald-500 hover:text-white transition-all border border-emerald-500/20 group-hover/block:scale-110"
className="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-400 flex items-center justify-center hover:bg-emerald-500 hover:text-gray-900 dark:text-white transition-all border border-emerald-500/20 group-hover/block:scale-110"
title="Save to Library"
>
<BookMarked className="w-5 h-5" />
</button>
<button
onClick={() => removeBlock(block.id)}
className="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center hover:bg-red-500 hover:text-white transition-all border border-red-500/20 group-hover/block:scale-110"
className="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center hover:bg-red-500 hover:text-gray-900 dark:text-white transition-all border border-red-500/20 group-hover/block:scale-110"
title="Remove Block"
>
<Trash2 className="w-5 h-5" />
@@ -1079,7 +1079,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
value={aiQuizContext}
onChange={(e) => setAiQuizContext(e.target.value)}
placeholder="e.g. Focus on past tense verbs, or use vocabulary related to travel..."
className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-purple-500 transition-all text-white h-24 resize-none"
className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-purple-500 transition-all text-gray-900 dark:text-white h-24 resize-none"
disabled={isGeneratingQuiz}
/>
</div>
@@ -1091,7 +1091,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<select
value={aiQuizType}
onChange={(e) => setAiQuizType(e.target.value)}
className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-purple-500 transition-all text-white appearance-none font-bold"
className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-purple-500 transition-all text-gray-900 dark:text-white appearance-none font-bold"
disabled={isGeneratingQuiz}
>
<option value="multiple-choice">Multiple Choice</option>
@@ -1113,7 +1113,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<button
type="submit"
disabled={isGeneratingQuiz}
className="flex-[2] px-4 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-white rounded-lg transition-all shadow-lg shadow-purple-500/20 font-bold text-sm flex items-center justify-center gap-2"
className="flex-[2] px-4 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-gray-900 dark:text-white rounded-lg transition-all shadow-lg shadow-purple-500/20 font-bold text-sm flex items-center justify-center gap-2"
>
{isGeneratingQuiz ? (
<>
web/studio/src/app/courses/[id]/page.tsx
+19 -19
View File
@@ -222,24 +222,24 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
if (error) return <div className="py-20 text-center text-red-400">{error}</div>;
return (
<div className="min-h-screen bg-[#0f1115] text-white p-8">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-gray-100 p-8 transition-colors duration-300">
<div className="max-w-6xl mx-auto">
{/* Header */}
<div className="flex items-center justify-between mb-12">
<div className="flex items-center gap-4">
<button
onClick={() => router.push('/')}
className="p-2 hover:bg-white/10 rounded-full transition-colors"
className="p-2 hover:bg-black/5 dark:hover:bg-white/10 rounded-full transition-colors text-gray-700 dark:text-gray-300"
>
<ArrowLeft className="w-6 h-6" />
</button>
<div>
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent">
Course Editor
</h1>
<div className="flex items-center gap-3 mt-1">
<p className="text-gray-400">Design your course structure and lesson content for {course?.title}</p>
<span className={`text-[10px] uppercase font-bold px-2 py-0.5 rounded ${course?.pacing_mode === 'instructor_led' ? 'bg-purple-500/20 text-purple-400' : 'bg-green-500/20 text-green-400'}`}>
<p className="text-gray-600 dark:text-gray-400">Design your course structure and lesson content for {course?.title}</p>
<span className={`text-[10px] uppercase font-bold px-2 py-0.5 rounded ${course?.pacing_mode === 'instructor_led' ? 'bg-purple-500/10 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400' : 'bg-green-500/10 dark:bg-green-500/20 text-green-600 dark:text-green-400'}`}>
{course?.pacing_mode?.replace('_', ' ') || 'Self Paced'}
</span>
</div>
@@ -307,7 +307,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
value={editValue}
onChange={(e) => setEditValue(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(module.id, 'module')}
className="bg-black/40 border border-blue-500/50 rounded px-3 py-1 flex-1 text-white focus:outline-none"
className="bg-black/5 dark:bg-black/40 border border-blue-500/50 rounded px-3 py-1 flex-1 text-gray-900 dark:text-gray-900 dark:text-white focus:outline-none"
/>
<button onClick={() => handleSaveTitle(module.id, 'module')} className="text-green-400 hover:text-green-300">
<Save className="w-5 h-5" />
@@ -320,13 +320,13 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
<div className="flex items-center gap-3 group flex-1">
<span
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
className="font-semibold text-lg text-blue-400 cursor-pointer hover:text-blue-300 transition-colors"
className="font-semibold text-lg text-blue-600 dark:text-blue-400 cursor-pointer hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
>
{module.title || `Module ${module.position}`}
</span>
<button
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-white transition-opacity"
className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
>
<Pencil className="w-4 h-4" />
</button>
@@ -364,38 +364,38 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
<div className="flex-1">
{editingId === lesson.id ? (
<div className="flex items-center gap-2 glass border-blue-500/30 p-2 rounded-lg">
<div className="flex items-center gap-2 glass border-blue-500/30 p-2 rounded-lg bg-black/5 dark:bg-black/20">
<input
autoFocus
value={editValue}
onChange={(e) => setEditValue(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(lesson.id, 'lesson')}
className="bg-transparent border-none flex-1 text-white focus:outline-none"
className="bg-transparent border-none flex-1 text-gray-900 dark:text-gray-900 dark:text-white focus:outline-none"
/>
<button onClick={() => handleSaveTitle(lesson.id, 'lesson')} className="text-green-400">
<button onClick={() => handleSaveTitle(lesson.id, 'lesson')} className="text-green-600 dark:text-green-400">
<Save className="w-4 h-4" />
</button>
<button onClick={() => setEditingId(null)} className="text-gray-400">
<button onClick={() => setEditingId(null)} className="text-gray-500 dark:text-gray-400">
<X className="w-4 h-4" />
</button>
</div>
) : (
<div className="flex items-center justify-between glass border-white/5 p-4 rounded-xl hover:bg-white/10 hover:border-blue-500/30 transition-all cursor-pointer group/lesson">
<div className="flex items-center justify-between glass border-black/5 dark:border-white/5 p-4 rounded-xl hover:bg-black/5 dark:hover:bg-white/10 hover:border-blue-500/30 transition-all cursor-pointer group/lesson">
<Link href={`/courses/${params.id}/lessons/${lesson.id}`} className="flex-1 flex items-center gap-4">
<div className="p-2 bg-blue-500/20 rounded-lg text-blue-400 group-hover/lesson:scale-110 transition-transform">
<div className="p-2 bg-blue-500/10 dark:bg-blue-500/20 rounded-lg text-blue-600 dark:text-blue-400 group-hover/lesson:scale-110 transition-transform">
{lesson.content_type === 'video' ? <PlayCircle className="w-5 h-5" /> : <FileText className="w-5 h-5" />}
</div>
<div className="flex flex-col">
<span
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
className="font-medium hover:text-blue-400 transition-colors"
className="font-medium text-gray-900 dark:text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
>
{lesson.title}
</span>
<div className="flex items-center gap-3 text-[10px] text-gray-500 uppercase mt-0.5 font-semibold">
<span>{lesson.content_type}</span>
{lesson.due_date && (
<div className="flex items-center gap-1 text-orange-400">
<div className="flex items-center gap-1 text-orange-600 dark:text-orange-400">
<Calendar className="w-3 h-3" />
{new Date(lesson.due_date).toLocaleDateString()}
</div>
@@ -406,7 +406,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
<div className="flex items-center gap-4">
<button
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
className="opacity-0 group-hover/lesson:opacity-100 text-gray-500 hover:text-white transition-opacity"
className="opacity-0 group-hover/lesson:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
>
<Pencil className="w-4 h-4" />
</button>
@@ -425,7 +425,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
<button
onClick={() => handleAddLesson(module.id)}
className="w-full py-3 border border-dashed border-white/10 rounded-xl text-sm text-gray-500 hover:text-white hover:border-white/20 hover:bg-white/5 transition-all mt-3 flex items-center justify-center gap-2"
className="w-full py-3 border border-dashed border-black/10 dark:border-white/10 rounded-xl text-sm text-gray-500 hover:text-gray-900 dark:hover:text-gray-900 dark:text-white hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition-all mt-3 flex items-center justify-center gap-2"
>
<Plus className="w-4 h-4" /> New Lesson
</button>
@@ -435,7 +435,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
<button
onClick={handleAddModule}
className="w-full py-6 border-2 border-dashed border-white/10 rounded-2xl font-medium text-gray-500 hover:text-white hover:border-white/20 hover:bg-white/5 transition-all flex items-center justify-center gap-3 text-lg"
className="w-full py-6 border-2 border-dashed border-black/10 dark:border-white/10 rounded-2xl font-medium text-gray-500 hover:text-gray-900 dark:hover:text-gray-900 dark:text-white hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition-all flex items-center justify-center gap-3 text-lg"
>
<Plus className="w-6 h-6" /> Add New Module
</button>
web/studio/src/app/courses/[id]/peer-reviews/page.tsx
+4 -4
View File
@@ -104,14 +104,14 @@ export default function PeerReviewDashboard() {
if (loading) {
return (
<div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
<div className="min-h-screen bg-transparent flex items-center justify-center">
<Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
</div>
);
}
return (
<div className="min-h-screen bg-[#0f1115] text-white p-8">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
<div className="max-w-7xl mx-auto">
<div className="flex items-center justify-between mb-8">
<div className="flex items-center gap-4">
@@ -204,14 +204,14 @@ export default function PeerReviewDashboard() {
{sub.full_name.charAt(0)}
</div>
<div>
<div className="font-bold text-white group-hover:text-blue-400 transition-colors">{sub.full_name}</div>
<div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors">{sub.full_name}</div>
<div className="text-xs text-gray-500">{sub.email}</div>
</div>
</div>
<div className="flex items-center gap-8">
<div className="text-right">
<div className="text-sm font-black text-white flex items-center gap-1.5 justify-end">
<div className="text-sm font-black text-gray-900 dark:text-white flex items-center gap-1.5 justify-end">
<Award className="w-4 h-4 text-yellow-400" />
{sub.average_score !== null ? `${(sub.average_score).toFixed(1)}/10` : '—'}
</div>
web/studio/src/app/courses/[id]/rubrics/page.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ export default function RubricsPage() {
const [editingRubricId, setEditingRubricId] = useState<string | null>(null);
return (
<div className="min-h-screen bg-[#0f1115] text-white p-8">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="flex items-center justify-between mb-12">
web/studio/src/app/courses/[id]/sessions/page.tsx
+3 -3
View File
@@ -74,14 +74,14 @@ export default function LiveSessionsPage() {
if (loading) {
return (
<div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
<div className="min-h-screen bg-transparent flex items-center justify-center">
<Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
</div>
);
}
return (
<div className="min-h-screen bg-[#0f1115] text-white p-8">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
<div className="max-w-7xl mx-auto">
<div className="flex items-center justify-between mb-8">
<div className="flex items-center gap-4">
@@ -219,7 +219,7 @@ export default function LiveSessionsPage() {
type="datetime-local"
value={newMeeting.start_at}
onChange={(e) => setNewMeeting({ ...newMeeting, start_at: e.target.value })}
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50 text-white"
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50 text-gray-900 dark:text-white"
/>
</div>
<div className="space-y-2">
web/studio/src/app/courses/[id]/settings/page.tsx
+5 -5
View File
@@ -124,19 +124,19 @@ export default function CourseSettingsPage() {
};
if (loading) return (
<div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
<div className="min-h-screen bg-transparent flex items-center justify-center">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
);
if (!course) return (
<div className="min-h-screen bg-[#0f1115] text-white p-20 text-center">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-20 text-center">
Course not found.
</div>
);
return (
<div className="min-h-screen bg-[#0f1115] text-white p-8">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
<div className="max-w-5xl mx-auto">
{/* Header */}
<div className="flex items-center justify-between mb-12">
@@ -317,7 +317,7 @@ export default function CourseSettingsPage() {
min="0"
value={price}
onChange={(e) => setPrice(parseFloat(e.target.value))}
className="w-full bg-black/30 border border-white/10 rounded-xl py-3 px-4 text-white focus:outline-none focus:border-blue-500 transition-colors"
className="w-full bg-black/30 border border-white/10 rounded-xl py-3 px-4 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors"
placeholder="0.00"
/>
<div className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 font-bold">
@@ -332,7 +332,7 @@ export default function CourseSettingsPage() {
<select
value={currency}
onChange={(e) => setCurrency(e.target.value)}
className="w-full bg-black/30 border border-white/10 rounded-xl py-3 px-4 text-white focus:outline-none focus:border-blue-500 transition-colors appearance-none"
className="w-full bg-black/30 border border-white/10 rounded-xl py-3 px-4 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors appearance-none"
>
<option value="USD">USD - US Dollar</option>
<option value="CLP">CLP - Chilean Peso</option>
web/studio/src/app/courses/[id]/students/page.tsx
+5 -5
View File
@@ -109,14 +109,14 @@ export default function CourseStudentsPage() {
if (loading) {
return (
<div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
<div className="min-h-screen bg-transparent flex items-center justify-center">
<Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
</div>
);
}
return (
<div className="min-h-screen bg-[#0f1115] text-white p-8">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
<div className="max-w-7xl mx-auto">
<div className="flex items-center justify-between mb-8">
<div className="flex items-center gap-4">
@@ -156,7 +156,7 @@ export default function CourseStudentsPage() {
<div className="flex items-center gap-2 w-full md:w-auto">
<Filter size={16} className="text-gray-400" />
<select
className="bg-black/20 border border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500/50 text-white min-w-[150px]"
className="bg-black/20 border border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500/50 text-gray-900 dark:text-white min-w-[150px]"
value={selectedCohortId}
onChange={(e) => setSelectedCohortId(e.target.value)}
>
@@ -189,7 +189,7 @@ export default function CourseStudentsPage() {
{student.full_name.charAt(0)}
</div>
<div>
<div className="font-bold text-white group-hover:text-blue-400 transition-colors uppercase tracking-tight">{student.full_name}</div>
<div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors uppercase tracking-tight">{student.full_name}</div>
<div className="text-xs text-gray-500 flex items-center gap-1 mt-0.5"><Mail size={12} /> {student.email}</div>
</div>
</div>
@@ -276,7 +276,7 @@ export default function CourseStudentsPage() {
</div>
<button
onClick={() => handleEnroll([user.email])}
className="px-4 py-1.5 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded-lg transition-all"
className="px-4 py-1.5 bg-blue-600 hover:bg-blue-500 text-gray-900 dark:text-white text-xs font-bold rounded-lg transition-all"
>
Enroll Now
</button>