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:
@@ -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."}
|
||||
|
||||
Reference in New Issue
Block a user