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/admin/layout.tsx
+4 -4
View File
@@ -25,9 +25,9 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
];
return (
<div className="flex min-h-screen bg-[#0f1115] text-white">
<div className="flex min-h-screen bg-transparent text-gray-900 dark:text-white transition-colors duration-300">
{/* Sidebar */}
<aside className="w-64 border-r border-white/5 bg-black/20 backdrop-blur-xl p-6 flex flex-col gap-8">
<aside className="w-64 border-r border-black/5 dark:border-white/5 bg-gray-50/50 dark:bg-black/20 backdrop-blur-xl p-6 flex flex-col gap-8">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-500/20">
<ShieldCheck className="text-white" size={24} />
@@ -44,8 +44,8 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
key={item.href}
href={item.href}
className={`flex items-center gap-3 px-4 py-3 rounded-xl font-bold text-sm transition-all ${pathname === item.href
? "bg-indigo-600/10 text-indigo-400 border border-indigo-500/20 shadow-glow-sm"
: "text-gray-500 hover:text-white hover:bg-white/5 border border-transparent"
? "bg-indigo-600/10 text-indigo-400 border border-indigo-500/20 shadow-glow-sm"
: "text-gray-500 hover:text-white hover:bg-white/5 border border-transparent"
}`}
>
<item.icon size={18} />
web/studio/src/app/admin/organizations/page.tsx
+16 -16
View File
@@ -179,8 +179,8 @@ export default function OrganizationsPage() {
<div className="space-y-6 md:space-y-8 animate-in fade-in duration-500 p-4 md:p-0">
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<div>
<h1 className="text-2xl md:text-3xl font-bold tracking-tight">Organizations</h1>
<p className="text-gray-400 mt-1 text-sm">Manage tenants and isolated environments.</p>
<h1 className="text-2xl md:text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Organizations</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1 text-sm">Manage tenants and isolated environments.</p>
</div>
<button
onClick={() => setIsModalOpen(true)}
@@ -202,7 +202,7 @@ export default function OrganizationsPage() {
{organizations.map((org) => (
<div
key={org.id}
className="group relative p-6 rounded-xl glass border border-white/10 hover:border-blue-500/50 transition-all hover:translate-y-[-2px] overflow-hidden"
className="group relative p-6 rounded-xl bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 hover:border-blue-500/50 transition-all hover:translate-y-[-2px] overflow-hidden"
>
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<Building2 className="w-16 h-16" />
@@ -217,7 +217,7 @@ export default function OrganizationsPage() {
)}
</div>
<div>
<h3 className="font-semibold text-lg">{org.name}</h3>
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">{org.name}</h3>
<div className="flex items-center gap-1.5 text-sm text-gray-400">
<Globe className="w-3 h-3" />
{org.domain || 'No custom domain'}
@@ -231,7 +231,7 @@ export default function OrganizationsPage() {
</div>
<div className="space-y-3 mt-4">
<div className="flex items-center justify-between text-xs text-gray-500 bg-black/20 p-2 rounded-lg">
<div className="flex items-center justify-between text-xs text-gray-600 dark:text-gray-500 bg-black/5 dark:bg-black/20 p-2 rounded-lg">
<div className="flex items-center gap-1">
<Calendar className="w-3 h-3" />
Created: {new Date(org.created_at).toLocaleDateString()}
@@ -253,7 +253,7 @@ export default function OrganizationsPage() {
>
<Fingerprint className="w-3 h-3" /> SSO
</button>
<button className="py-2 px-2 text-[10px] font-medium border border-white/5 bg-white/5 hover:bg-white/10 rounded-lg transition-colors flex items-center justify-center gap-1 text-gray-400">
<button className="py-2 px-2 text-[10px] font-medium border border-black/10 dark:border-white/5 bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 rounded-lg transition-colors flex items-center justify-center gap-1 text-gray-600 dark:text-gray-400">
Docs <ExternalLink className="w-3 h-3" />
</button>
</div>
@@ -266,8 +266,8 @@ export default function OrganizationsPage() {
{/* Create Organization Modal */}
{isModalOpen && (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
<div className="w-full max-w-md glass border border-white/10 rounded-2xl p-8 shadow-2xl">
<h2 className="text-xl font-bold mb-6">Create New Organization</h2>
<div className="w-full max-w-md bg-white dark:bg-gray-900 border border-black/10 dark:border-white/10 rounded-2xl p-8 shadow-2xl">
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">Create New Organization</h2>
<form onSubmit={handleCreate} className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-400 mb-1.5">Organization Name</label>
@@ -312,7 +312,7 @@ export default function OrganizationsPage() {
required
value={adminEmail}
onChange={(e) => setAdminEmail(e.target.value)}
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all"
className="w-full bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-gray-900 dark:text-white"
placeholder="admin@acme.com"
/>
</div>
@@ -352,13 +352,13 @@ export default function OrganizationsPage() {
{/* Branding Management Modal */}
{isBrandingModalOpen && selectedOrg && (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
<div className="w-full max-w-2xl glass border border-white/10 rounded-2xl p-8 shadow-2xl">
<div className="w-full max-w-2xl bg-white dark:bg-gray-900 border border-black/10 dark:border-white/10 rounded-2xl p-8 shadow-2xl">
<div className="flex justify-between items-center mb-6">
<div>
<h2 className="text-xl font-bold">Branding Management</h2>
<p className="text-sm text-gray-400">{selectedOrg.name}</p>
<h2 className="text-xl font-bold text-gray-900 dark:text-white">Branding Management</h2>
<p className="text-sm text-gray-600 dark:text-gray-400">{selectedOrg.name}</p>
</div>
<button onClick={() => setIsBrandingModalOpen(false)} className="p-2 hover:bg-white/5 rounded-full transition-colors">
<button onClick={() => setIsBrandingModalOpen(false)} className="p-2 text-gray-500 hover:bg-black/5 dark:hover:bg-white/5 rounded-full transition-colors">
<X className="w-5 h-5" />
</button>
</div>
@@ -428,8 +428,8 @@ export default function OrganizationsPage() {
{/* Live Preview */}
<div className="space-y-4">
<label className="block text-sm font-medium text-gray-400 mb-2">Experience Portal Preview</label>
<div className="rounded-xl border border-white/10 overflow-hidden bg-slate-900 shadow-inner">
<label className="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Experience Portal Preview</label>
<div className="rounded-xl border border-black/10 dark:border-white/10 overflow-hidden bg-gray-50 dark:bg-slate-900 shadow-inner">
{/* Mock Experience Header */}
<div className="h-10 px-4 flex items-center justify-between border-b border-white/5" style={{ backgroundColor: primaryColor }}>
<div className="flex items-center gap-2">
@@ -446,7 +446,7 @@ export default function OrganizationsPage() {
</div>
</div>
{/* Mock Experience Content */}
<div className="p-4 space-y-3 bg-[#0a0c10]">
<div className="p-4 space-y-3 bg-gray-50 dark:bg-[#0a0c10]">
<div className="w-2/3 h-4 bg-white/10 rounded mb-2" />
<div className="w-full h-24 bg-white/5 rounded-lg border border-white/5 p-3">
<div className="w-1/3 h-3 rounded mb-2" style={{ backgroundColor: secondaryColor }} />
web/studio/src/app/auth/callback/page.tsx
+3 -3
View File
@@ -35,17 +35,17 @@ function CallbackHandler() {
return (
<div className="flex flex-col items-center gap-4">
<Loader2 className="w-12 h-12 text-blue-500 animate-spin" />
<h2 className="text-xl font-bold text-white text-center">
<h2 className="text-xl font-bold text-gray-900 dark:text-white text-center">
Completing your sign in...
</h2>
<p className="text-gray-400">Please wait a moment.</p>
<p className="text-gray-500 dark:text-gray-400">Please wait a moment.</p>
</div>
);
}
export default function AuthCallbackPage() {
return (
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
<div className="min-h-screen bg-transparent flex items-center justify-center p-4">
<Suspense fallback={
<div className="flex flex-col items-center gap-4">
<Loader2 className="w-12 h-12 text-blue-500 animate-spin" />
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>
web/studio/src/app/globals.css
+17 -10
View File
@@ -3,19 +3,26 @@
@tailwind utilities;
:root {
--foreground-rgb: 229, 231, 235;
/* text-gray-200 */
--background-start-rgb: 15, 17, 21;
/* #0f1115 */
--background-end-rgb: 0, 0, 0;
--background: 249, 250, 251;
--foreground: 17, 24, 39;
/* gray-900 */
--accent-primary: #3b82f6;
/* blue-500 */
--accent-secondary: #6366f1;
/* indigo-500 */
--glass-bg: rgba(255, 255, 255, 0.8);
--glass-border: rgba(0, 0, 0, 0.1);
--glass-blur: blur(16px);
}
.dark {
--background: 3, 7, 18;
/* gray-950 */
--foreground: 229, 231, 235;
/* gray-200 */
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-blur: blur(16px);
}
/* Ensure focus states are visible for keyboard navigation */
@@ -25,8 +32,8 @@
}
body {
color: rgb(var(--foreground-rgb));
background: var(--background-start-rgb);
color: rgb(var(--foreground));
background: rgb(var(--background));
}
.glass {
web/studio/src/app/layout.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body className={`${inter.className} bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-200 min-h-screen flex flex-col transition-colors duration-300`}>
<body className={`${inter.className} min-h-screen flex flex-col transition-colors duration-300`}>
<ThemeProvider>
<AuthProvider>
<I18nProvider>
web/studio/src/app/library/assets/page.tsx
+13 -13
View File
@@ -86,7 +86,7 @@ export default function AssetLibraryPage() {
};
return (
<div className="min-h-screen bg-black text-white pt-24 pb-12 px-6">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white pt-24 pb-12 px-6 transition-colors duration-300">
<div className="max-w-7xl mx-auto space-y-8">
{/* Header */}
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
@@ -98,7 +98,7 @@ export default function AssetLibraryPage() {
<h1 className="text-4xl font-black tracking-tight flex items-center gap-4">
Global <span className="gradient-text">Asset Library</span>
</h1>
<p className="text-gray-500 text-sm font-medium">Manage and reuse your organization's media files across all courses.</p>
<p className="text-gray-600 dark:text-gray-500 text-sm font-medium">Manage and reuse your organization's media files across all courses.</p>
</div>
<div className="flex gap-3">
@@ -118,7 +118,7 @@ export default function AssetLibraryPage() {
{/* Upload Progress Bar */}
{isUploading && (
<div className="w-full bg-white/5 rounded-2xl border border-white/10 p-4 animate-in fade-in slide-in-from-top-4">
<div className="w-full bg-black/5 dark:bg-white/5 rounded-2xl border border-black/10 dark:border-white/10 p-4 animate-in fade-in slide-in-from-top-4">
<div className="flex justify-between items-center mb-2">
<span className="text-xs font-black uppercase tracking-widest text-blue-400">Uploading Assets...</span>
<span className="text-xs font-bold text-white">{uploadProgress}%</span>
@@ -141,7 +141,7 @@ export default function AssetLibraryPage() {
placeholder="Search by filename..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full bg-white/5 border border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm font-medium focus:outline-none focus:border-blue-500/50 focus:bg-white/10 transition-all"
className="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm font-medium focus:outline-none focus:border-blue-500/50 focus:bg-black/10 dark:focus:bg-white/10 transition-all text-gray-900 dark:text-white"
/>
</div>
@@ -150,12 +150,12 @@ export default function AssetLibraryPage() {
<select
value={filterType}
onChange={(e) => setFilterType(e.target.value)}
className="w-full bg-white/5 border border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm font-bold uppercase tracking-widest focus:outline-none focus:border-blue-500/50 appearance-none cursor-pointer hover:bg-white/10 transition-all"
className="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm font-bold uppercase tracking-widest focus:outline-none focus:border-blue-500/50 appearance-none cursor-pointer hover:bg-black/10 dark:hover:bg-white/10 transition-all text-gray-900 dark:text-white"
>
<option value="all" className="bg-gray-900">All Types</option>
<option value="image/" className="bg-gray-900">Images</option>
<option value="video/" className="bg-gray-900">Videos</option>
<option value="application/pdf" className="bg-gray-900">Documents (PDF)</option>
<option value="all" className="bg-white dark:bg-gray-900">All Types</option>
<option value="image/" className="bg-white dark:bg-gray-900">Images</option>
<option value="video/" className="bg-white dark:bg-gray-900">Videos</option>
<option value="application/pdf" className="bg-white dark:bg-gray-900">Documents (PDF)</option>
</select>
</div>
@@ -171,8 +171,8 @@ export default function AssetLibraryPage() {
<span className="text-[10px] uppercase font-black tracking-[0.3em] text-gray-500">Retrieving Cloud Assets...</span>
</div>
) : assets.length === 0 ? (
<div className="py-40 flex flex-col items-center gap-6 border-2 border-dashed border-white/5 rounded-[40px] bg-white/[0.02]">
<div className="p-8 bg-white/5 rounded-[32px] border border-white/5">
<div className="py-40 flex flex-col items-center gap-6 border-2 border-dashed border-black/10 dark:border-white/5 rounded-[40px] bg-black/[0.02] dark:bg-white/[0.02]">
<div className="p-8 bg-black/5 dark:bg-white/5 rounded-[32px] border border-black/5 dark:border-white/5">
<Plus className="w-12 h-12 text-gray-700" />
</div>
<div className="text-center space-y-2">
@@ -185,7 +185,7 @@ export default function AssetLibraryPage() {
{assets.map((asset) => (
<div
key={asset.id}
className="group bg-white/5 border border-white/5 rounded-[32px] overflow-hidden hover:bg-white/10 hover:border-white/10 transition-all duration-300 hover:-translate-y-1 relative"
className="group bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5 rounded-[32px] overflow-hidden hover:bg-black/10 dark:hover:bg-white/10 hover:border-black/10 dark:hover:border-white/10 transition-all duration-300 hover:-translate-y-1 relative"
>
{/* Preview Area */}
<div className="aspect-video w-full bg-black/40 flex items-center justify-center relative overflow-hidden">
@@ -227,7 +227,7 @@ export default function AssetLibraryPage() {
{/* Content Info */}
<div className="p-6 space-y-3">
<h3 className="text-sm font-bold text-gray-200 truncate pr-2" title={asset.filename}>
<h3 className="text-sm font-bold text-gray-900 dark:text-gray-200 truncate pr-2" title={asset.filename}>
{asset.filename}
</h3>
<div className="flex items-center justify-between">
web/studio/src/app/lti/deep-linking/page.tsx
+1 -1
View File
@@ -202,7 +202,7 @@ function DeepLinkingPickerContent() {
export default function DeepLinkingPicker() {
return (
<Suspense fallback={<div className="min-h-screen bg-gray-950 flex items-center justify-center"><div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" /></div>}>
<Suspense fallback={<div className="min-h-screen bg-transparent flex items-center justify-center"><div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" /></div>}>
<DeepLinkingPickerContent />
</Suspense>
);
web/studio/src/app/page.tsx
+17 -17
View File
@@ -158,18 +158,18 @@ export default function StudioDashboard() {
};
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-7xl mx-auto">
{/* Header */}
<div className="flex justify-between items-center mb-12">
<div>
<h1 className="text-4xl font-black bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent tracking-tight">
<h1 className="text-4xl font-black bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent tracking-tight">
{t('nav.courses')}
</h1>
<p className="text-gray-400 mt-2">{t('dashboard.title')}</p>
<p className="text-gray-600 dark:text-gray-400 mt-2">{t('dashboard.title')}</p>
</div>
<div className="flex items-center gap-3">
<label className="flex items-center gap-2 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold transition-all cursor-pointer active:scale-95">
<label className="flex items-center gap-2 px-6 py-3 bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 border border-black/5 dark:border-white/10 rounded-xl font-bold transition-all cursor-pointer active:scale-95">
<Upload size={18} />
Importar
<input type="file" accept=".json" onChange={handleImport} className="hidden" />
@@ -183,7 +183,7 @@ export default function StudioDashboard() {
</button>
<button
onClick={handleCreateCourse}
className="flex items-center gap-2 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold transition-all active:scale-95"
className="flex items-center gap-2 px-6 py-3 bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 border border-black/10 dark:border-white/10 rounded-xl font-bold transition-all active:scale-95"
>
<Plus size={20} />
Manual
@@ -198,8 +198,8 @@ export default function StudioDashboard() {
))}
</div>
) : courses.length === 0 ? (
<div className="text-center py-20 glass-card border-dashed border-white/10">
<p className="text-gray-500">Aún no has creado ningún curso.</p>
<div className="text-center py-20 glass-card border-dashed border-black/10 dark:border-white/10">
<p className="text-gray-500 dark:text-gray-400">Aún no has creado ningún curso.</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -209,27 +209,27 @@ export default function StudioDashboard() {
<div className="flex-1">
<div className="flex items-start justify-between mb-4">
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center">
<BookOpen className="text-blue-400" />
<BookOpen className="text-blue-600 dark:text-blue-400" />
</div>
<button
onClick={(e) => handleExport(e, course.id, course.title)}
className="p-2 hover:bg-white/10 rounded-lg text-gray-500 hover:text-white transition-all"
className="p-2 hover:bg-black/5 dark:hover:bg-white/10 rounded-lg text-gray-500 hover:text-gray-900 dark:hover:text-white transition-all"
title="Export Course"
>
<Download size={18} />
</button>
<button
onClick={(e) => handleDeleteCourse(e, course.id, course.title)}
className="p-2 hover:bg-red-500/10 rounded-lg text-gray-500 hover:text-red-400 transition-all"
className="p-2 hover:bg-red-500/10 rounded-lg text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-all"
title="Delete Course"
>
<Trash2 size={18} />
</button>
</div>
<h3 className="font-bold text-lg mb-2 group-hover:text-blue-400 transition-colors">{course.title}</h3>
<p className="text-sm text-gray-400 line-clamp-2">{course.description || "Sin descripción disponible."}</p>
<h3 className="font-bold text-lg mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors text-gray-900 dark:text-white">{course.title}</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">{course.description || "Sin descripción disponible."}</p>
</div>
<div className="flex items-center justify-between mt-6 pt-4 border-t border-white/5 text-xs text-gray-500">
<div className="flex items-center justify-between mt-6 pt-4 border-t border-black/5 dark:border-white/5 text-xs text-gray-500 dark:text-gray-400">
<span>Última actualización: {new Date(course.updated_at).toLocaleDateString()}</span>
<span>ID: {course.id.slice(0, 4)}...</span>
</div>
@@ -248,7 +248,7 @@ export default function StudioDashboard() {
>
<form onSubmit={onTitleConfirm} className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-400 mb-2">
<label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
Course Title
</label>
<input
@@ -258,7 +258,7 @@ export default function StudioDashboard() {
value={newCourseTitle}
onChange={(e) => setNewCourseTitle(e.target.value)}
placeholder="e.g. Advanced Rust Development"
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-white"
className="w-full bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-gray-900 dark:text-white"
/>
</div>
<div className="flex gap-3 pt-2">
@@ -292,7 +292,7 @@ export default function StudioDashboard() {
</p>
</div>
<div>
<label className="block text-sm font-medium text-gray-400 mb-2">
<label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
Course Topic or Description
</label>
<textarea
@@ -302,7 +302,7 @@ export default function StudioDashboard() {
value={aiPrompt}
onChange={(e) => setAiPrompt(e.target.value)}
placeholder="e.g. A comprehensive guide to building distributed systems with Rust and Axum for intermediate developers."
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all text-white resize-none"
className="w-full bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all text-gray-900 dark:text-white resize-none"
disabled={isGenerating}
/>
</div>
web/studio/src/app/settings/page.tsx
+3 -3
View File
@@ -20,10 +20,10 @@ export default function SettingsPage() {
if (!user || user.role !== "admin") return null;
return (
<div className="pt-24 px-8 pb-12 min-h-screen bg-gradient-to-br from-gray-900 to-black">
<div className="pt-24 px-8 pb-12 min-h-screen bg-transparent transition-colors duration-300">
<div className="max-w-4xl mx-auto mb-8">
<h1 className="text-3xl font-black text-white tracking-tight">Organization Settings</h1>
<p className="text-gray-400 mt-2">Manage your white-label branding and platform identity.</p>
<h1 className="text-3xl font-black text-gray-900 dark:text-white tracking-tight">Organization Settings</h1>
<p className="text-gray-600 dark:text-gray-400 mt-2">Manage your white-label branding and platform identity.</p>
</div>
<BrandingSettings />
</div>
web/studio/src/app/settings/webhooks/page.tsx
+17 -17
View File
@@ -83,13 +83,13 @@ export default function WebhooksPage() {
};
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>
);
return (
<div className="min-h-screen bg-[#0f1115] text-white">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white">
<Navbar />
<main className="max-w-5xl mx-auto pt-32 pb-20 px-6">
<div className="flex items-center justify-between mb-12">
@@ -98,7 +98,7 @@ export default function WebhooksPage() {
<WebhookIcon size={40} className="text-blue-500" />
Enterprise Webhooks
</h1>
<p className="text-gray-400">Integrate OpenCCB with your external systems via HTTP callbacks.</p>
<p className="text-gray-600 dark:text-gray-400">Integrate OpenCCB with your external systems via HTTP callbacks.</p>
</div>
<button
onClick={() => setIsAdding(true)}
@@ -116,7 +116,7 @@ export default function WebhooksPage() {
)}
{isAdding && (
<div className="mb-12 bg-white/5 border border-white/10 rounded-3xl p-8 overflow-hidden relative group">
<div className="mb-12 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-3xl p-8 overflow-hidden relative group">
<div className="absolute inset-0 bg-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
<h2 className="text-xl font-black mb-6 flex items-center gap-2">
<Plus size={20} className="text-blue-400" />
@@ -125,7 +125,7 @@ export default function WebhooksPage() {
<form onSubmit={handleCreate} className="space-y-6 relative">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<label className="text-xs font-black text-gray-400 uppercase tracking-widest flex items-center gap-2">
<label className="text-xs font-black text-gray-500 dark:text-gray-400 uppercase tracking-widest flex items-center gap-2">
<Globe size={14} /> Payload URL
</label>
<input
@@ -133,20 +133,20 @@ export default function WebhooksPage() {
id="webhook-url"
required
placeholder="https://your-api.com/webhooks"
className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-colors"
className="w-full bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-colors text-gray-900 dark:text-white"
value={newWebhook.url}
onChange={e => setNewWebhook({ ...newWebhook, url: e.target.value })}
/>
</div>
<div className="space-y-2">
<label className="text-xs font-black text-gray-400 uppercase tracking-widest flex items-center gap-2">
<label className="text-xs font-black text-gray-500 dark:text-gray-400 uppercase tracking-widest flex items-center gap-2">
<Shield size={14} /> Secret (HMAC-SHA256)
</label>
<input
type="text"
id="webhook-secret"
placeholder="Optional signing secret"
className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-colors"
className="w-full bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-colors text-gray-900 dark:text-white"
value={newWebhook.secret}
onChange={e => setNewWebhook({ ...newWebhook, secret: e.target.value })}
/>
@@ -154,7 +154,7 @@ export default function WebhooksPage() {
</div>
<div className="space-y-4">
<label className="text-xs font-black text-gray-400 uppercase tracking-widest flex items-center gap-2">
<label className="text-xs font-black text-gray-500 dark:text-gray-400 uppercase tracking-widest flex items-center gap-2">
<Activity size={14} /> Events to Subscribe
</label>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -164,8 +164,8 @@ export default function WebhooksPage() {
id={`event-${event.id}`}
onClick={() => toggleEvent(event.id)}
className={`p-4 rounded-2xl border transition-all cursor-pointer ${newWebhook.events.includes(event.id)
? 'bg-blue-500/20 border-blue-500 text-blue-400 shadow-[0_0_15px_rgba(59,130,246,0.1)]'
: 'bg-black/20 border-white/10 text-gray-400 hover:bg-white/5'
? 'bg-blue-500/10 border-blue-500 text-blue-600 dark:text-blue-400 shadow-[0_0_15px_rgba(59,130,246,0.1)]'
: 'bg-black/[0.03] dark:bg-black/20 border-black/10 dark:border-white/10 text-gray-500 dark:text-gray-400 hover:bg-black/[0.05] dark:hover:bg-white/5'
}`}
>
<div className="flex items-center justify-between mb-1">
@@ -178,11 +178,11 @@ export default function WebhooksPage() {
</div>
</div>
<div className="flex items-center justify-end gap-4 pt-4 border-t border-white/10">
<div className="flex items-center justify-end gap-4 pt-4 border-t border-black/10 dark:border-white/10">
<button
type="button"
onClick={() => setIsAdding(false)}
className="px-6 py-2 text-sm font-bold text-gray-400 hover:text-white transition-colors"
className="px-6 py-2 text-sm font-bold text-gray-500 hover:text-gray-900 dark:text-white transition-colors"
>
Cancel
</button>
@@ -194,21 +194,21 @@ export default function WebhooksPage() {
<div className="space-y-6">
{webhooks.length === 0 && !isAdding ? (
<div className="text-center py-20 bg-white/5 border border-dashed border-white/10 rounded-3xl">
<div className="text-center py-20 bg-black/5 dark:bg-white/5 border border-dashed border-black/10 dark:border-white/10 rounded-3xl">
<WebhookIcon size={64} className="mx-auto text-gray-600 mb-6" />
<h3 className="text-xl font-bold text-gray-400">No webhooks configured</h3>
<p className="text-sm text-gray-500 mt-2">Add your first webhook to start receiving system notifications.</p>
</div>
) : (
webhooks.map(webhook => (
<div key={webhook.id} className="bg-white/5 border border-white/10 rounded-3xl p-8 flex items-center justify-between group hover:bg-white/[0.07] transition-all">
<div key={webhook.id} className="bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-3xl p-8 flex items-center justify-between group hover:bg-black/[0.07] dark:hover:bg-white/[0.07] transition-all">
<div className="space-y-3">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400">
<Globe size={20} />
</div>
<div>
<h3 className="font-bold text-lg">{webhook.url}</h3>
<h3 className="font-bold text-lg text-gray-900 dark:text-white">{webhook.url}</h3>
<p className="text-xs text-gray-500">Created on {new Date(webhook.created_at).toLocaleDateString()}</p>
</div>
</div>
@@ -234,7 +234,7 @@ export default function WebhooksPage() {
</div>
<button
onClick={() => handleDelete(webhook.id)}
className="delete-webhook-btn p-3 bg-red-500/10 text-red-400 rounded-2xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white transition-all transform hover:scale-110 shadow-lg"
className="delete-webhook-btn p-3 bg-red-500/10 text-red-400 rounded-2xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-gray-900 dark:text-white transition-all transform hover:scale-110 shadow-lg"
title="Delete Webhook"
>
<Trash2 size={20} />