@svadmin/ui 0.34.10 → 0.36.0

package/dist/components/SidebarItem.svelte

@@ -5,7 +5,9 @@
   import SidebarItem from './SidebarItem.svelte';
   import {
     LayoutDashboard, FileText, Users, Settings, Home,
-    ChevronDown, Folder, ExternalLink, type Icon as LucideIcon,
+    ChevronDown, Folder, ExternalLink, Repeat, ClipboardCheck, SlidersHorizontal, AlertTriangle,
+    Barcode, FolderTree, Building2, Warehouse, BriefcaseBusiness, Handshake, UserRoundCheck,
+    CalendarCheck, KeyRound, MapPinned,
   } from '@lucide/svelte';
 
   import { formatLink } from '@svadmin/core/router';
@@ -24,9 +26,23 @@
     settings: Settings,
     home: Home,
     folder: Folder,
+    repeat: Repeat,
+    'clipboard-check': ClipboardCheck,
+    'sliders-horizontal': SlidersHorizontal,
+    'alert-triangle': AlertTriangle,
+    'barcode': Barcode,
+    'folder-tree': FolderTree,
+    'building-2': Building2,
+    'warehouse': Warehouse,
+    'briefcase-business': BriefcaseBusiness,
+    handshake: Handshake,
+    'user-round-check': UserRoundCheck,
+    'calendar-check': CalendarCheck,
+    'key-round': KeyRound,
+    'map-pinned': MapPinned,
   };
 
