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 { TrendingUp, TrendingDown, Brain, Zap, Target, Clock } from "lucide-react"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
@@ -33,7 +33,7 @@ export function WeeklyProgressReport() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 flex flex-col group hover:border-[#00F0FF]/30 transition-colors">
|
||||
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 flex flex-col group hover:border-[var(--cyan-ai-30)] transition-colors">
|
||||
<CardContent className="p-5 flex flex-col gap-4 h-full">
|
||||
{/* Summary chips */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
@@ -41,7 +41,7 @@ export function WeeklyProgressReport() {
|
||||
<TrendingUp size={12} />
|
||||
{avgAccuracy}% avg accuracy
|
||||
</div>
|
||||
<div className={`flex items-center gap-1.5 text-xs font-bold px-2.5 py-1 rounded-full border ${trendUp ? "bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20" : "bg-red-500/10 text-red-500 border-red-500/20"}`}>
|
||||
<div className={`flex items-center gap-1.5 text-xs font-bold px-2.5 py-1 rounded-full border ${trendUp ? "bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] border-[var(--cyan-ai-20)]" : "bg-red-500/10 text-red-500 border-red-500/20"}`}>
|
||||
{trendUp ? <TrendingUp size={12} /> : <TrendingDown size={12} />}
|
||||
{trendUp ? "+" : ""}{trend}{UNIT} vs Mon
|
||||
</div>
|
||||
@@ -57,7 +57,7 @@ export function WeeklyProgressReport() {
|
||||
<button
|
||||
key={m}
|
||||
onClick={() => setMetric(m)}
|
||||
className={`flex-1 py-1.5 text-xs font-bold rounded-lg border transition-all capitalize ${metric === m ? "bg-[#00F0FF]/10 border-[#00F0FF]/20 text-[#00F0FF]" : "bg-white/5 border-transparent text-muted-foreground hover:bg-white/10"}`}
|
||||
className={`flex-1 py-1.5 text-xs font-bold rounded-lg border transition-all capitalize ${metric === m ? "bg-[var(--cyan-ai-10)] border-[var(--cyan-ai-20)] text-[var(--cyan-ai)]" : "bg-white/5 border-transparent text-muted-foreground hover:bg-white/10"}`}
|
||||
>
|
||||
{m === "accuracy" ? "Accuracy" : m === "questions" ? "Questions" : "Study Hrs"}
|
||||
</button>
|
||||
@@ -93,7 +93,7 @@ export function WeeklyProgressReport() {
|
||||
{hovered === i && (
|
||||
<div className="absolute bottom-full mb-1.5 left-1/2 -translate-x-1/2 bg-background border border-border rounded-lg px-2.5 py-1.5 text-xs font-bold whitespace-nowrap shadow-lg z-10 pointer-events-none">
|
||||
<div>{day}</div>
|
||||
<div className="text-[#00F0FF]">{DATA[i]}{UNIT}</div>
|
||||
<div className="text-[var(--cyan-ai)]">{DATA[i]}{UNIT}</div>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
@@ -101,9 +101,9 @@ export function WeeklyProgressReport() {
|
||||
!isDemo
|
||||
? "bg-white/5 border border-white/10"
|
||||
: i === 6
|
||||
? "bg-gradient-to-t from-[#00F0FF]/60 to-[#00F0FF]"
|
||||
? "bg-gradient-to-t from-[var(--cyan-ai-50)] to-[var(--cyan-ai)]"
|
||||
: hovered === i
|
||||
? "bg-gradient-to-t from-[#00F0FF]/40 to-[#00F0FF]/80"
|
||||
? "bg-gradient-to-t from-[var(--cyan-ai-40)] to-[var(--cyan-ai-80)]"
|
||||
: "bg-gradient-to-t from-white/10 to-white/25"
|
||||
}`}
|
||||
style={{ height: isDemo ? `${(DATA[i] / maxVal) * 100}%` : "4px" }}
|
||||
@@ -127,7 +127,7 @@ export function WeeklyProgressReport() {
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{[
|
||||
{ label: "Avg Accuracy", value: `${avgAccuracy}%`, icon: <Target size={12} className="text-green-400" /> },
|
||||
{ label: "Questions / Day", value: isDemo ? `${Math.round(QUESTIONS.reduce((a, b) => a + b, 0) / 7)}` : "0", icon: <Zap size={12} className="text-[#00F0FF]" /> },
|
||||
{ label: "Questions / Day", value: isDemo ? `${Math.round(QUESTIONS.reduce((a, b) => a + b, 0) / 7)}` : "0", icon: <Zap size={12} className="text-[var(--cyan-ai)]" /> },
|
||||
{ label: "Study Hrs / Day", value: isDemo ? `${(HOURS.reduce((a, b) => a + b, 0) / 7).toFixed(1)}h` : "0.0h", icon: <Clock size={12} className="text-amber-400" /> },
|
||||
].map(stat => (
|
||||
<div key={stat.label} className="p-2.5 rounded-xl bg-white/5 border border-border/30 text-center">
|
||||
@@ -139,13 +139,13 @@ export function WeeklyProgressReport() {
|
||||
</div>
|
||||
|
||||
{/* AI insight */}
|
||||
<div className="px-3 py-2.5 bg-[#00F0FF]/10 border border-[#00F0FF]/20 rounded-xl text-xs text-[#00F0FF] font-medium flex items-start gap-2.5">
|
||||
<div className="px-3 py-2.5 bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-20)] rounded-xl text-xs text-[var(--cyan-ai)] font-medium flex items-start gap-2.5">
|
||||
<Brain size={15} className="shrink-0 mt-0.5" />
|
||||
<div>
|
||||
{isDemo ? (
|
||||
<>
|
||||
<span className="font-black text-white">Sign errors in Thermodynamics</span> — detected in your last 3 attempts (W = −PΔV misapplied). We've queued 3 targeted practice questions for tomorrow.{" "}
|
||||
<span className="text-[#00F0FF]/80"><strong className="text-white">Tip:</strong> You peak at 7–9 PM. Schedule the hardest topics then.</span>
|
||||
<span className="text-[var(--cyan-ai-80)]"><strong className="text-white">Tip:</strong> You peak at 7–9 PM. Schedule the hardest topics then.</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user