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 { useState, useEffect } from "react"
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
||||
@@ -30,7 +30,7 @@ const getStatusIcon = (status: ChapterStatus) => {
|
||||
switch (status) {
|
||||
case 'Mastered': return <CheckCircle2 className="text-emerald-500" size={16} />
|
||||
case 'Practiced': return <CheckCircle2 className="text-amber-500" size={16} />
|
||||
case 'In Progress': return <Clock className="text-[#00F0FF]" size={16} />
|
||||
case 'In Progress': return <Clock className="text-[var(--cyan-ai)]" size={16} />
|
||||
case 'Not Started': return <Circle className="text-muted-foreground" size={16} />
|
||||
}
|
||||
}
|
||||
@@ -179,8 +179,8 @@ export default function ProgressTrackerPage() {
|
||||
<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">
|
||||
<Target 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)]">
|
||||
<Target className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
|
||||
</span>
|
||||
Syllabus Tracker
|
||||
</h1>
|
||||
@@ -195,9 +195,9 @@ export default function ProgressTrackerPage() {
|
||||
<Card key={i} className="border-border shadow-sm">
|
||||
<CardContent className="p-6 text-center">
|
||||
<h3 className="font-bold text-lg mb-2">{sub.name}</h3>
|
||||
<div className="text-3xl font-black text-[#00F0FF] mb-3">{sub.completionPct}%</div>
|
||||
<div className="text-3xl font-black text-[var(--cyan-ai)] mb-3">{sub.completionPct}%</div>
|
||||
<div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
|
||||
<div className="h-full bg-[#00F0FF]" style={{ width: `${sub.completionPct}%` }}></div>
|
||||
<div className="h-full bg-[var(--cyan-ai)]" style={{ width: `${sub.completionPct}%` }}></div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user