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

- 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:
2026-09-20 12:19:23 +05:30
parent 0fab60b710
commit c17785e38a
57 changed files with 491 additions and 473 deletions

View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
@@ -114,7 +114,7 @@ export default function AIComCBTDPPPage() {
</Link>
<div>
<div className="flex items-center gap-2 mb-1">
<span className="text-xs font-black uppercase tracking-widest text-[#00F0FF] bg-[#00F0FF]/10 px-2.5 py-0.5 rounded-full border border-[#00F0FF]/30">
<span className="text-xs font-black uppercase tracking-widest text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] px-2.5 py-0.5 rounded-full border border-[var(--cyan-ai-30)]">
PrepPilot AI
</span>
<span className="text-xs font-bold text-muted-foreground">• {user?.target_exam?.replace("_", " ") || "JEE/NEET"}</span>
@@ -124,14 +124,14 @@ export default function AIComCBTDPPPage() {
</div>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2 px-4 py-2 bg-background border border-border rounded-2xl font-mono text-lg font-bold text-[#00F0FF] shadow-inner">
<Clock size={18} className="text-[#00F0FF] animate-pulse" />
<div className="flex items-center gap-2 px-4 py-2 bg-background border border-border rounded-2xl font-mono text-lg font-bold text-[var(--cyan-ai)] shadow-inner">
<Clock size={18} className="text-[var(--cyan-ai)] animate-pulse" />
{formatTime(timeLeft)}
</div>
{!submitted ? (
<Button
onClick={() => setSubmitted(true)}
className="bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-bold px-6 rounded-xl shadow-[0_0_15px_rgba(0,240,255,0.2)]"
className="bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] font-bold px-6 rounded-xl shadow-[0_0_15px_rgba(12,96,96,0.2)]"
>
Submit Test <Send size={16} className="ml-2" />
</Button>
@@ -171,7 +171,7 @@ export default function AIComCBTDPPPage() {
<div className="lg:col-span-3">
<Card className="border-border bg-background/80 backdrop-blur-xl p-6 rounded-3xl shadow-xl space-y-6">
<div className="flex justify-between items-center border-b border-border pb-4">
<span className="text-sm font-bold text-[#00F0FF] uppercase tracking-wider">
<span className="text-sm font-bold text-[var(--cyan-ai)] uppercase tracking-wider">
Question {activeQuestion + 1} of {sampleQuestions.length}
</span>
<span className="text-xs font-bold bg-secondary px-3 py-1 rounded-full text-muted-foreground">
@@ -192,7 +192,7 @@ export default function AIComCBTDPPPage() {
let btnStyle = "border-border bg-secondary/20 hover:border-primary/50 text-foreground"
if (isSelected) {
btnStyle = "border-[#00F0FF] bg-[#00F0FF]/15 text-[#00F0FF] font-bold shadow-[0_0_12px_rgba(0,240,255,0.15)]"
btnStyle = "border-[var(--cyan-ai)] bg-[var(--cyan-ai)]/15 text-[var(--cyan-ai)] font-bold shadow-[0_0_12px_rgba(12,96,96,0.15)]"
}
if (submitted) {
if (isCorrect) btnStyle = "border-emerald-500 bg-emerald-500/20 text-emerald-400 font-bold"
@@ -216,7 +216,7 @@ export default function AIComCBTDPPPage() {
</div>
{submitted && (
<div className="mt-6 p-4 rounded-2xl bg-[#00F0FF]/10 border border-[#00F0FF]/30 text-sm text-[#00F0FF] space-y-1 animate-in fade-in">
<div className="mt-6 p-4 rounded-2xl bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-30)] text-sm text-[var(--cyan-ai)] space-y-1 animate-in fade-in">
<span className="font-extrabold uppercase text-xs tracking-wider block">AI Solution & Explanation:</span>
<p>{sampleQuestions[activeQuestion].explanation}</p>
</div>
@@ -236,7 +236,7 @@ export default function AIComCBTDPPPage() {
<Button
disabled={activeQuestion === sampleQuestions.length - 1}
onClick={() => setActiveQuestion(prev => Math.min(sampleQuestions.length - 1, prev + 1))}
className="bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-bold rounded-xl"
className="bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] font-bold rounded-xl"
>
Next Question <ArrowRight size={16} className="ml-2" />
</Button>
@@ -258,9 +258,9 @@ export default function AIComCBTDPPPage() {
onClick={() => setActiveQuestion(idx)}
className={`h-10 rounded-xl text-xs font-extrabold transition-all border ${
isCurr
? "border-[#00F0FF] bg-[#00F0FF] text-black ring-2 ring-[#00F0FF]/50"
? "border-[var(--cyan-ai)] bg-[var(--cyan-ai)] text-black ring-2 ring-[var(--cyan-ai-10)]"
: isAns
? "bg-[#00F0FF]/20 border-[#00F0FF]/40 text-[#00F0FF]"
? "bg-[var(--cyan-ai-20)] border-[var(--cyan-ai-40)] text-[var(--cyan-ai)]"
: "bg-secondary/40 border-border text-muted-foreground hover:border-primary"
}`}
>
@@ -272,10 +272,10 @@ export default function AIComCBTDPPPage() {
<div className="pt-4 border-t border-border space-y-2 text-xs font-semibold text-muted-foreground">
<div className="flex items-center gap-2">
<span className="w-3 h-3 rounded-md bg-[#00F0FF]" /> Current Question
<span className="w-3 h-3 rounded-md bg-[var(--cyan-ai)]" /> Current Question
</div>
<div className="flex items-center gap-2">
<span className="w-3 h-3 rounded-md bg-[#00F0FF]/20 border border-[#00F0FF]/40" /> Answered
<span className="w-3 h-3 rounded-md bg-[var(--cyan-ai-20)] border border-[var(--cyan-ai-40)]" /> Answered
</div>
<div className="flex items-center gap-2">
<span className="w-3 h-3 rounded-md bg-secondary/40 border border-border" /> Unattempted