yvg/pounce
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: Revert to dots instead of icons, use accent green, fix max-width
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
Details
CI / Frontend Build (push) Has been cancelled
Details
CI / Backend Lint (push) Has been cancelled
Details
CI / Backend Tests (push) Has been cancelled
Details
CI / Docker Build (push) Has been cancelled
Details
CI / Security Scan (push) Has been cancelled
Details
Deploy / Build & Push Images (push) Has been cancelled
Details
Deploy / Deploy to Server (push) Has been cancelled
Details
Deploy / Notify (push) Has been cancelled
Details

Browse Source 
DASHBOARD:
- Reverted status icons to simple dots with pulse animation
- Changed max-width from 5xl to 7xl (matching tld-pricing)
- All colors back to accent/green (no cyan/emerald/etc)
- Stats cards use accent color for positive values
- Monitoring domains show pulsing green dot
- Added proper spacing (pt-28/32, pb-20/24)

SETTINGS:
- Updated to match dashboard style (max-w-7xl)
- Same padding and spacing
- rounded-2xl for modern look
- Accent green for highlights
- Pulsing dots for active alerts
- Consistent border and bg colors
This commit is contained in:
yves.gugger
2025-12-09 09:30:37 +01:00
parent 5360c4938c
commit 674a0f0219
2 changed files with 127 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
frontend/src/app/dashboard/page.tsx
View File

