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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
@@ -24,7 +24,7 @@ export default function AdminDashboard() {
<h1 className="text-3xl font-bold tracking-tighter text-foreground">Command Center</h1>
<p className="text-muted-foreground mt-1 font-medium">Real-time system monitoring and agent status.</p>
</div>
<Button variant="outline" className="gap-2 border-[#00F0FF]/50 text-[#00F0FF] bg-[#00F0FF]/5 hover:bg-[#00F0FF]/10 hover:text-[#00F0FF] rounded-xl font-medium shadow-[0_0_15px_-5px_#00F0FF]">
<Button variant="outline" className="gap-2 border-[var(--cyan-ai-10)] text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] hover:bg-[var(--cyan-ai-10)] hover:text-[var(--cyan-ai)] rounded-xl font-medium shadow-[0_0_15px_-5px_var(--cyan-ai)]">
<RefreshCw size={16} /> Refresh Data
</Button>
</header>
@@ -51,14 +51,14 @@ export default function AdminDashboard() {
<p className="text-xs text-muted-foreground mt-1 font-medium">+2,401 this week</p>
</CardContent>
</Card>
<Card className="bg-[#00F0FF]/5 border-[#00F0FF]/30 shadow-[0_0_20px_-10px_#00F0FF] rounded-2xl">
<Card className="bg-[var(--cyan-ai-10)] border-[var(--cyan-ai-30)] shadow-[0_0_20px_-10px_var(--cyan-ai)] rounded-2xl">
<CardHeader className="pb-2 flex flex-row items-center justify-between">
<CardTitle className="text-sm font-medium text-muted-foreground">AI Agent Accuracy</CardTitle>
<div className="p-2 bg-[#00F0FF]/20 text-[#00F0FF] rounded-lg"><Terminal size={16}/></div>
<div className="p-2 bg-[var(--cyan-ai-20)] text-[var(--cyan-ai)] rounded-lg"><Terminal size={16}/></div>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-[#00F0FF]">96.4%</div>
<p className="text-xs text-[#00F0FF]/70 mt-1 font-medium">Based on 1.2M interactions</p>
<div className="text-2xl font-bold text-[var(--cyan-ai)]">96.4%</div>
<p className="text-xs text-[var(--cyan-ai-80)] mt-1 font-medium">Based on 1.2M interactions</p>
</CardContent>
</Card>
<Card className="bg-secondary/10 border-border/50 rounded-2xl">
@@ -84,8 +84,8 @@ export default function AdminDashboard() {
<AreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
<defs>
<linearGradient id="colorTokens" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#00F0FF" stopOpacity={0.3}/>
<stop offset="95%" stopColor="#00F0FF" stopOpacity={0}/>
<stop offset="5%" stopColor="var(--cyan-ai)" stopOpacity={0.3}/>
<stop offset="95%" stopColor="var(--cyan-ai)" stopOpacity={0}/>
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" stroke="#262626" vertical={false} />
@@ -93,9 +93,9 @@ export default function AdminDashboard() {
<YAxis stroke="#737373" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => `${value}M`} />
<Tooltip
contentStyle={{ backgroundColor: '#0a0a0a', borderColor: '#262626', borderRadius: '12px' }}
itemStyle={{ color: '#00F0FF', fontWeight: 'bold' }}
itemStyle={{ color: 'var(--cyan-ai)', fontWeight: 'bold' }}
/>
<Area type="monotone" dataKey="tokens" stroke="#00F0FF" strokeWidth={3} fillOpacity={1} fill="url(#colorTokens)" />
<Area type="monotone" dataKey="tokens" stroke="var(--cyan-ai)" strokeWidth={3} fillOpacity={1} fill="url(#colorTokens)" />
</AreaChart>
</ResponsiveContainer>
</CardContent>
@@ -157,7 +157,7 @@ export default function AdminDashboard() {
<div>
<CardTitle>Recent Question Uploads</CardTitle>
</div>
<Button size="sm" className="bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-bold rounded-xl h-10 px-4">Add Question</Button>
<Button size="sm" className="bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] font-bold rounded-xl h-10 px-4">Add Question</Button>
</CardHeader>
<CardContent>
<div className="rounded-2xl border border-border overflow-hidden">
@@ -178,7 +178,7 @@ export default function AdminDashboard() {
<td className="px-5 py-4 font-medium">Thermodynamics</td>
<td className="px-5 py-4 text-muted-foreground truncate max-w-[300px]">An ideal gas undergoes an isothermal expansion...</td>
<td className="px-5 py-4 text-right">
<Button variant="ghost" size="sm" className="text-[#00F0FF] hover:text-[#00F0FF] hover:bg-[#00F0FF]/10 font-bold rounded-lg">Edit</Button>
<Button variant="ghost" size="sm" className="text-[var(--cyan-ai)] hover:text-[var(--cyan-ai)] hover:bg-[var(--cyan-ai-10)] font-bold rounded-lg">Edit</Button>
</td>
</tr>
<tr className="hover:bg-secondary/20 transition-colors">
@@ -187,7 +187,7 @@ export default function AdminDashboard() {
<td className="px-5 py-4 font-medium">Calculus</td>
<td className="px-5 py-4 text-muted-foreground truncate max-w-[300px]">Evaluate the integral of e^x sin(x) dx...</td>
<td className="px-5 py-4 text-right">
<Button variant="ghost" size="sm" className="text-[#00F0FF] hover:text-[#00F0FF] hover:bg-[#00F0FF]/10 font-bold rounded-lg">Edit</Button>
<Button variant="ghost" size="sm" className="text-[var(--cyan-ai)] hover:text-[var(--cyan-ai)] hover:bg-[var(--cyan-ai-10)] font-bold rounded-lg">Edit</Button>
</td>
</tr>
</tbody>