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

feat: Enhance UI with improved dark mode styling and color palette adjustments across course pages.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-03-03 11:11:06 -03:00
parent 1987acd734
commit 9123337200
15 changed files with 374 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/studio/src/components/Courses/LiveSessions.tsx
+21 -21
View File
@@ -72,11 +72,11 @@ export default function LiveSessions({ courseId }: LiveSessionsProps) {
<div className="space-y-6">
<div className="flex justify-between items-center">
<div>
<h2 className="text-xl font-bold flex items-center gap-2">
<Video className="text-blue-500" />
<h2 className="text-xl font-black flex items-center gap-2 text-slate-900 dark:text-white">
<Video className="text-blue-600 dark:text-blue-500" />
Virtual Classrooms
</h2>
<p className="text-sm text-gray-500">Schedule and manage your live Jitsi sessions.</p>
<p className="text-sm text-slate-500 dark:text-gray-400 font-medium">Schedule and manage your live Jitsi sessions.</p>
</div>
<button
onClick={() => setShowForm(true)}
@@ -87,34 +87,34 @@ export default function LiveSessions({ courseId }: LiveSessionsProps) {
</div>
{showForm && (
<div className="bg-white/5 border border-white/10 rounded-2xl p-6 animate-in slide-in-from-top-4">
<div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 animate-in slide-in-from-top-4 shadow-sm">
<form onSubmit={handleCreate} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-1">
<label className="text-xs font-bold text-gray-400">SESSION TITLE</label>
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest">SESSION TITLE</label>
<input
required
className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 focus:border-blue-500 outline-none"
className="w-full bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:border-blue-500 outline-none text-slate-900 dark:text-white font-bold"
placeholder="Weekly Sync Up"
value={formData.title}
onChange={e => setFormData({ ...formData, title: e.target.value })}
/>
</div>
<div className="space-y-1">
<label className="text-xs font-bold text-gray-400">START DATE & TIME</label>
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest">START DATE & TIME</label>
<input
required
type="datetime-local"
className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 focus:border-blue-500 outline-none"
className="w-full bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:border-blue-500 outline-none text-slate-900 dark:text-white font-bold"
value={formData.start_at}
onChange={e => setFormData({ ...formData, start_at: e.target.value })}
/>
</div>
</div>
<div className="space-y-1">
<label className="text-xs font-bold text-gray-400">DESCRIPTION (OPTIONAL)</label>
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest">DESCRIPTION (OPTIONAL)</label>
<textarea
className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 focus:border-blue-500 outline-none h-20"
className="w-full bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2 focus:border-blue-500 outline-none h-24 text-slate-900 dark:text-white font-medium resize-none shadow-inner"
value={formData.description}
onChange={e => setFormData({ ...formData, description: e.target.value })}
/>
@@ -129,18 +129,18 @@ export default function LiveSessions({ courseId }: LiveSessionsProps) {
<div className="grid grid-cols-1 gap-4">
{meetings.map(m => (
<div key={m.id} className="bg-white/5 border border-white/10 rounded-2xl p-5 hover:bg-white/[0.08] transition-all group">
<div key={m.id} className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-5 hover:bg-slate-50 dark:hover:bg-white/[0.08] transition-all group shadow-sm">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400">
<div className="w-12 h-12 rounded-xl bg-blue-600/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
<Video size={24} />
</div>
<div>
<h3 className="font-bold text-lg">{m.title}</h3>
<div className="flex flex-wrap items-center gap-4 text-xs text-gray-400 mt-1">
<span className="flex items-center gap-1"><Calendar size={14} /> {new Date(m.start_at).toLocaleString()}</span>
<span className="flex items-center gap-1"><Clock size={14} /> {m.duration_minutes} min</span>
<span className="capitalize px-2 py-0.5 bg-white/5 rounded-full border border-white/10">{m.provider}</span>
<h3 className="font-bold text-lg text-slate-900 dark:text-white">{m.title}</h3>
<div className="flex flex-wrap items-center gap-4 text-xs text-slate-500 dark:text-gray-400 mt-1 font-medium">
<span className="flex items-center gap-1.5"><Calendar size={14} className="text-slate-400" /> {new Date(m.start_at).toLocaleString()}</span>
<span className="flex items-center gap-1.5"><Clock size={14} className="text-slate-400" /> {m.duration_minutes} min</span>
<span className="capitalize px-2 py-0.5 bg-slate-100 dark:bg-white/5 rounded-full border border-slate-200 dark:border-white/10 text-[10px] font-black uppercase tracking-widest">{m.provider}</span>
</div>
</div>
</div>
@@ -149,7 +149,7 @@ export default function LiveSessions({ courseId }: LiveSessionsProps) {
href={m.join_url}
target="_blank"
rel="noreferrer"
className="flex items-center gap-2 bg-white/10 hover:bg-white/20 px-4 py-2 rounded-xl text-sm font-bold transition-all"
className="flex items-center gap-2 bg-slate-100 dark:bg-white/10 hover:bg-blue-600 dark:hover:bg-white/20 hover:text-white px-4 py-2 rounded-xl text-sm font-bold transition-all shadow-sm text-slate-700 dark:text-white"
>
Join Room <ExternalLink size={14} />
</a>
@@ -165,9 +165,9 @@ export default function LiveSessions({ courseId }: LiveSessionsProps) {
))}
{meetings.length === 0 && !loading && (
<div className="p-12 text-center border-2 border-dashed border-white/5 rounded-3xl">
<AlertCircle className="mx-auto text-gray-600 mb-2" />
<p className="text-gray-500">No sessions scheduled for this course.</p>
<div className="p-12 text-center border-2 border-dashed border-slate-200 dark:border-white/5 rounded-3xl bg-slate-50/50 dark:bg-transparent">
<AlertCircle className="mx-auto text-slate-300 dark:text-gray-600 mb-2" size={32} />
<p className="text-slate-500 dark:text-gray-500 font-medium">No sessions scheduled for this course.</p>
</div>
)}
</div>