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 { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
||||
import { LineChart as LineChartIcon, Activity, BrainCircuit } from "lucide-react"
|
||||
@@ -59,8 +59,8 @@ export default function AnalyticsPage() {
|
||||
<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">
|
||||
<LineChartIcon 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)]">
|
||||
<LineChartIcon className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
|
||||
</span>
|
||||
Performance Analytics
|
||||
</h1>
|
||||
@@ -73,7 +73,7 @@ export default function AnalyticsPage() {
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<Card className="col-span-1 lg:col-span-2 border-border shadow-sm bg-background">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2"><LineChartIcon className="text-[#00F0FF]" size={20} /> Projected Score Trajectory</CardTitle>
|
||||
<CardTitle className="flex items-center gap-2"><LineChartIcon className="text-[var(--cyan-ai)]" size={20} /> Projected Score Trajectory</CardTitle>
|
||||
<CardDescription>
|
||||
{isDemo ? "Your mock scores over the last 6 months projected towards the final exam." : "Your mock test trajectory will plot here as you complete tests."}
|
||||
</CardDescription>
|
||||
@@ -86,18 +86,18 @@ export default function AnalyticsPage() {
|
||||
<YAxis stroke="#888" tick={{ fill: '#888' }} domain={[0, 300]} />
|
||||
<Tooltip
|
||||
contentStyle={{ backgroundColor: '#1f2937', borderColor: '#374151', borderRadius: '8px' }}
|
||||
itemStyle={{ color: '#00F0FF' }}
|
||||
itemStyle={{ color: 'var(--cyan-ai)' }}
|
||||
/>
|
||||
<Line type="monotone" dataKey="score" stroke="#00F0FF" strokeWidth={3} dot={{ r: 4, fill: '#00F0FF' }} activeDot={{ r: 6 }} />
|
||||
<Line type="monotone" dataKey="score" stroke="var(--cyan-ai)" strokeWidth={3} dot={{ r: 4, fill: 'var(--cyan-ai)' }} activeDot={{ r: 6 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Card className="border-[#00F0FF]/30 bg-[#00F0FF]/5">
|
||||
<Card className="border-[var(--cyan-ai-30)] bg-[var(--cyan-ai-10)]">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-lg flex items-center gap-2"><BrainCircuit size={18} className="text-[#00F0FF]"/> AI Diagnosis</CardTitle>
|
||||
<CardTitle className="text-lg flex items-center gap-2"><BrainCircuit size={18} className="text-[var(--cyan-ai)]"/> AI Diagnosis</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-foreground/80 leading-relaxed font-medium">
|
||||
|
||||
Reference in New Issue
Block a user