@ -36,10 +36,6 @@ import {
Globe, Globe,
ArrowUpRight, ArrowUpRight,
ArrowDownRight, ArrowDownRight,
Radio,
CircleCheck,
CircleX,
CircleAlert,
} from 'lucide-react' } from 'lucide-react'
import clsx from 'clsx' import clsx from 'clsx'
import Link from 'next/link' import Link from 'next/link'
@ -374,59 +370,12 @@ export default function DashboardPage() {
const isProOrHigher = tierName === 'Professional' || tierName === 'Enterprise' || tierName === 'Trader' || tierName === 'Tycoon' const isProOrHigher = tierName === 'Professional' || tierName === 'Enterprise' || tierName === 'Trader' || tierName === 'Tycoon'
const isEnterprise = tierName === 'Enterprise' || tierName === 'Tycoon' const isEnterprise = tierName === 'Enterprise' || tierName === 'Tycoon'
// Get domain status with icon
const getDomainStatus = (domain: any) => {
const exp = formatExpirationDate(domain.expiration_date)
if (domain.is_available) {
return {
icon: CircleCheck,
label: 'Available',
color: 'text-emerald-400',
bg: 'bg-emerald-400/10',
ring: 'ring-emerald-400/30',
pulse: false
}
}
if (exp?.urgent) {
return {
icon: CircleAlert,
label: 'Expiring',
color: 'text-amber-400',
bg: 'bg-amber-400/10',
ring: 'ring-amber-400/30',
pulse: true
}
}
if (domain.notify_on_available) {
return {
icon: Radio,
label: 'Monitoring',
color: 'text-cyan-400',
bg: 'bg-cyan-400/10',
ring: 'ring-cyan-400/30',
pulse: true
}
}
return {
icon: CircleX,
label: 'Registered',
color: 'text-foreground-subtle',
bg: 'bg-foreground/5',
ring: 'ring-foreground/10',
pulse: false
}
}
return ( return (
<div className="min-h-screen bg-background flex flex-col"> <div className="min-h-screen bg-background flex flex-col">
<Header /> <Header />
<main className="flex-1 pt-28 sm:pt-32 pb-20 sm:pb-24 px-4 sm:px-6"> <main className="flex-1 pt-28 sm:pt-32 pb-20 sm:pb-24 px-4 sm:px-6 lg:px-8">
<div className="max-w-5xl mx-auto"> <div className="max-w-7xl mx-auto">
{/* Header */} {/* Header */}
<div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8"> <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8">
<div> <div>
@ -512,49 +461,26 @@ export default function DashboardPage() {
<div className="space-y-6"> <div className="space-y-6">
{/* Stats Row */} {/* Stats Row */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
<div className="p-5 bg-background-secondary/50 border border-border rounded-2xl hover:border-foreground/20 transition-colors"> <div className="p-5 bg-background-secondary border border-border rounded-2xl hover:border-foreground/20 transition-colors">
<div className="flex items-center gap-2 mb-2"> <p className="text-ui-xs text-foreground-muted uppercase tracking-wider mb-2">Tracked</p>
<div className="w-6 h-6 rounded-md bg-foreground/10 flex items-center justify-center">
<Eye className="w-3.5 h-3.5 text-foreground-muted" />
</div>
<p className="text-ui-xs text-foreground-muted uppercase tracking-wider">Tracked</p>
</div>
<p className="text-3xl font-display text-foreground">{domains.length}</p> <p className="text-3xl font-display text-foreground">{domains.length}</p>
</div> </div>
<div className="p-5 bg-emerald-500/5 border border-emerald-500/20 rounded-2xl hover:border-emerald-500/40 transition-colors"> <div className="p-5 bg-accent/5 border border-accent/20 rounded-2xl hover:border-accent/40 transition-colors">
<div className="flex items-center gap-2 mb-2"> <p className="text-ui-xs text-accent/80 uppercase tracking-wider mb-2">Available</p>
<div className="w-6 h-6 rounded-md bg-emerald-500/20 flex items-center justify-center"> <p className="text-3xl font-display text-accent">{availableCount}</p>
<CircleCheck className="w-3.5 h-3.5 text-emerald-400" />
</div> </div>
<p className="text-ui-xs text-emerald-400/80 uppercase tracking-wider">Available</p> <div className="p-5 bg-accent/5 border border-accent/20 rounded-2xl hover:border-accent/40 transition-colors">
</div> <p className="text-ui-xs text-accent/80 uppercase tracking-wider mb-2">Monitoring</p>
<p className="text-3xl font-display text-emerald-400">{availableCount}</p> <p className="text-3xl font-display text-accent">{domains.filter(d => d.notify_on_available).length}</p>
</div>
<div className="p-5 bg-cyan-500/5 border border-cyan-500/20 rounded-2xl hover:border-cyan-500/40 transition-colors">
<div className="flex items-center gap-2 mb-2">
<div className="w-6 h-6 rounded-md bg-cyan-500/20 flex items-center justify-center">
<Radio className="w-3.5 h-3.5 text-cyan-400" />
</div>
<p className="text-ui-xs text-cyan-400/80 uppercase tracking-wider">Monitoring</p>
</div>
<p className="text-3xl font-display text-cyan-400">{domains.filter(d => d.notify_on_available).length}</p>
</div> </div>
<div className={clsx( <div className={clsx(
"p-5 border rounded-2xl transition-colors", "p-5 border rounded-2xl transition-colors",
expiringCount > 0 expiringCount > 0
? "bg-amber-500/5 border-amber-500/20 hover:border-amber-500/40" ? "bg-warning/5 border-warning/20 hover:border-warning/40"
: "bg-background-secondary/50 border-border hover:border-foreground/20" : "bg-background-secondary border-border hover:border-foreground/20"
)}> )}>
<div className="flex items-center gap-2 mb-2"> <p className={clsx("text-ui-xs uppercase tracking-wider mb-2", expiringCount > 0 ? "text-warning/80" : "text-foreground-muted")}>Expiring</p>
<div className={clsx( <p className={clsx("text-3xl font-display", expiringCount > 0 ? "text-warning" : "text-foreground")}>{expiringCount}</p>
"w-6 h-6 rounded-md flex items-center justify-center",
expiringCount > 0 ? "bg-amber-500/20" : "bg-foreground/10"
)}>
<CircleAlert className={clsx("w-3.5 h-3.5", expiringCount > 0 ? "text-amber-400" : "text-foreground-muted")} />
</div>
<p className={clsx("text-ui-xs uppercase tracking-wider", expiringCount > 0 ? "text-amber-400/80" : "text-foreground-muted")}>Expiring</p>
</div>
<p className={clsx("text-3xl font-display", expiringCount > 0 ? "text-amber-400" : "text-foreground")}>{expiringCount}</p>
</div> </div>
</div> </div>
@ -601,43 +527,40 @@ export default function DashboardPage() {
<tbody className="divide-y divide-border/50"> <tbody className="divide-y divide-border/50">
{domains.map((domain) => { {domains.map((domain) => {
const exp = formatExpirationDate(domain.expiration_date) const exp = formatExpirationDate(domain.expiration_date)
const status = getDomainStatus(domain) const isMonitoring = domain.notify_on_available
const StatusIcon = status.icon
return ( return (
<tr key={domain.id} className="group hover:bg-background-secondary/60 transition-all duration-200"> <tr key={domain.id} className="group hover:bg-background-secondary/60 transition-all duration-200">
<td className="px-5 py-4"> <td className="px-5 py-4">
<div className="flex items-center gap-3.5"> <div className="flex items-center gap-3">
<div className="relative">
<div className={clsx( <div className={clsx(
"relative w-8 h-8 rounded-lg flex items-center justify-center ring-1", "w-2.5 h-2.5 rounded-full",
status.bg, status.ring domain.is_available ? "bg-accent" : isMonitoring ? "bg-accent" : "bg-foreground-subtle"
)}>
<StatusIcon className={clsx("w-4 h-4", status.color)} />
{status.pulse && (
<span className={clsx(
"absolute inset-0 rounded-lg animate-ping opacity-30",
status.bg
)} /> )} />
{isMonitoring && (
<span className="absolute inset-0 rounded-full bg-accent animate-ping opacity-40" />
)} )}
</div> </div>
<div> <span className="font-mono text-body-sm text-foreground">{domain.name}</span>
<span className="font-mono text-body-sm font-medium text-foreground">{domain.name}</span>
<p className={clsx("text-ui-xs mt-0.5 sm:hidden", status.color)}>{status.label}</p>
</div>
</div> </div>
</td> </td>
<td className="px-5 py-4 hidden sm:table-cell"> <td className="px-5 py-4 hidden sm:table-cell">
<span className={clsx( <span className={clsx(
"inline-flex items-center gap-1.5 text-ui-xs px-2.5 py-1 rounded-full font-medium", "text-ui-xs px-2.5 py-1 rounded-full",
status.bg, status.color domain.is_available
? "text-accent bg-accent/10"
: isMonitoring
? "text-accent bg-accent/10"
: "text-foreground-muted bg-foreground/5"
)}> )}>
{status.label} {domain.is_available ? 'Available' : isMonitoring ? 'Monitoring' : 'Registered'}
</span> </span>
</td> </td>
<td className="px-5 py-4 hidden lg:table-cell"> <td className="px-5 py-4 hidden lg:table-cell">
{exp ? ( {exp ? (
<span className={clsx( <span className={clsx(
"text-body-sm flex items-center gap-1.5", "text-body-sm flex items-center gap-1.5",
exp.urgent ? "text-amber-400 font-medium" : "text-foreground-subtle" exp.urgent ? "text-warning font-medium" : "text-foreground-subtle"
)}> )}>
<Calendar className="w-3.5 h-3.5" />{exp.text} <Calendar className="w-3.5 h-3.5" />{exp.text}
</span> </span>
@ -664,7 +587,7 @@ export default function DashboardPage() {
className={clsx( className={clsx(
"p-2 rounded-lg transition-all", "p-2 rounded-lg transition-all",
domain.notify_on_available domain.notify_on_available
? "text-cyan-400 hover:bg-cyan-400/10" ? "text-accent hover:bg-accent/10"
: "text-foreground-subtle hover:text-foreground hover:bg-foreground/10" : "text-foreground-subtle hover:text-foreground hover:bg-foreground/10"
)} )}
title={domain.notify_on_available ? "Monitoring active" : "Enable monitoring"} title={domain.notify_on_available ? "Monitoring active" : "Enable monitoring"}
@ -674,7 +597,7 @@ export default function DashboardPage() {
<button onClick={() => handleRefresh(domain.id)} disabled={refreshingId === domain.id} className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/10 rounded-lg transition-all" title="Refresh"> <button onClick={() => handleRefresh(domain.id)} disabled={refreshingId === domain.id} className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/10 rounded-lg transition-all" title="Refresh">
<RefreshCw className={clsx("w-4 h-4", refreshingId === domain.id && "animate-spin")} /> <RefreshCw className={clsx("w-4 h-4", refreshingId === domain.id && "animate-spin")} />
</button> </button>
<button onClick={() => handleDelete(domain.id)} className="p-2 text-foreground-subtle hover:text-rose-400 hover:bg-rose-400/10 rounded-lg transition-all" title="Remove"> <button onClick={() => handleDelete(domain.id)} className="p-2 text-foreground-subtle hover:text-danger hover:bg-danger/10 rounded-lg transition-all" title="Remove">
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
</button> </button>
</div> </div>
@ -695,62 +618,34 @@ export default function DashboardPage() {
{/* Portfolio Stats */} {/* Portfolio Stats */}
{portfolioSummary && ( {portfolioSummary && (
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
<div className="p-5 bg-background-secondary/50 border border-border rounded-2xl hover:border-foreground/20 transition-colors"> <div className="p-5 bg-background-secondary border border-border rounded-2xl hover:border-foreground/20 transition-colors">
<div className="flex items-center gap-2 mb-2"> <p className="text-ui-xs text-foreground-muted uppercase tracking-wider mb-2">Total Value</p>
<div className="w-6 h-6 rounded-md bg-foreground/10 flex items-center justify-center">
<DollarSign className="w-3.5 h-3.5 text-foreground-muted" />
</div>
<p className="text-ui-xs text-foreground-muted uppercase tracking-wider">Total Value</p>
</div>
<p className="text-2xl sm:text-3xl font-display text-foreground">{formatCurrency(portfolioSummary.total_value)}</p> <p className="text-2xl sm:text-3xl font-display text-foreground">{formatCurrency(portfolioSummary.total_value)}</p>
</div> </div>
<div className="p-5 bg-violet-500/5 border border-violet-500/20 rounded-2xl hover:border-violet-500/40 transition-colors"> <div className="p-5 bg-background-secondary border border-border rounded-2xl hover:border-foreground/20 transition-colors">
<div className="flex items-center gap-2 mb-2"> <p className="text-ui-xs text-foreground-muted uppercase tracking-wider mb-2">Invested</p>
<div className="w-6 h-6 rounded-md bg-violet-500/20 flex items-center justify-center"> <p className="text-2xl sm:text-3xl font-display text-foreground">{formatCurrency(portfolioSummary.total_invested)}</p>
<Tag className="w-3.5 h-3.5 text-violet-400" />
</div>
<p className="text-ui-xs text-violet-400/80 uppercase tracking-wider">Invested</p>
</div>
<p className="text-2xl sm:text-3xl font-display text-violet-400">{formatCurrency(portfolioSummary.total_invested)}</p>
</div> </div>
<div className={clsx( <div className={clsx(
"p-5 border rounded-2xl transition-colors", "p-5 border rounded-2xl transition-colors",
portfolioSummary.unrealized_profit >= 0 portfolioSummary.unrealized_profit >= 0
? "bg-emerald-500/5 border-emerald-500/20 hover:border-emerald-500/40" ? "bg-accent/5 border-accent/20 hover:border-accent/40"
: "bg-rose-500/5 border-rose-500/20 hover:border-rose-500/40" : "bg-danger/5 border-danger/20 hover:border-danger/40"
)}> )}>
<div className="flex items-center gap-2 mb-2"> <p className={clsx("text-ui-xs uppercase tracking-wider mb-2", portfolioSummary.unrealized_profit >= 0 ? "text-accent/80" : "text-danger/80")}>P/L</p>
<div className={clsx( <p className={clsx("text-2xl sm:text-3xl font-display flex items-center gap-1", portfolioSummary.unrealized_profit >= 0 ? "text-accent" : "text-danger")}>
"w-6 h-6 rounded-md flex items-center justify-center", {portfolioSummary.unrealized_profit >= 0 ? <ArrowUpRight className="w-5 h-5" /> : <ArrowDownRight className="w-5 h-5" />}
portfolioSummary.unrealized_profit >= 0 ? "bg-emerald-500/20" : "bg-rose-500/20" {formatCurrency(Math.abs(portfolioSummary.unrealized_profit))}
)}>
{portfolioSummary.unrealized_profit >= 0
? <ArrowUpRight className="w-3.5 h-3.5 text-emerald-400" />
: <ArrowDownRight className="w-3.5 h-3.5 text-rose-400" />
}
</div>
<p className={clsx("text-ui-xs uppercase tracking-wider", portfolioSummary.unrealized_profit >= 0 ? "text-emerald-400/80" : "text-rose-400/80")}>P/L</p>
</div>
<p className={clsx("text-2xl sm:text-3xl font-display", portfolioSummary.unrealized_profit >= 0 ? "text-emerald-400" : "text-rose-400")}>
{portfolioSummary.unrealized_profit >= 0 ? '+' : ''}{formatCurrency(portfolioSummary.unrealized_profit)}
</p> </p>
</div> </div>
<div className={clsx( <div className={clsx(
"p-5 border rounded-2xl transition-colors", "p-5 border rounded-2xl transition-colors",
portfolioSummary.overall_roi >= 0 portfolioSummary.overall_roi >= 0
? "bg-emerald-500/5 border-emerald-500/20 hover:border-emerald-500/40" ? "bg-accent/5 border-accent/20 hover:border-accent/40"
: "bg-rose-500/5 border-rose-500/20 hover:border-rose-500/40" : "bg-danger/5 border-danger/20 hover:border-danger/40"
)}> )}>
<div className="flex items-center gap-2 mb-2"> <p className={clsx("text-ui-xs uppercase tracking-wider mb-2", portfolioSummary.overall_roi >= 0 ? "text-accent/80" : "text-danger/80")}>ROI</p>
<div className={clsx( <p className={clsx("text-2xl sm:text-3xl font-display", portfolioSummary.overall_roi >= 0 ? "text-accent" : "text-danger")}>
"w-6 h-6 rounded-md flex items-center justify-center",
portfolioSummary.overall_roi >= 0 ? "bg-emerald-500/20" : "bg-rose-500/20"
)}>
<BarChart3 className={clsx("w-3.5 h-3.5", portfolioSummary.overall_roi >= 0 ? "text-emerald-400" : "text-rose-400")} />
</div>
<p className={clsx("text-ui-xs uppercase tracking-wider", portfolioSummary.overall_roi >= 0 ? "text-emerald-400/80" : "text-rose-400/80")}>ROI</p>
</div>
<p className={clsx("text-2xl sm:text-3xl font-display", portfolioSummary.overall_roi >= 0 ? "text-emerald-400" : "text-rose-400")}>
{portfolioSummary.overall_roi >= 0 ? '+' : ''}{portfolioSummary.overall_roi.toFixed(1)}% {portfolioSummary.overall_roi >= 0 ? '+' : ''}{portfolioSummary.overall_roi.toFixed(1)}%
</p> </p>
</div> </div>
@ -817,9 +712,9 @@ export default function DashboardPage() {
)} )}
{/* Quick Links */} {/* Quick Links */}
<div className="mt-12 p-6 bg-gradient-to-r from-accent/5 via-cyan-500/5 to-violet-500/5 border border-accent/20 rounded-2xl flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> <div className="mt-12 p-6 bg-accent/5 border border-accent/20 rounded-2xl flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center ring-1 ring-accent/20"> <div className="w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center">
<TrendingUp className="w-6 h-6 text-accent" /> <TrendingUp className="w-6 h-6 text-accent" />
</div> </div>
<div> <div>

143
frontend/src/app/settings/page.tsx
View File

@ -147,24 +147,16 @@ export default function SettingsPage() {
] ]
return ( return (
<div className="min-h-screen bg-background relative flex flex-col"> <div className="min-h-screen bg-background flex flex-col">
{/* Ambient glow */}
<div className="fixed inset-0 pointer-events-none">
<div className="absolute top-0 left-1/3 w-[500px] h-[400px] bg-accent/[0.02] rounded-full blur-3xl" />
</div>
<Header /> <Header />
<main className="relative pt-32 sm:pt-36 pb-20 px-4 sm:px-6 flex-1"> <main className="flex-1 pt-28 sm:pt-32 pb-20 sm:pb-24 px-4 sm:px-6 lg:px-8">
<div className="max-w-4xl mx-auto"> <div className="max-w-7xl mx-auto">
{/* Header */} {/* Header */}
<div className="mb-8 animate-fade-in"> <div className="mb-10">
<div className="flex items-center gap-3 mb-2"> <h1 className="font-display text-[2rem] sm:text-[2.5rem] leading-[1.1] tracking-[-0.03em] text-foreground mb-2">
<Settings className="w-6 h-6 text-accent" />
<h1 className="font-display text-[2rem] sm:text-[2.5rem] leading-[1.1] tracking-[-0.03em] text-foreground">
Settings Settings
</h1> </h1>
</div>
<p className="text-body text-foreground-muted"> <p className="text-body text-foreground-muted">
Your account. Your rules. Your account. Your rules.
</p> </p>
@ -172,7 +164,7 @@ export default function SettingsPage() {
{/* Messages */} {/* Messages */}
{error && ( {error && (
<div className="mb-6 p-4 bg-danger-muted border border-danger/20 rounded-xl flex items-center gap-3 animate-fade-in"> <div className="mb-6 p-4 bg-danger/5 border border-danger/20 rounded-2xl flex items-center gap-3">
<AlertCircle className="w-5 h-5 text-danger shrink-0" /> <AlertCircle className="w-5 h-5 text-danger shrink-0" />
<p className="text-body-sm text-danger flex-1">{error}</p> <p className="text-body-sm text-danger flex-1">{error}</p>
<button onClick={() => setError(null)} className="text-danger hover:text-danger/80"> <button onClick={() => setError(null)} className="text-danger hover:text-danger/80">
@ -182,7 +174,7 @@ export default function SettingsPage() {
)} )}
{success && ( {success && (
<div className="mb-6 p-4 bg-accent-muted border border-accent/20 rounded-xl flex items-center gap-3 animate-fade-in"> <div className="mb-6 p-4 bg-accent/5 border border-accent/20 rounded-2xl flex items-center gap-3">
<Check className="w-5 h-5 text-accent shrink-0" /> <Check className="w-5 h-5 text-accent shrink-0" />
<p className="text-body-sm text-accent flex-1">{success}</p> <p className="text-body-sm text-accent flex-1">{success}</p>
<button onClick={() => setSuccess(null)} className="text-accent hover:text-accent/80"> <button onClick={() => setSuccess(null)} className="text-accent hover:text-accent/80">
@ -191,7 +183,7 @@ export default function SettingsPage() {
</div> </div>
)} )}
<div className="flex flex-col lg:flex-row gap-6"> <div className="flex flex-col lg:flex-row gap-8">
{/* Sidebar - Horizontal scroll on mobile, vertical on desktop */} {/* Sidebar - Horizontal scroll on mobile, vertical on desktop */}
<div className="lg:w-64 shrink-0"> <div className="lg:w-64 shrink-0">
{/* Mobile: Horizontal scroll tabs */} {/* Mobile: Horizontal scroll tabs */}
@ -201,10 +193,10 @@ export default function SettingsPage() {
key={tab.id} key={tab.id}
onClick={() => setActiveTab(tab.id)} onClick={() => setActiveTab(tab.id)}
className={clsx( className={clsx(
"flex items-center gap-2 px-4 py-2.5 text-ui-sm font-medium rounded-xl whitespace-nowrap transition-all", "flex items-center gap-2 px-5 py-2.5 text-ui font-medium rounded-xl whitespace-nowrap transition-all",
activeTab === tab.id activeTab === tab.id
? "bg-foreground text-background" ? "bg-foreground text-background shadow-lg"
: "bg-background-secondary/50 text-foreground-muted hover:text-foreground border border-border" : "bg-background-secondary text-foreground-muted hover:text-foreground border border-border"
)} )}
> >
<tab.icon className="w-4 h-4" /> <tab.icon className="w-4 h-4" />
@ -214,16 +206,16 @@ export default function SettingsPage() {
</nav> </nav>
{/* Desktop: Vertical tabs */} {/* Desktop: Vertical tabs */}
<nav className="hidden lg:block p-2 bg-background-secondary/50 border border-border rounded-xl"> <nav className="hidden lg:block p-1.5 bg-background-secondary/70 border border-border rounded-2xl">
{tabs.map((tab) => ( {tabs.map((tab) => (
<button <button
key={tab.id} key={tab.id}
onClick={() => setActiveTab(tab.id)} onClick={() => setActiveTab(tab.id)}
className={clsx( className={clsx(
"w-full flex items-center gap-3 px-4 py-3 text-ui-sm font-medium rounded-lg transition-all", "w-full flex items-center gap-3 px-4 py-3 text-ui font-medium rounded-xl transition-all",
activeTab === tab.id activeTab === tab.id
? "bg-foreground text-background" ? "bg-foreground text-background shadow-lg"
: "text-foreground-muted hover:text-foreground hover:bg-background-tertiary" : "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
)} )}
> >
<tab.icon className="w-4 h-4" /> <tab.icon className="w-4 h-4" />
@ -233,9 +225,9 @@ export default function SettingsPage() {
</nav> </nav>
{/* Plan info - hidden on mobile, shown in content area instead */} {/* Plan info - hidden on mobile, shown in content area instead */}
<div className="hidden lg:block mt-4 p-4 bg-background-secondary/30 border border-border rounded-xl"> <div className="hidden lg:block mt-4 p-5 bg-accent/5 border border-accent/20 rounded-2xl">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
{isProOrHigher ? <Crown className="w-4 h-4 text-accent" /> : <Zap className="w-4 h-4 text-foreground-muted" />} {isProOrHigher ? <Crown className="w-4 h-4 text-accent" /> : <Zap className="w-4 h-4 text-accent" />}
<span className="text-body-sm font-medium text-foreground">{tierName} Plan</span> <span className="text-body-sm font-medium text-foreground">{tierName} Plan</span>
</div> </div>
<p className="text-body-xs text-foreground-muted mb-3"> <p className="text-body-xs text-foreground-muted mb-3">
@ -244,7 +236,7 @@ export default function SettingsPage() {
{!isProOrHigher && ( {!isProOrHigher && (
<Link <Link
href="/pricing" href="/pricing"
className="flex items-center justify-center gap-2 w-full py-2 bg-accent text-background text-ui-xs font-medium rounded-lg hover:bg-accent-hover transition-all" className="flex items-center justify-center gap-2 w-full py-2.5 bg-accent text-background text-ui-sm font-medium rounded-xl hover:bg-accent-hover transition-all"
> >
Upgrade Upgrade
<ChevronRight className="w-3.5 h-3.5" /> <ChevronRight className="w-3.5 h-3.5" />
@ -257,10 +249,10 @@ export default function SettingsPage() {
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
{/* Profile Tab */} {/* Profile Tab */}
{activeTab === 'profile' && ( {activeTab === 'profile' && (
<div className="p-6 bg-background-secondary/50 border border-border rounded-xl animate-fade-in"> <div className="p-6 sm:p-8 bg-background-secondary/30 border border-border rounded-2xl">
<h2 className="text-body-lg font-medium text-foreground mb-6">Profile Information</h2> <h2 className="text-body-lg font-medium text-foreground mb-6">Profile Information</h2>
<form onSubmit={handleSaveProfile} className="space-y-4"> <form onSubmit={handleSaveProfile} className="space-y-5">
<div> <div>
<label className="block text-ui-sm text-foreground-muted mb-2">Name</label> <label className="block text-ui-sm text-foreground-muted mb-2">Name</label>
<input <input
@ -268,8 +260,8 @@ export default function SettingsPage() {
value={profileForm.name} value={profileForm.name}
onChange={(e) => setProfileForm({ ...profileForm, name: e.target.value })} onChange={(e) => setProfileForm({ ...profileForm, name: e.target.value })}
placeholder="Your name" placeholder="Your name"
className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
placeholder:text-foreground-subtle focus:outline-none focus:border-border-hover transition-all" placeholder:text-foreground-subtle focus:outline-none focus:ring-1 focus:ring-accent/50 focus:border-accent/50 transition-all"
/> />
</div> </div>
@ -279,16 +271,16 @@ export default function SettingsPage() {
type="email" type="email"
value={profileForm.email} value={profileForm.email}
disabled disabled
className="w-full px-4 py-3 bg-background-tertiary border border-border rounded-xl text-body text-foreground-muted cursor-not-allowed" className="w-full px-4 py-3.5 bg-background-tertiary border border-border rounded-xl text-body text-foreground-muted cursor-not-allowed"
/> />
<p className="text-ui-xs text-foreground-subtle mt-1">Email cannot be changed</p> <p className="text-ui-xs text-foreground-subtle mt-1.5">Email cannot be changed</p>
</div> </div>
<button <button
type="submit" type="submit"
disabled={saving} disabled={saving}
className="px-6 py-3 bg-foreground text-background text-ui font-medium rounded-xl className="px-6 py-3.5 bg-foreground text-background text-ui font-medium rounded-xl
hover:bg-foreground/90 disabled:opacity-50 transition-all flex items-center gap-2" hover:bg-foreground/90 disabled:opacity-50 transition-all flex items-center gap-2 shadow-lg shadow-foreground/10"
> >
{saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />} {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />}
Save Changes Save Changes
@ -299,12 +291,12 @@ export default function SettingsPage() {
{/* Notifications Tab */} {/* Notifications Tab */}
{activeTab === 'notifications' && ( {activeTab === 'notifications' && (
<div className="space-y-6 animate-fade-in"> <div className="space-y-6">
<div className="p-6 bg-background-secondary/50 border border-border rounded-xl"> <div className="p-6 sm:p-8 bg-background-secondary/30 border border-border rounded-2xl">
<h2 className="text-body-lg font-medium text-foreground mb-4">Email Preferences</h2> <h2 className="text-body-lg font-medium text-foreground mb-5">Email Preferences</h2>
<div className="space-y-3"> <div className="space-y-3">
<label className="flex items-center justify-between p-4 bg-background-tertiary rounded-xl cursor-pointer"> <label className="flex items-center justify-between p-4 bg-background border border-border rounded-xl cursor-pointer hover:border-foreground/20 transition-colors">
<div> <div>
<p className="text-body-sm font-medium text-foreground">Domain Availability</p> <p className="text-body-sm font-medium text-foreground">Domain Availability</p>
<p className="text-body-xs text-foreground-muted">Get notified when watched domains become available</p> <p className="text-body-xs text-foreground-muted">Get notified when watched domains become available</p>
@ -312,7 +304,7 @@ export default function SettingsPage() {
<input type="checkbox" defaultChecked className="w-5 h-5 accent-accent" /> <input type="checkbox" defaultChecked className="w-5 h-5 accent-accent" />
</label> </label>
<label className="flex items-center justify-between p-4 bg-background-tertiary rounded-xl cursor-pointer"> <label className="flex items-center justify-between p-4 bg-background border border-border rounded-xl cursor-pointer hover:border-foreground/20 transition-colors">
<div> <div>
<p className="text-body-sm font-medium text-foreground">Price Alerts</p> <p className="text-body-sm font-medium text-foreground">Price Alerts</p>
<p className="text-body-xs text-foreground-muted">Get notified when TLD prices change</p> <p className="text-body-xs text-foreground-muted">Get notified when TLD prices change</p>
@ -320,7 +312,7 @@ export default function SettingsPage() {
<input type="checkbox" defaultChecked className="w-5 h-5 accent-accent" /> <input type="checkbox" defaultChecked className="w-5 h-5 accent-accent" />
</label> </label>
<label className="flex items-center justify-between p-4 bg-background-tertiary rounded-xl cursor-pointer"> <label className="flex items-center justify-between p-4 bg-background border border-border rounded-xl cursor-pointer hover:border-foreground/20 transition-colors">
<div> <div>
<p className="text-body-sm font-medium text-foreground">Weekly Digest</p> <p className="text-body-sm font-medium text-foreground">Weekly Digest</p>
<p className="text-body-xs text-foreground-muted">Receive a weekly summary of your portfolio</p> <p className="text-body-xs text-foreground-muted">Receive a weekly summary of your portfolio</p>
@ -331,20 +323,20 @@ export default function SettingsPage() {
</div> </div>
{/* Active Price Alerts */} {/* Active Price Alerts */}
<div className="p-6 bg-background-secondary/50 border border-border rounded-xl"> <div className="p-6 sm:p-8 bg-background-secondary/30 border border-border rounded-2xl">
<h2 className="text-body-lg font-medium text-foreground mb-4">Active Price Alerts</h2> <h2 className="text-body-lg font-medium text-foreground mb-5">Active Price Alerts</h2>
{loadingAlerts ? ( {loadingAlerts ? (
<div className="py-8 flex items-center justify-center"> <div className="py-10 flex items-center justify-center">
<Loader2 className="w-5 h-5 animate-spin text-accent" /> <Loader2 className="w-6 h-6 animate-spin text-accent" />
</div> </div>
) : priceAlerts.length === 0 ? ( ) : priceAlerts.length === 0 ? (
<div className="py-8 text-center"> <div className="py-12 text-center border border-dashed border-border/50 rounded-xl bg-background/30">
<Bell className="w-8 h-8 text-foreground-subtle mx-auto mb-3" /> <Bell className="w-10 h-10 text-foreground-subtle mx-auto mb-4" />
<p className="text-body-sm text-foreground-muted mb-3">No price alerts set</p> <p className="text-body text-foreground-muted mb-3">No price alerts set</p>
<Link <Link
href="/tld-pricing" href="/tld-pricing"
className="text-accent hover:text-accent-hover text-body-sm" className="text-accent hover:text-accent-hover text-body-sm font-medium"
> >
Browse TLD prices → Browse TLD prices →
</Link> </Link>
@ -354,13 +346,18 @@ export default function SettingsPage() {
{priceAlerts.map((alert) => ( {priceAlerts.map((alert) => (
<div <div
key={alert.id} key={alert.id}
className="flex items-center justify-between p-4 bg-background-tertiary rounded-xl" className="flex items-center justify-between p-4 bg-background border border-border rounded-xl hover:border-foreground/20 transition-colors"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="relative">
<div className={clsx( <div className={clsx(
"w-2 h-2 rounded-full", "w-2.5 h-2.5 rounded-full",
alert.is_active ? "bg-accent" : "bg-foreground-subtle" alert.is_active ? "bg-accent" : "bg-foreground-subtle"
)} /> )} />
{alert.is_active && (
<span className="absolute inset-0 rounded-full bg-accent animate-ping opacity-40" />
)}
</div>
<div> <div>
<Link <Link
href={`/tld-pricing/${alert.tld}`} href={`/tld-pricing/${alert.tld}`}
@ -377,7 +374,7 @@ export default function SettingsPage() {
<button <button
onClick={() => handleDeletePriceAlert(alert.tld, alert.id)} onClick={() => handleDeletePriceAlert(alert.tld, alert.id)}
disabled={deletingAlertId === alert.id} disabled={deletingAlertId === alert.id}
className="p-2 text-foreground-subtle hover:text-danger hover:bg-danger-muted rounded-lg transition-all" className="p-2 text-foreground-subtle hover:text-danger hover:bg-danger/10 rounded-lg transition-all"
> >
{deletingAlertId === alert.id ? ( {deletingAlertId === alert.id ? (
<Loader2 className="w-4 h-4 animate-spin" /> <Loader2 className="w-4 h-4 animate-spin" />
@ -395,10 +392,10 @@ export default function SettingsPage() {
{/* Billing Tab */} {/* Billing Tab */}
{activeTab === 'billing' && ( {activeTab === 'billing' && (
<div className="p-6 bg-background-secondary/50 border border-border rounded-xl animate-fade-in"> <div className="p-6 sm:p-8 bg-background-secondary/30 border border-border rounded-2xl">
<h2 className="text-body-lg font-medium text-foreground mb-6">Subscription & Billing</h2> <h2 className="text-body-lg font-medium text-foreground mb-6">Subscription & Billing</h2>
<div className="p-4 bg-background-tertiary rounded-xl mb-6"> <div className="p-5 bg-accent/5 border border-accent/20 rounded-xl mb-6">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<div> <div>
<p className="text-body font-medium text-foreground">{tierName} Plan</p> <p className="text-body font-medium text-foreground">{tierName} Plan</p>
@ -407,8 +404,8 @@ export default function SettingsPage() {
</p> </p>
</div> </div>
<span className={clsx( <span className={clsx(
"px-3 py-1 text-ui-xs font-medium rounded-full", "px-3 py-1.5 text-ui-xs font-medium rounded-full",
isProOrHigher ? "bg-accent-muted text-accent" : "bg-background text-foreground-muted" isProOrHigher ? "bg-accent/10 text-accent" : "bg-foreground/5 text-foreground-muted"
)}> )}>
{isProOrHigher ? 'Active' : 'Free'} {isProOrHigher ? 'Active' : 'Free'}
</span> </span>
@ -417,8 +414,8 @@ export default function SettingsPage() {
{isProOrHigher ? ( {isProOrHigher ? (
<button <button
onClick={handleOpenBillingPortal} onClick={handleOpenBillingPortal}
className="w-full py-3 bg-background text-foreground text-ui font-medium rounded-xl className="w-full py-3 bg-background text-foreground text-ui font-medium rounded-xl border border-border
hover:bg-background-secondary transition-all flex items-center justify-center gap-2" hover:border-foreground/20 transition-all flex items-center justify-center gap-2"
> >
<ExternalLink className="w-4 h-4" /> <ExternalLink className="w-4 h-4" />
Manage Subscription Manage Subscription
@ -427,7 +424,7 @@ export default function SettingsPage() {
<Link <Link
href="/pricing" href="/pricing"
className="w-full py-3 bg-accent text-background text-ui font-medium rounded-xl className="w-full py-3 bg-accent text-background text-ui font-medium rounded-xl
hover:bg-accent-hover transition-all flex items-center justify-center gap-2" hover:bg-accent-hover transition-all flex items-center justify-center gap-2 shadow-lg shadow-accent/20"
> >
<Zap className="w-4 h-4" /> <Zap className="w-4 h-4" />
Upgrade Plan Upgrade Plan
@ -457,51 +454,53 @@ export default function SettingsPage() {
{/* Security Tab */} {/* Security Tab */}
{activeTab === 'security' && ( {activeTab === 'security' && (
<div className="space-y-6 animate-fade-in"> <div className="space-y-6">
<div className="p-6 bg-background-secondary/50 border border-border rounded-xl"> <div className="p-6 sm:p-8 bg-background-secondary/30 border border-border rounded-2xl">
<h2 className="text-body-lg font-medium text-foreground mb-4">Password</h2> <h2 className="text-body-lg font-medium text-foreground mb-4">Password</h2>
<p className="text-body-sm text-foreground-muted mb-4"> <p className="text-body-sm text-foreground-muted mb-5">
Change your password or reset it if you've forgotten it. Change your password or reset it if you've forgotten it.
</p> </p>
<Link <Link
href="/forgot-password" href="/forgot-password"
className="inline-flex items-center gap-2 px-4 py-2 bg-background-tertiary text-foreground text-ui-sm font-medium rounded-lg className="inline-flex items-center gap-2 px-5 py-3 bg-background border border-border text-foreground text-ui font-medium rounded-xl
hover:bg-background transition-all" hover:border-foreground/20 transition-all"
> >
<Key className="w-4 h-4" /> <Key className="w-4 h-4" />
Change Password Change Password
</Link> </Link>
</div> </div>
<div className="p-6 bg-background-secondary/50 border border-border rounded-xl"> <div className="p-6 sm:p-8 bg-background-secondary/30 border border-border rounded-2xl">
<h2 className="text-body-lg font-medium text-foreground mb-4">Account Security</h2> <h2 className="text-body-lg font-medium text-foreground mb-5">Account Security</h2>
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center justify-between p-4 bg-background-tertiary rounded-xl"> <div className="flex items-center justify-between p-4 bg-background border border-border rounded-xl">
<div> <div>
<p className="text-body-sm font-medium text-foreground">Email Verified</p> <p className="text-body-sm font-medium text-foreground">Email Verified</p>
<p className="text-body-xs text-foreground-muted">Your email address has been verified</p> <p className="text-body-xs text-foreground-muted">Your email address has been verified</p>
</div> </div>
<Check className="w-5 h-5 text-accent" /> <div className="w-8 h-8 bg-accent/10 rounded-lg flex items-center justify-center">
<Check className="w-4 h-4 text-accent" />
</div>
</div> </div>
<div className="flex items-center justify-between p-4 bg-background-tertiary rounded-xl"> <div className="flex items-center justify-between p-4 bg-background border border-border rounded-xl">
<div> <div>
<p className="text-body-sm font-medium text-foreground">Two-Factor Authentication</p> <p className="text-body-sm font-medium text-foreground">Two-Factor Authentication</p>
<p className="text-body-xs text-foreground-muted">Coming soon</p> <p className="text-body-xs text-foreground-muted">Coming soon</p>
</div> </div>
<span className="text-ui-xs px-2 py-1 bg-background text-foreground-muted rounded-full">Soon</span> <span className="text-ui-xs px-2.5 py-1 bg-foreground/5 text-foreground-muted rounded-full">Soon</span>
</div> </div>
</div> </div>
</div> </div>
<div className="p-6 bg-danger-muted/30 border border-danger/20 rounded-xl"> <div className="p-6 sm:p-8 bg-danger/5 border border-danger/20 rounded-2xl">
<h2 className="text-body-lg font-medium text-danger mb-2">Danger Zone</h2> <h2 className="text-body-lg font-medium text-danger mb-2">Danger Zone</h2>
<p className="text-body-sm text-foreground-muted mb-4"> <p className="text-body-sm text-foreground-muted mb-5">
Permanently delete your account and all associated data. Permanently delete your account and all associated data.
</p> </p>
<button <button
className="px-4 py-2 bg-danger text-white text-ui-sm font-medium rounded-lg hover:bg-danger/90 transition-all" className="px-5 py-3 bg-danger text-white text-ui font-medium rounded-xl hover:bg-danger/90 transition-all"
> >
Delete Account Delete Account
</button> </button>