naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: cyan -> rgb(12,96,96) in light theme, #00F0FF stays in dark theme

Browse Source 
- globals.css: add --cyan-ai CSS variable (rgb(12,96,96) light / #00F0FF dark)
  + opacity variants --cyan-ai-10/20/30/40/50/80
- Bulk replace all #00F0FF hardcoded Tailwind arbitrary values with
  var(--cyan-ai) / var(--cyan-ai-10) / etc across 55+ TSX/TS files
- Shadow glow colours also updated (suppressed by box-shadow:none in light mode)
- TypeScript: 0 errors
This commit is contained in:
ectasy663
2026-09-20 12:19:23 +05:30
parent 0fab60b710
commit c17785e38a
57 changed files with 491 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/dashboard/cbt/page.tsx
View File

@@ -1,4 +1,4 @@
"use client";
"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
@@ -118,7 +118,7 @@ export default function CBTPage() {
if (userLoading || loading) {
return (
<div className="h-[70vh] flex flex-col items-center justify-center p-8">
<div className="h-8 w-8 border-4 border-[#00F0FF] border-t-transparent rounded-full animate-spin mb-4"></div>
<div className="h-8 w-8 border-4 border-[var(--cyan-ai)] border-t-transparent rounded-full animate-spin mb-4"></div>
<p className="text-muted-foreground font-medium animate-pulse">Loading exams...</p>
</div>
)
@@ -129,8 +129,8 @@ export default function CBTPage() {
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<MonitorPlay className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[var(--cyan-ai-10)] border border-yellow-300/60 dark:border-[var(--cyan-ai-20)]">
<MonitorPlay className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Computer Based Tests (CBT)
</h1>
@@ -145,7 +145,7 @@ export default function CBTPage() {
type="date"
value={dateFilter}
onChange={(e) => setDateFilter(e.target.value)}
className="w-full px-4 py-2 bg-background border border-border rounded-xl text-sm focus:ring-2 focus:ring-[#00F0FF] outline-none text-foreground dark:[color-scheme:dark] [color-scheme:light]"
className="w-full px-4 py-2 bg-background border border-border rounded-xl text-sm focus:ring-2 focus:ring-[var(--cyan-ai)] outline-none text-foreground dark:[color-scheme:dark] [color-scheme:light]"
/>
</div>
<div className="relative w-full sm:w-64">
@@ -155,7 +155,7 @@ export default function CBTPage() {
placeholder="Search exams..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full pl-10 pr-4 py-2 bg-background border border-border rounded-xl text-sm focus:ring-2 focus:ring-[#00F0FF] outline-none"
className="w-full pl-10 pr-4 py-2 bg-background border border-border rounded-xl text-sm focus:ring-2 focus:ring-[var(--cyan-ai)] outline-none"
/>
</div>
</div>
@@ -178,7 +178,7 @@ export default function CBTPage() {
<div className="space-y-6">
<h2 className="text-xl font-bold border-b border-border pb-2 flex items-center gap-2">
<Clock size={20} className="text-[#00F0FF]" /> Upcoming & Active Exams
<Clock size={20} className="text-[var(--cyan-ai)]" /> Upcoming & Active Exams
</h2>
{/* BUG-08 fix: Filter out already attempted exams from Upcoming & Active list */}
@@ -218,11 +218,11 @@ export default function CBTPage() {
const isExpired = endTime ? now > endTime : false;
return (
<Card key={exam.id} className={`hover:border-[#00F0FF]/50 hover:shadow-[0_0_15px_-5px_#00F0FF] transition-all group ${isLocked || isExpired ? 'opacity-80' : ''}`}>
<Card key={exam.id} className={`hover:border-[var(--cyan-ai-10)] hover:shadow-[0_0_15px_-5px_var(--cyan-ai)] transition-all group ${isLocked || isExpired ? 'opacity-80' : ''}`}>
<CardContent className="p-6">
<div className="flex justify-between items-start mb-4">
<div className="flex gap-2 flex-wrap">
<Badge variant="outline" className="bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20">
<Badge variant="outline" className="bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] border-[var(--cyan-ai-20)]">
{exam.type} Test
</Badge>
{exam.exam_pattern && (
@@ -245,7 +245,7 @@ export default function CBTPage() {
</Badge>
) : null}
</div>
<h3 className="font-bold text-lg leading-tight mb-2 group-hover:text-[#00F0FF] transition-colors">
<h3 className="font-bold text-lg leading-tight mb-2 group-hover:text-[var(--cyan-ai)] transition-colors">
{exam.title}
</h3>
<div className="text-sm text-muted-foreground space-y-1 mb-6">
@@ -262,7 +262,7 @@ export default function CBTPage() {
) : isLocked ? (
<Button
onClick={() => setShowUpgradeModal(true)}
className="w-full gap-2 rounded-xl bg-secondary text-muted-foreground border border-dashed border-border hover:border-[#00F0FF]/50 hover:text-foreground font-bold"
className="w-full gap-2 rounded-xl bg-secondary text-muted-foreground border border-dashed border-border hover:border-[var(--cyan-ai-10)] hover:text-foreground font-bold"
>
<Lock size={16} /> Unlock Test
</Button>
@@ -272,7 +272,7 @@ export default function CBTPage() {
</Button>
) : (
<Link href={`/cbt/${exam.id}`}>
<Button className="w-full gap-2 rounded-xl bg-secondary text-foreground hover:bg-[#00F0FF] hover:text-background font-bold transition-colors">
<Button className="w-full gap-2 rounded-xl bg-secondary text-foreground hover:bg-[var(--cyan-ai)] hover:text-background font-bold transition-colors">
<PlayCircle size={16} /> Start Exam
</Button>
</Link>
@@ -331,7 +331,7 @@ export default function CBTPage() {
</div>
<div className="text-right">
<div className="text-xs md:text-sm text-muted-foreground font-bold uppercase tracking-wider">Accuracy</div>
<div className="font-bold text-base md:text-lg text-[#00F0FF]">{Math.round(attempt.accuracy)}%</div>
<div className="font-bold text-base md:text-lg text-[var(--cyan-ai)]">{Math.round(attempt.accuracy)}%</div>
</div>
<Link href={`/dashboard/cbt/history/${attempt.id}`}>
<Button variant="outline" className="rounded-xl border-border hover:bg-primary hover:text-primary-foreground">