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 { useEffect, useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
@@ -69,7 +69,7 @@ export function ReadinessGauge() {
return (
<div className="flex flex-col h-full">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] relative overflow-hidden flex-1 flex flex-col justify-between p-5 min-h-[440px] group hover:border-[#00F0FF]/30 transition-colors">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] relative overflow-hidden flex-1 flex flex-col justify-between p-5 min-h-[440px] group hover:border-[var(--cyan-ai-30)] transition-colors">
{/* Background glow decoration */}
<div className="absolute -top-1/2 -right-1/4 w-48 h-48 bg-[radial-gradient(circle,rgba(94,196,184,0.06)_0%,transparent_70%)] rounded-full pointer-events-none" />
@@ -89,11 +89,11 @@ export function ReadinessGauge() {
<svg className="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
<defs>
<linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="#00F0FF" />
<stop offset="0%" stopColor="var(--cyan-ai)" />
<stop offset="100%" stopColor="#3B82F6" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="45" stroke="currentColor" strokeWidth="6" fill="transparent" className="text-[#00F0FF]/10" />
<circle cx="50" cy="50" r="45" stroke="currentColor" strokeWidth="6" fill="transparent" className="text-[var(--cyan-ai-10)]" />
<circle
cx="50" cy="50" r="45"
stroke="url(#scoreGradient)"
@@ -147,7 +147,7 @@ export function ReadinessGauge() {
{/* Subject Bars */}
<div className="space-y-2 mb-4 relative z-10">
{[
{ name: "Physics", val: isZero ? 0 : 68, color: "#00F0FF" },
{ name: "Physics", val: isZero ? 0 : 68, color: "var(--cyan-ai)" },
{ name: "Chemistry", val: isZero ? 0 : 74, color: "#F59E0B" },
{ name: "Biology / Maths", val: isZero ? 0 : 82, color: "#10B981" },
].map(sub => (
@@ -173,8 +173,8 @@ export function ReadinessGauge() {
</span>
</div>
<div className="mt-auto px-3.5 py-3 bg-[#00F0FF]/10 border border-[#00F0FF]/20 rounded-lg text-xs md:text-sm text-[#00F0FF] font-bold flex items-center gap-2 relative z-10">
<Flame size={18} className="fill-[#00F0FF]/20 shrink-0" />
<div className="mt-auto px-3.5 py-3 bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-20)] rounded-lg text-xs md:text-sm text-[var(--cyan-ai)] font-bold flex items-center gap-2 relative z-10">
<Flame size={18} className="fill-[var(--cyan-ai-20)] shrink-0" />
{isZero
? "Complete your first diagnostic test to establish your personalized readiness score."
: "Your speed has dropped slightly. Focus on time-bound practice today."}