naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: cyan -> rgb(12,96,96) in light theme, #00F0FF stays in dark theme

Browse Source 
- 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:
ectasy663
2026-09-20 12:19:23 +05:30
parent 0fab60b710
commit c17785e38a
57 changed files with 491 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/checkout/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useEffect, useState } from "react"
import { useRouter, useSearchParams } from "next/navigation"
@@ -18,7 +18,7 @@ import { Suspense } from "react"
export default function CheckoutPage() {
return (
<Suspense fallback={<div className="min-h-screen bg-background flex items-center justify-center"><Loader2 className="animate-spin text-[#00F0FF]" size={48} /></div>}>
<Suspense fallback={<div className="min-h-screen bg-background flex items-center justify-center"><Loader2 className="animate-spin text-[var(--cyan-ai)]" size={48} /></div>}>
<CheckoutContent />
</Suspense>
)
@@ -137,7 +137,7 @@ function CheckoutContent() {
address: address
},
theme: {
color: "#00F0FF"
color: "var(--cyan-ai)"
}
}
@@ -171,7 +171,7 @@ function CheckoutContent() {
if (userLoading || !userId) {
return (
<div className="min-h-screen bg-background flex items-center justify-center">
<Loader2 className="animate-spin text-[#00F0FF]" size={48} />
<Loader2 className="animate-spin text-[var(--cyan-ai)]" size={48} />
</div>
)
}
@@ -179,12 +179,12 @@ function CheckoutContent() {
if (success) {
return (
<div className="min-h-screen bg-background flex flex-col items-center justify-center p-6 animate-in fade-in zoom-in duration-500">
<Card className="max-w-md w-full border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[#00F0FF]/20 rounded-[2rem] text-center p-8">
<CheckCircle2 size={80} className="text-[#00F0FF] mx-auto mb-6" />
<Card className="max-w-md w-full border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[var(--cyan-ai-20)] rounded-[2rem] text-center p-8">
<CheckCircle2 size={80} className="text-[var(--cyan-ai)] mx-auto mb-6" />
<h2 className="text-3xl font-black mb-2">Payment Successful!</h2>
<p className="text-muted-foreground mb-8">Your account has been upgraded to the <strong>{tier}</strong> tier.</p>
<div className="flex justify-center">
<Loader2 className="animate-spin text-[#00F0FF]" size={24} />
<Loader2 className="animate-spin text-[var(--cyan-ai)]" size={24} />
<span className="ml-3 font-medium">Redirecting to dashboard...</span>
</div>
</Card>
@@ -217,7 +217,7 @@ function CheckoutContent() {
onChange={(e) => setPhone(e.target.value.replace(/[^0-9]/g, ''))}
maxLength={10}
placeholder="9876543210"
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">
@@ -227,7 +227,7 @@ function CheckoutContent() {
onChange={(e) => setAddress(e.target.value)}
placeholder="Complete address (House No, Street, City, State, PIN)"
rows={3}
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 resize-none"
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 resize-none"
/>
</div>
</CardContent>
@@ -239,7 +239,7 @@ function CheckoutContent() {
<div className="hidden md:block">
<h2 className="text-3xl font-black tracking-tight text-transparent select-none">Summary</h2>
</div>
<Card className="border-border bg-gradient-to-b from-secondary/30 to-background backdrop-blur-md rounded-[2rem] overflow-hidden relative shadow-xl shadow-[#00F0FF]/5">
<Card className="border-border bg-gradient-to-b from-secondary/30 to-background backdrop-blur-md rounded-[2rem] overflow-hidden relative shadow-xl shadow-[var(--cyan-ai-10)]">
<CardHeader className="border-b border-border/50 bg-background/50">
<CardTitle>Order Summary</CardTitle>
</CardHeader>
@@ -255,7 +255,7 @@ function CheckoutContent() {
<div className="h-px w-full bg-border/50 my-4" />
<div className="flex justify-between items-center text-xl font-black">
<span>Total Amount</span>
<span className="text-[#00F0FF]">₹{amount.toLocaleString()}</span>
<span className="text-[var(--cyan-ai)]">₹{amount.toLocaleString()}</span>
</div>
{error && (
@@ -266,7 +266,7 @@ function CheckoutContent() {
</CardContent>
<CardFooter className="flex-col gap-4 bg-background/50 pt-4">
<Button
className="w-full rounded-xl h-14 font-bold text-lg bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 transition-all shadow-[0_0_20px_-5px_#00F0FF]"
className="w-full rounded-xl h-14 font-bold text-lg bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] transition-all shadow-[0_0_20px_-5px_var(--cyan-ai)]"
onClick={handlePayment}
disabled={processing}
>