-  function getIcon(name?: string | any): typeof LayoutDashboard {
+  function getIcon(name?: string | typeof LayoutDashboard): typeof LayoutDashboard {
     if (!name) return depth === 0 ? Settings : Folder;
     if (typeof name !== 'string') return name; // if it's already a component
     return iconMap[name] ?? Settings;
@@ -48,16 +64,41 @@
     return menuItem.children?.some((c: MenuItem) => hasActiveChild(c)) ?? false;
   }
 
+  function getItemBadge(menuItem: MenuItem): string | undefined {
+    const meta = menuItem.meta as (MenuItem['meta'] & { badge?: unknown }) | undefined;
+    return typeof meta?.badge === 'string' ? meta.badge : undefined;
+  }
+
+  function aggregateBadges(menuItems: MenuItem[] | undefined): string | undefined {
+    const total = menuItems?.reduce((sum, menuItem) => {
+      const ownBadge = Number(getItemBadge(menuItem));
+      const childBadge = Number(aggregateBadges(menuItem.children));
+      return sum + (Number.isFinite(ownBadge) ? ownBadge : 0) + (Number.isFinite(childBadge) ? childBadge : 0);
+    }, 0) ?? 0;
+
+    return total > 0 ? String(total) : undefined;
+  }
+
   const hasChildren = $derived(item.children && item.children.length > 0);
   const active = $derived(isActive(item.href));
   const childActive = $derived(hasActiveChild(item));
   const isExternal = $derived(item.target === '_blank' || item.href?.startsWith('http'));
+  const badge = $derived(getItemBadge(item));
+  const childrenBadge = $derived(aggregateBadges(item.children));
 
   const finalHref = $derived(isExternal ? item.href : (item.href ? formatLink(item.href) : undefined));
-
-  // Track open state — auto-open if a child is active
+  // Auto-open the active branch once, then respect manual collapse/expand.
   let isOpen = $state(false);
-  $effect(() => { if (childActive) isOpen = true; });
+  let touchedOpen = $state(false);
+
+  function setOpen(nextOpen: boolean) {
+    touchedOpen = true;
+    isOpen = nextOpen;
+  }
+
+  $effect(() => {
+    if (childActive && !touchedOpen && !isOpen) isOpen = true;
+  });
 
   const Icon = $derived(getIcon(item.icon));
   const label = $derived(getLabel(item));
@@ -67,22 +108,33 @@
   <!-- hidden item, render nothing -->
 {:else if hasChildren && !collapsed}
   <!-- Parent node with children: render as collapsible group -->
-  <Collapsible.Root bind:open={isOpen}>
+  <Collapsible.Root open={isOpen} onOpenChange={setOpen}>
     <Collapsible.Trigger
-      class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
+      class="flex w-full items-center justify-between rounded-xl px-3 {depth === 1 ? 'py-1.5' : 'py-2'} text-sm font-medium transition-all duration-200
       {childActive
-        ? 'text-sidebar-foreground bg-sidebar-accent/30'
-        : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
-      style="padding-left: {12 + depth * 12}px"
+        ? 'text-primary font-semibold'
+        : 'text-sidebar-foreground/68 hover:bg-sidebar-accent/45 hover:text-sidebar-foreground'}"
+      style="padding-left: {depth === 0 ? 12 : 4 + (depth - 1) * 12}px"
+      data-sidebar={depth === 0 ? "menu-button" : "menu-sub-button"}
+      data-active={childActive ? "true" : "false"}
     >
       <span class="flex items-center gap-3">
         <Icon class="h-4 w-4 flex-shrink-0" />
         <span>{label}</span>
       </span>
-      <ChevronDown class="h-3.5 w-3.5 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+      <span class="ml-2 flex items-center gap-2">
+        {#if childrenBadge}
+          <span class="rounded-full {childActive ? 'bg-primary/12 text-primary' : 'bg-sidebar-accent text-sidebar-foreground/60'} px-2 py-0.5 text-[10px] font-semibold">{childrenBadge}</span>
+        {/if}
+        <ChevronDown class="h-3.5 w-3.5 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+      </span>
     </Collapsible.Trigger>
     <Collapsible.Content>
-      <div class="mt-0.5 space-y-0.5" style="padding-left: {depth > 0 ? 0 : 0}px">
+      <div
+        class="mt-0.5 {depth >= 1 ? 'divide-y divide-border/45' : 'space-y-0'}"
+        style="padding-left: {depth > 0 ? 0 : 0}px"
+        data-sidebar="menu-sub"
+      >
         {#each item.children as child, _i (_i)}
           <SidebarItem item={child} {currentPath} {collapsed} depth={depth + 1} />
         {/each}
@@ -99,10 +151,12 @@
           href={finalHref}
           target={isExternal ? '_blank' : undefined}
           rel={isExternal ? 'noopener noreferrer' : undefined}
-          class="flex items-center justify-center rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
+          class="mx-auto flex h-10 w-10 items-center justify-center text-sm font-medium transition-colors duration-200
           {active
-            ? 'bg-card text-sidebar-primary shadow-sm ring-1 ring-foreground/5'
-            : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+            ? 'text-primary'
+            : 'text-sidebar-foreground/68 hover:text-sidebar-foreground'}"
+          data-sidebar={depth === 0 ? "menu-button" : "menu-sub-button"}
+          data-active={active ? "true" : "false"}
         >
           <Icon class="h-4 w-4 flex-shrink-0" />
         </a>
@@ -118,16 +172,21 @@
     href={finalHref}
     target={isExternal ? '_blank' : undefined}
     rel={isExternal ? 'noopener noreferrer' : undefined}
-    class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
+    class="relative flex items-center gap-3 px-3 {depth === 1 ? 'py-1.5' : 'py-2'} text-sm font-medium transition-all duration-200 {depth >= 2 ? 'first:rounded-t-xl last:rounded-b-xl' : 'rounded-xl'}
     {active
-      ? 'bg-card text-sidebar-primary shadow-sm ring-1 ring-foreground/5 font-semibold before:absolute before:left-0 before:top-2 before:bottom-2 before:w-[3px] before:bg-primary before:rounded-r-md overflow-hidden relative'
-      : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+      ? 'text-primary font-semibold'
+      : 'text-sidebar-foreground/68 hover:bg-sidebar-accent/45 hover:text-sidebar-foreground'}"
     style="padding-left: {12 + depth * 12}px"
+    data-sidebar={depth === 0 ? "menu-button" : "menu-sub-button"}
+    data-active={active ? "true" : "false"}
   >
     <Icon class="h-4 w-4 flex-shrink-0" />
     <span class="flex-1">{label}</span>
     {#if isExternal}
       <ExternalLink class="h-3 w-3 opacity-50" />
     {/if}
+    {#if badge}
+      <span class="rounded-full {active ? 'bg-primary/12 text-primary' : 'bg-sidebar-accent text-sidebar-foreground/60'} px-2 py-0.5 text-[10px] font-semibold">{badge}</span>
+    {/if}
   </a>
 {/if}

package/dist/components/TwoFactorAuthPage.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Card from './ui/card/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Input } from './ui/input/index.js';
+  import * as Alert from './ui/alert/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Separator } from './ui/separator/index.js';
+  import { Shield, Copy, CheckCircle2, AlertTriangle, ArrowRight, ArrowLeft } from '@lucide/svelte';
+
+  type Step = 'intro' | 'scan' | 'verify' | 'recovery';
+
+  let currentStep = $state<Step>('intro');
+  let is2faEnabled = $state(false);
+  let verifyError = $state('');
+  let copiedRecovery = $state(false);
+  let codeDigits = $state<string[]>(Array.from({ length: 6 }, () => ''));
+
+  const verificationCode = $derived(codeDigits.join(''));
+  const qrCells = [
+    '11111110',
+    '10010010',
+    '10111010',
+    '10100100',
+    '11101010',
+    '00101110',
+    '11010100',
+    '01110110',
+  ].flatMap(row => [...row].map(cell => cell === '1'));
+
+  const recoveryCodes = [
+    'A1B2-C3D4', 'E5F6-G7H8', 'I9J0-K1L2',
+    'M3N4-O5P6', 'Q7R8-S9T0', 'U1V2-W3X4',
+    'Y5Z6-A7B8', 'C9D0-E1F2',
+  ];
+
+  function startSetup() {
+    currentStep = 'scan';
+  }
+
+  function proceedToVerify() {
+    currentStep = 'verify';
+  }
+
+  function handleVerify() {
+    verifyError = '';
+    if (verificationCode.length !== 6) {
+      verifyError = t('auth.twoFactorEnterCode');
+      return;
+    }
+    currentStep = 'recovery';
+  }
+
+  function handleDigitInput(e: Event, index: number) {
+    const input = e.currentTarget as HTMLInputElement;
+    const digit = input.value.replace(/\D/g, '').slice(-1);
+    codeDigits[index] = digit;
+    input.value = digit;
+    if (digit && index < codeDigits.length - 1) {
+      const next = input.parentElement?.children[index + 1] as HTMLInputElement | undefined;
+      next?.focus();
+    }
+  }
+
+  function completeSetup() {
+    is2faEnabled = true;
+    currentStep = 'intro';
+  }
+
+  function disable2fa() {
+    is2faEnabled = false;
+    currentStep = 'intro';
+  }
+
+  function copyRecoveryCodes() {
+    navigator.clipboard?.writeText(recoveryCodes.join('\n'));
+    copiedRecovery = true;
+    setTimeout(() => { copiedRecovery = false; }, 2000);
+  }
+</script>
+
+<div class="flex min-h-[70vh] items-center justify-center p-4" data-svadmin-content-page="auth-2fa">
+  <div class="w-full max-w-lg space-y-6">
+    {#if currentStep === 'intro' && !is2faEnabled}
+      <!-- Intro -->
+      <Card.Card class="border-border/60">
+        <Card.CardContent class="space-y-6 p-8 text-center">
+          <div class="mx-auto inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-amber-500/10 text-amber-500">
+            <Shield class="h-8 w-8" />
+          </div>
+          <div class="space-y-2">
+            <h2 class="text-2xl font-semibold text-foreground">{t('auth.twoFactorSetup')}</h2>
+            <p class="text-sm text-muted-foreground">{t('security.twoFactorDescription')}</p>
+          </div>
+          <div class="space-y-3 text-left">
+            <div class="flex items-start gap-3 rounded-xl border p-3">
+              <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-500/10 text-blue-500 text-sm font-bold">1</div>
+              <div>
+                <p class="text-sm font-medium text-foreground">{t('auth.twoFactorScanQR')}</p>
+                <p class="text-xs text-muted-foreground">Google Authenticator, Authy, etc.</p>
+              </div>
+            </div>
+            <div class="flex items-start gap-3 rounded-xl border p-3">
+              <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-500/10 text-blue-500 text-sm font-bold">2</div>
+              <div>
+                <p class="text-sm font-medium text-foreground">{t('auth.twoFactorEnterCode')}</p>
+                <p class="text-xs text-muted-foreground">6-digit code from your authenticator</p>
+              </div>
+            </div>
+            <div class="flex items-start gap-3 rounded-xl border p-3">
+              <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-500/10 text-blue-500 text-sm font-bold">3</div>
+              <div>
+                <p class="text-sm font-medium text-foreground">{t('auth.twoFactorSaveRecovery')}</p>
+                <p class="text-xs text-muted-foreground">{t('auth.twoFactorRecoveryHint')}</p>
+              </div>
+            </div>
+          </div>
+          <Button class="w-full" onclick={startSetup}>
+            {t('auth.twoFactorSetup')} <ArrowRight class="h-4 w-4 ml-2" />
+          </Button>
+        </Card.CardContent>
+      </Card.Card>
+
+    {:else if currentStep === 'scan'}
+      <!-- QR Code -->
+      <Card.Card class="border-border/60">
+        <Card.CardContent class="space-y-6 p-8">
+          <div class="text-center space-y-2">
+            <h2 class="text-xl font-semibold text-foreground">{t('auth.twoFactorScanQR')}</h2>
+            <p class="text-sm text-muted-foreground">Use your authenticator app to scan the code below.</p>
+          </div>
+          <div class="mx-auto flex h-48 w-48 items-center justify-center rounded-xl border-2 border-dashed border-border/60 bg-muted/20">
+            <div class="grid grid-cols-8 gap-[2px]">
+              {#each qrCells as filled, i (i)}
+                <div class="h-3 w-3 rounded-[1px] {filled ? 'bg-foreground' : 'bg-transparent'}"></div>
+              {/each}
+            </div>
+          </div>
+          <div class="flex gap-3">
+            <Button variant="outline" class="flex-1" onclick={() => currentStep = 'intro'}>
+              <ArrowLeft class="h-4 w-4 mr-2" />{t('common.back')}
+            </Button>
+            <Button class="flex-1" onclick={proceedToVerify}>
+              {t('common.next')} <ArrowRight class="h-4 w-4 ml-2" />
+            </Button>
+          </div>
+        </Card.CardContent>
+      </Card.Card>
+
+    {:else if currentStep === 'verify'}
+      <!-- Verify -->
+      <Card.Card class="border-border/60">
+        <Card.CardContent class="space-y-6 p-8">
+          <div class="text-center space-y-2">
+            <h2 class="text-xl font-semibold text-foreground">{t('auth.twoFactorVerify')}</h2>
+            <p class="text-sm text-muted-foreground">{t('auth.twoFactorEnterCode')}</p>
+          </div>
+
+          {#if verifyError}
+            <Alert.Root variant="destructive">
+              <AlertTriangle class="h-4 w-4" />
+              <Alert.Description>{verifyError}</Alert.Description>
+            </Alert.Root>
+          {/if}
+
+          <div class="flex justify-center gap-2">
+            {#each Array(6) as _, i (i)}
+              <Input
+                class="h-14 w-12 text-center text-xl font-bold"
+                maxlength={1}
+                inputmode="numeric"
+                pattern="[0-9]*"
+                bind:value={codeDigits[i]}
+                oninput={(e: Event) => handleDigitInput(e, i)}
+              />
+            {/each}
+          </div>
+
+          <div class="flex gap-3">
+            <Button variant="outline" class="flex-1" onclick={() => currentStep = 'scan'}>
+              <ArrowLeft class="h-4 w-4 mr-2" />{t('common.back')}
+            </Button>
+            <Button class="flex-1" onclick={handleVerify}>
+              {t('common.confirm')} <ArrowRight class="h-4 w-4 ml-2" />
+            </Button>
+          </div>
+        </Card.CardContent>
+      </Card.Card>
+
+    {:else if currentStep === 'recovery'}
+      <!-- Recovery codes -->
+      <Card.Card class="border-border/60">
+        <Card.CardContent class="space-y-6 p-8">
+          <div class="text-center space-y-2">
+            <div class="mx-auto inline-flex h-12 w-12 items-center justify-center rounded-xl bg-green-500/10 text-green-500">
+              <CheckCircle2 class="h-6 w-6" />
+            </div>
+            <h2 class="text-xl font-semibold text-foreground">{t('auth.twoFactorRecovery')}</h2>
+            <p class="text-sm text-muted-foreground">{t('auth.twoFactorRecoveryHint')}</p>
+          </div>
+
+          <div class="rounded-xl border bg-muted/20 p-4">
+            <div class="grid grid-cols-2 gap-2 font-mono text-sm">
+              {#each recoveryCodes as code, i (i)}
+                <div class="rounded-lg bg-background px-3 py-1.5 text-center text-foreground">{code}</div>
+              {/each}
+            </div>
+          </div>
+
+          <div class="flex gap-3">
+            <Button variant="outline" class="flex-1" onclick={copyRecoveryCodes}>
+              {#if copiedRecovery}
+                <CheckCircle2 class="h-4 w-4 mr-2" />{t('common.copied')}
+              {:else}
+                <Copy class="h-4 w-4 mr-2" />{t('common.copyAll')}
+              {/if}
+            </Button>
+            <Button class="flex-1" onclick={completeSetup}>
+              {t('account.completeSetup')} <ArrowRight class="h-4 w-4 ml-2" />
+            </Button>
+          </div>
+        </Card.CardContent>
+      </Card.Card>
+
+    {:else}
+      <!-- 2FA enabled state -->
+      <Card.Card class="border-border/60">
+        <Card.CardContent class="space-y-6 p-8 text-center">
+          <div class="mx-auto inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-green-500/10 text-green-500">
+            <Shield class="h-8 w-8" />
+          </div>
+          <div class="space-y-2">
+            <h2 class="text-2xl font-semibold text-foreground">{t('auth.twoFactorVerifySuccess')}</h2>
+            <p class="text-sm text-muted-foreground">{t('security.twoFactorActive')}</p>
+          </div>
+          <Badge variant="secondary" class="bg-green-500/10 text-green-600">
+            <CheckCircle2 class="h-3 w-3 mr-1" />2FA Active
+          </Badge>
+          <Separator />
+          <Button variant="destructive" onclick={disable2fa}>
+            {t('auth.twoFactorDisable')}
+          </Button>
+        </Card.CardContent>
+      </Card.Card>
+    {/if}
+  </div>
+</div>

package/dist/components/TwoFactorAuthPage.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TwoFactorAuthPage: import("svelte").Component<Record<string, never>, {}, "">;
+type TwoFactorAuthPage = ReturnType<typeof TwoFactorAuthPage>;
+export default TwoFactorAuthPage;

package/dist/components/UpdatePasswordPage.svelte

@@ -3,10 +3,9 @@
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
   import { Button } from './ui/button/index.js';
-  import * as Card from './ui/card/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
-  import { ShieldCheck, Loader2, AlertCircle } from '@lucide/svelte';
+  import { ShieldCheck, Loader2, AlertCircle, Shield } from '@lucide/svelte';
 
   let { title = 'Admin' } = $props<{
     title?: string;
@@ -32,58 +31,97 @@
   }
 </script>
 
-<div class="min-h-screen flex items-center justify-center bg-background p-4">
-  <div class="w-full max-w-[380px]">
-    <Card.Card>
-      <Card.CardHeader class="text-center pb-2">
-        <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary mx-auto mb-3">
+<div class="min-h-screen flex flex-col lg:flex-row">
+  <!-- Left brand panel -->
+  <div class="hidden lg:flex lg:w-[480px] xl:w-[520px] relative overflow-hidden bg-gradient-to-br from-primary/90 via-primary to-primary/80 shrink-0">
+    <div class="absolute inset-0">
+      <div class="absolute top-[12%] left-[8%] w-28 h-28 rounded-3xl border border-white/10 bg-white/5 rotate-12 backdrop-blur-sm"></div>
+      <div class="absolute top-[55%] left-[55%] w-40 h-40 rounded-full border border-white/10 bg-white/5 -rotate-6 backdrop-blur-sm"></div>
+      <div class="absolute bottom-[15%] left-[15%] w-24 h-24 rounded-2xl border border-white/10 bg-white/5 -rotate-12 backdrop-blur-sm"></div>
+      <div class="absolute top-[30%] right-[10%] w-16 h-16 rounded-xl border border-white/10 bg-white/5 rotate-45 backdrop-blur-sm"></div>
+      <div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 24px 24px;"></div>
+    </div>
+
+    <div class="relative z-10 flex flex-col justify-between p-10 xl:p-12 w-full">
+      <div class="flex items-center gap-3">
+        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/15 backdrop-blur-sm">
+          <Shield class="h-5 w-5 text-white" />
+        </div>
+        <span class="text-lg font-semibold text-white tracking-tight">{title}</span>
+      </div>
+
+      <div class="space-y-4">
+        <h2 class="text-3xl xl:text-4xl font-bold text-white leading-tight">
+          {t('auth.resetPassword')}
+        </h2>
+        <p class="text-base text-white/70 leading-relaxed max-w-[320px]">
+          {t('auth.resetPasswordDescription')}
+        </p>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <div class="h-1 w-8 rounded-full bg-white/30"></div>
+        <div class="h-1 w-4 rounded-full bg-white/15"></div>
+        <div class="h-1 w-2 rounded-full bg-white/10"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Right form panel -->
+  <div class="flex-1 flex items-center justify-center bg-background p-6 sm:p-8 lg:p-12">
+    <div class="w-full max-w-[400px]">
+      <div class="flex items-center gap-3 mb-8 lg:hidden">
+        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
           <ShieldCheck class="h-5 w-5" />
         </div>
-        <Card.CardTitle class="text-xl">{t('auth.resetPassword')}</Card.CardTitle>
+        <span class="text-lg font-semibold tracking-tight">{title}</span>
+      </div>
+
+      <div class="space-y-1 mb-8">
+        <h1 class="text-2xl font-semibold tracking-tight">{t('auth.resetPassword')}</h1>
         <p class="text-sm text-muted-foreground">{t('auth.resetPasswordDescription')}</p>
-      </Card.CardHeader>
-      <Card.CardContent>
-        <form onsubmit={handleSubmit} class="space-y-4">
-          {#if error}
-            <Alert.Root variant="destructive">
-              <AlertCircle class="h-4 w-4" />
-              <Alert.Description>{error}</Alert.Description>
-            </Alert.Root>
+      </div>
+
+      <form onsubmit={handleSubmit} class="space-y-5">
+        {#if error}
+          <Alert.Root variant="destructive">
+            <AlertCircle class="h-4 w-4" />
+            <Alert.Description>{error}</Alert.Description>
+          </Alert.Root>
+        {/if}
+
+        <PasswordInput
+          id="new-password"
+          label={t('auth.password')}
+          bind:value={password}
+          autocomplete="new-password"
+          showStrength
+        />
+
+        <PasswordInput
+          id="confirm-password"
+          label={t('auth.confirmPassword')}
+          bind:value={confirmPassword}
+          autocomplete="new-password"
+        />
+
+        <Button type="submit" class="w-full h-10" disabled={updatePw.isLoading}>
+          {#if updatePw.isLoading}
+            <Loader2 class="h-4 w-4 animate-spin mr-2" />
           {/if}
+          {t('auth.resetPassword')}
+        </Button>
 
-          <PasswordInput
-            id="new-password"
-            label={t('auth.password')}
-            bind:value={password}
-            autocomplete="new-password"
-            showStrength
-          />
-
-          <PasswordInput
-            id="confirm-password"
-            label={t('auth.confirmPassword')}
-            bind:value={confirmPassword}
-            autocomplete="new-password"
-          />
-
-          <Button type="submit" class="w-full" disabled={updatePw.isLoading}>
-            {#if updatePw.isLoading}
-              <Loader2 class="h-4 w-4 animate-spin mr-2" />
-            {/if}
-            {t('auth.resetPassword')}
+        <div class="flex items-center justify-center mt-2">
+          <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => navigate('/login')}>
+            {t('auth.backToLogin')}
           </Button>
+        </div>
+      </form>
 
-          <div class="flex items-center justify-center mt-2">
-            <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => navigate('/login')}>
-              {t('auth.backToLogin')}
-            </Button>
-          </div>
-        </form>
-      </Card.CardContent>
-    </Card.Card>
-
-    <p class="text-xs text-muted-foreground mt-4 text-center opacity-60">
-      Powered by {title}
-    </p>
+      <p class="text-xs text-muted-foreground/60 mt-8 text-center">
+        Powered by {title}
+      </p>
+    </div>
   </div>
 </div>