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 { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
@@ -66,7 +66,7 @@ export default function LoginPage() {
}
return (
<div className="min-h-screen bg-background flex flex-col items-center justify-center p-6 selection:bg-[#00F0FF]/20">
<div className="min-h-screen bg-background flex flex-col items-center justify-center p-6 selection:bg-[var(--cyan-ai-20)]">
<Link href="/" className="absolute top-8 left-8 text-muted-foreground hover:text-foreground flex items-center gap-2 transition-colors font-medium">
<ArrowLeft size={16} /> Back to Home
</Link>
@@ -76,7 +76,7 @@ export default function LoginPage() {
<Logo href="/" className="w-72" imageClassName="object-contain" height={80} />
</div>
<Card className="border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[#00F0FF]/5 rounded-[2rem] overflow-hidden">
<Card className="border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[var(--cyan-ai-10)] rounded-[2rem] overflow-hidden">
<CardHeader className="text-center pb-2">
<CardTitle className="text-2xl font-bold tracking-tight">Welcome back</CardTitle>
<CardDescription className="text-muted-foreground">Enter your credentials to access your dashboard.</CardDescription>
@@ -92,7 +92,7 @@ export default function LoginPage() {
onChange={(e) => setEmail(e.target.value)}
placeholder="student@example.com"
suppressHydrationWarning
className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#00F0FF] focus:border-transparent transition-all"
className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai)] focus:border-transparent transition-all"
/>
</div>
<div className="space-y-2">
@@ -100,7 +100,7 @@ export default function LoginPage() {
<label className="text-sm font-bold text-foreground">
Password
</label>
<Link href="/forgot-password" className="text-xs font-bold text-[#00F0FF] hover:text-[#00F0FF]/80 transition-colors">Forgot password?</Link>
<Link href="/forgot-password" className="text-xs font-bold text-[var(--cyan-ai)] hover:text-[var(--cyan-ai-80)] transition-colors">Forgot password?</Link>
</div>
<div className="relative">
<input
@@ -109,7 +109,7 @@ export default function LoginPage() {
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
suppressHydrationWarning
className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#00F0FF] focus:border-transparent transition-all pr-10"
className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai)] focus:border-transparent transition-all pr-10"
/>
<button
type="button"
@@ -128,7 +128,7 @@ export default function LoginPage() {
</div>
)}
<Button type="submit" className="w-full rounded-xl h-12 font-bold text-base bg-foreground text-background hover:bg-foreground/90 transition-all shadow-[0_0_15px_-5px_#00F0FF]">
<Button type="submit" className="w-full rounded-xl h-12 font-bold text-base bg-foreground text-background hover:bg-foreground/90 transition-all shadow-[0_0_15px_-5px_var(--cyan-ai)]">
Sign In
</Button>
</form>