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 { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
import { Flame, AlertTriangle, TrendingDown, BookOpen, ArrowRight, BarChart2, Target, CheckCircle2 } from "lucide-react"
@@ -41,8 +41,8 @@ export default function HeatmapPage() {
<div className="flex items-start justify-between gap-4 flex-wrap">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2">
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<Flame className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
<Flame className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Mistake Heatmap Vault
</h1>
@@ -50,7 +50,7 @@ export default function HeatmapPage() {
Visual density map of your errors across subjects and topics — pinpoint your weakest areas instantly.
</p>
</div>
<span className="text-xs font-bold uppercase tracking-wider text-amber-500 bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<span className="text-xs font-bold uppercase tracking-wider text-amber-500 bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)] px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<AlertTriangle size={12} /> Error Density Analysis
</span>
</div>
@@ -143,9 +143,9 @@ export default function HeatmapPage() {
</Card>
{/* Action card */}
<Card className="bg-gradient-to-br from-[#00F0FF]/10 via-secondary/20 to-background border border-[#00F0FF]/20 rounded-2xl">
<Card className="bg-gradient-to-br from-[var(--cyan-ai-10)] via-secondary/20 to-background border border-[var(--cyan-ai-20)] rounded-2xl">
<CardContent className="p-5 space-y-3">
<h3 className="text-sm font-black uppercase tracking-wider text-[#00F0FF]">What To Do Next</h3>
<h3 className="text-sm font-black uppercase tracking-wider text-[var(--cyan-ai)]">What To Do Next</h3>
<div className="space-y-2">
{[
{ label: "Start Mistake Review Session", href: "/dashboard/ai-coach/mistakes" },
@@ -166,7 +166,7 @@ export default function HeatmapPage() {
<Card className="bg-secondary/20 border-border/40 rounded-2xl">
<CardContent className="p-4">
<div className="flex items-start gap-2.5">
<BookOpen size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
<BookOpen size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
<p className="text-xs text-muted-foreground font-medium">
<span className="font-black text-foreground">Pro Tip:</span> Focus the next 3 days entirely on Rotational Dynamics — it alone is worth 8–12 marks in JEE and shows an 80% error rate across your last 5 tests.
</p>