style(settings): elevate AccountSettings cards to SaaS Premium
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke
parent
900151efc7
commit
95b5773477
6 changed files with 39 additions and 37 deletions
|
|
@ -23,7 +23,7 @@ const meta: Meta<typeof AccountSettings> = {
|
|||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div className="bg-kodo-background min-h-layout-page p-4 max-w-4xl">
|
||||
<div className="bg-background min-h-layout-page p-4 max-w-4xl">
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
|
|
|
|||
|
|
@ -13,25 +13,25 @@ export function AccountSettingsDangerCard({
|
|||
return (
|
||||
<Card
|
||||
variant="default"
|
||||
className="border-kodo-red/30 relative overflow-hidden"
|
||||
className="border-destructive/30 relative overflow-hidden rounded-xl"
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-kodo-red" />
|
||||
<h3 className="text-lg font-bold text-white mb-2 flex items-center gap-2">
|
||||
<ShieldAlert className="w-5 h-5 text-kodo-red" /> Danger Zone
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-destructive rounded-l" />
|
||||
<h3 className="text-lg font-bold text-foreground mb-2 flex items-center gap-2 tracking-tight">
|
||||
<ShieldAlert className="w-5 h-5 text-destructive" /> Danger Zone
|
||||
</h3>
|
||||
<p className="text-kodo-content-dim text-sm mb-6">
|
||||
<p className="text-muted-foreground text-sm mb-6">
|
||||
Irreversible actions. Proceed with caution.
|
||||
</p>
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4 p-4 bg-kodo-red/5 rounded border border-kodo-red/20">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4 p-4 bg-destructive/5 rounded-xl border border-destructive/20">
|
||||
<div>
|
||||
<div className="font-bold text-white text-sm">Delete Account</div>
|
||||
<div className="text-xs text-kodo-content-dim">
|
||||
<div className="font-bold text-foreground text-sm">Delete Account</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Permanently remove your account and all data.
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-kodo-red hover:bg-kodo-red hover:text-white border border-kodo-red/50 w-full md:w-auto"
|
||||
variant="destructive"
|
||||
className="w-full md:w-auto"
|
||||
onClick={onDeleteClick}
|
||||
>
|
||||
DELETE ACCOUNT
|
||||
|
|
|
|||
|
|
@ -17,43 +17,43 @@ export function AccountSettingsIdentityCard({
|
|||
}: AccountSettingsIdentityCardProps) {
|
||||
return (
|
||||
<Card variant="default">
|
||||
<h3 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
|
||||
<User className="w-5 h-5 text-kodo-steel" /> Identity & Login
|
||||
<h3 className="text-lg font-bold text-foreground mb-6 flex items-center gap-2 tracking-tight">
|
||||
<User className="w-5 h-5 text-muted-foreground" /> Identity & Login
|
||||
</h3>
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 p-4 bg-kodo-ink rounded-lg border border-kodo-steel/50">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 p-4 bg-card rounded-xl border border-border">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 bg-kodo-slate rounded-full flex items-center justify-center text-kodo-content-dim">
|
||||
<div className="w-10 h-10 bg-muted rounded-full flex items-center justify-center text-muted-foreground">
|
||||
<Mail className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-bold text-white">Email Address</div>
|
||||
<div className="text-xs text-kodo-content-dim">{user.email}</div>
|
||||
<div className="text-sm font-bold text-foreground">Email Address</div>
|
||||
<div className="text-xs text-muted-foreground">{user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="border border-kodo-steel"
|
||||
className="border border-border"
|
||||
onClick={onOpenEmailModal}
|
||||
>
|
||||
Change Email
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 p-4 bg-kodo-ink rounded-lg border border-kodo-steel/50">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 p-4 bg-card rounded-xl border border-border">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 bg-kodo-slate rounded-full flex items-center justify-center text-kodo-content-dim">
|
||||
<div className="w-10 h-10 bg-muted rounded-full flex items-center justify-center text-muted-foreground">
|
||||
<User className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-bold text-white">Username</div>
|
||||
<div className="text-xs text-kodo-content-dim">@{user.username}</div>
|
||||
<div className="text-sm font-bold text-foreground">Username</div>
|
||||
<div className="text-xs text-muted-foreground">@{user.username}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="border border-kodo-steel"
|
||||
className="border border-border"
|
||||
onClick={onOpenUsernameModal}
|
||||
>
|
||||
Change Username
|
||||
|
|
|
|||
|
|
@ -15,19 +15,19 @@ export function AccountSettingsNotificationsCard({
|
|||
}: AccountSettingsNotificationsCardProps) {
|
||||
return (
|
||||
<Card variant="default">
|
||||
<h3 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
|
||||
<Bell className="w-5 h-5 text-kodo-lime" /> Notifications
|
||||
<h3 className="text-lg font-bold text-foreground mb-6 flex items-center gap-2 tracking-tight">
|
||||
<Bell className="w-5 h-5 text-success" /> Notifications
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-kodo-text-main">Email Notifications</span>
|
||||
<span className="text-sm text-foreground">Email Notifications</span>
|
||||
<Switch
|
||||
checked={toggles.emailNotif}
|
||||
onChange={() => onToggle('emailNotif')}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-kodo-text-main">Push Notifications</span>
|
||||
<span className="text-sm text-foreground">Push Notifications</span>
|
||||
<Switch
|
||||
checked={toggles.pushNotif}
|
||||
onChange={() => onToggle('pushNotif')}
|
||||
|
|
|
|||
|
|
@ -27,12 +27,12 @@ export function AccountSettingsPreferencesCard({
|
|||
}: AccountSettingsPreferencesCardProps) {
|
||||
return (
|
||||
<Card variant="default">
|
||||
<h3 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
|
||||
<Monitor className="w-5 h-5 text-kodo-magenta" /> Preferences
|
||||
<h3 className="text-lg font-bold text-foreground mb-6 flex items-center gap-2 tracking-tight">
|
||||
<Monitor className="w-5 h-5 text-primary" /> Preferences
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-kodo-content-dim mb-3">
|
||||
<label className="block text-sm font-bold text-muted-foreground mb-3">
|
||||
Interface Theme
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
|
|
@ -41,7 +41,7 @@ export function AccountSettingsPreferencesCard({
|
|||
key={opt.id}
|
||||
type="button"
|
||||
onClick={() => onThemeChange(opt.id)}
|
||||
className={`flex flex-col items-center justify-center gap-2 p-4 rounded-lg border transition-all ${isOptionSelected(theme, opt.id) ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-ink border-kodo-steel text-kodo-content-dim hover:text-white'}`}
|
||||
className={`flex flex-col items-center justify-center gap-2 p-4 rounded-xl border transition-all duration-[var(--duration-normal)] ${isOptionSelected(theme, opt.id) ? 'bg-primary/10 border-primary text-primary' : 'bg-card border-border text-muted-foreground hover:text-foreground'}`}
|
||||
>
|
||||
{opt.icon}
|
||||
<span className="text-xs font-bold">{opt.label}</span>
|
||||
|
|
@ -68,3 +68,5 @@ export function AccountSettingsPreferencesCard({
|
|||
</Card>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,16 +15,16 @@ export function AccountSettingsPrivacyCard({
|
|||
}: AccountSettingsPrivacyCardProps) {
|
||||
return (
|
||||
<Card variant="default">
|
||||
<h3 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
|
||||
<Lock className="w-5 h-5 text-kodo-gold" /> Privacy
|
||||
<h3 className="text-lg font-bold text-foreground mb-6 flex items-center gap-2 tracking-tight">
|
||||
<Lock className="w-5 h-5 text-warning" /> Privacy
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-sm text-kodo-text-main block">
|
||||
<span className="text-sm text-foreground block">
|
||||
Public Profile
|
||||
</span>
|
||||
<span className="text-xs text-kodo-content-dim">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Allow others to find you
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -35,10 +35,10 @@ export function AccountSettingsPrivacyCard({
|
|||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-sm text-kodo-text-main block">
|
||||
<span className="text-sm text-foreground block">
|
||||
Activity Status
|
||||
</span>
|
||||
<span className="text-xs text-kodo-content-dim">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Show when you are online
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue