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 { useEffect, useState } from "react"
import { useParams, useRouter } from "next/navigation"
@@ -12,7 +12,7 @@ import {
} from "lucide-react"
const TIER_STYLE: Record<string, string> = {
"Al_Coach": "bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20",
"Al_Coach": "bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] border-[var(--cyan-ai-20)]",
"Pro": "bg-yellow-500/10 text-yellow-500 border-yellow-500/20",
"Free": "bg-secondary text-foreground border-border",
}
@@ -114,7 +114,7 @@ export default function StudentKundliPage() {
<Button variant="ghost" onClick={() => setEditing(false)} className="gap-2">
<X size={14} /> Cancel
</Button>
<Button onClick={handleSave} disabled={saving} className="gap-2 bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90">
<Button onClick={handleSave} disabled={saving} className="gap-2 bg-[var(--cyan-ai)] text-background hover:bg-[var(--cyan-ai-80)]">
{saving ? <RefreshCw size={14} className="animate-spin" /> : <Save size={14} />}
Save Changes
</Button>
@@ -131,7 +131,7 @@ export default function StudentKundliPage() {
{data.profile_image_url ? (
<img src={data.profile_image_url} alt={data.name} className="w-20 h-20 rounded-2xl object-cover" />
) : (
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-[#00F0FF]/20 to-[#00F0FF]/5 border border-[#00F0FF]/20 flex items-center justify-center text-3xl font-black text-[#00F0FF]">
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-[var(--cyan-ai-20)] to-[var(--cyan-ai-10)] border border-[var(--cyan-ai-20)] flex items-center justify-center text-3xl font-black text-[var(--cyan-ai)]">
{data.name.charAt(0)}
</div>
)}
@@ -203,7 +203,7 @@ export default function StudentKundliPage() {
{/* Stats Grid */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[
{ label: "Tests Attempted", value: data.stats.total_tests, color: "text-[#00F0FF]", icon: <Activity size={16}/> },
{ label: "Tests Attempted", value: data.stats.total_tests, color: "text-[var(--cyan-ai)]", icon: <Activity size={16}/> },
{ label: "Avg Accuracy", value: data.stats.avg_accuracy ? `${data.stats.avg_accuracy}%` : "—", color: "text-green-500", icon: <TrendingUp size={16}/> },
{ label: "AI Sessions", value: data.stats.mastered_mistakes, color: "text-purple-400", icon: <Award size={16}/> },
{
@@ -240,7 +240,7 @@ export default function StudentKundliPage() {
<Card className="lg:col-span-2 border-border shadow-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<Activity size={16} className="text-[#00F0FF]" /> Recent Activity
<Activity size={16} className="text-[var(--cyan-ai)]" /> Recent Activity
</CardTitle>
</CardHeader>
<CardContent>
@@ -255,7 +255,7 @@ export default function StudentKundliPage() {
<div className="text-xs text-muted-foreground mt-0.5">{formatDate(a.submitted_at)}</div>
</div>
<div className="text-right">
<div className="font-mono font-bold text-[#00F0FF] text-sm">{a.score}/{a.total_questions}</div>
<div className="font-mono font-bold text-[var(--cyan-ai)] text-sm">{a.score}/{a.total_questions}</div>
<div className="text-xs text-muted-foreground">{a.accuracy.toFixed(1)}% acc</div>
</div>
</div>
@@ -293,7 +293,7 @@ export default function StudentKundliPage() {
<Card className="border-border shadow-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<Award size={16} className="text-[#00F0FF]" /> Subscription History
<Award size={16} className="text-[var(--cyan-ai)]" /> Subscription History
</CardTitle>
</CardHeader>
<CardContent>