srizan/lofi
1
0
Fork 0
mirror of https://github.com/SrIzan10/lofi.git synced 2026-06-06 00:56:53 +00:00
Code Issues 2 Packages Projects Releases Wiki Activity

chore: redesign dialog window

Browse Source
This commit is contained in:
Izan Gil
2026-04-04 16:58:33 +02:00
parent 6291540da5
commit c863093237
9 changed files with 70 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/lib/components/app/auth-dialog.svelte
View File

@@ -168,31 +168,31 @@
</Dialog.Title>
</Dialog.Header>
{#if user}
<div class="flex flex-col gap-4">
<div class="rounded-lg border border-foreground/10 bg-foreground/5 p-4">
<div class="flex flex-col gap-5">
<div class="rounded-xl border border-white/[0.1] bg-white/[0.04] backdrop-blur-sm p-4 shadow-lg">
<div class="flex items-start gap-3">
<div class="rounded-full bg-foreground/10 p-2">
<UserRound class="size-4" />
<div class="rounded-full bg-white/10 p-2.5 backdrop-blur-sm">
<UserRound class="size-4 text-white/90" />
</div>
<div class="min-w-0">
<p class="font-medium">{user.name}</p>
<p class="text-sm opacity-70">Account #{user.accountNumber}</p>
<p class="font-medium text-white">{user.name}</p>
<p class="text-sm text-white/60">Account #{user.accountNumber}</p>
</div>
</div>
</div>
{#if passkeys.length > 0}
<div class="flex flex-col gap-2">
<p class="text-sm font-medium">Your passkeys</p>
<div class="flex flex-col gap-1">
<div class="flex flex-col gap-2.5">
<p class="text-sm font-medium text-white/80">Your passkeys</p>
<div class="flex flex-col gap-2">
{#each passkeys as passkey (passkey.id)}
<div
class="flex items-center gap-2 rounded-lg border border-foreground/10 bg-foreground/5 p-3"
class="flex items-center gap-3 rounded-xl border border-white/[0.08] bg-white/[0.03] backdrop-blur-sm p-3 transition-colors hover:bg-white/[0.06]"
>
<Key class="size-4" />
<Key class="size-4 text-white/70" />
<div class="min-w-0 flex-1">
<p>{passkey.name}</p>
<p class="text-sm opacity-70">
<p class="text-white/90">{passkey.name}</p>
<p class="text-sm text-white/50">
Added on {new Date(passkey.createdAt).toLocaleDateString()}
</p>
</div>
@@ -216,8 +216,8 @@
</div>
{/if}
<div class="flex flex-col gap-2">
<p class="text-sm font-medium">Security</p>
<div class="flex flex-col gap-2.5">
<p class="text-sm font-medium text-white/80">Security</p>
<Input
type="text"
id="passkeyName"
@@ -228,16 +228,16 @@
{busyAction === 'add-passkey' ? 'Waiting for passkey...' : 'Add a passkey'}
</Button>
{#if passkeyMessage}
<p class="text-sm opacity-80">{passkeyMessage}</p>
<p class="text-sm text-white/70 bg-white/[0.03] rounded-lg px-3 py-2 border border-white/[0.06]">{passkeyMessage}</p>
{/if}
</div>
<Button variant="ghost" onclick={signOut}>Sign out</Button>
<Button variant="ghost" onclick={signOut} class="text-white/70 hover:text-white hover:bg-white/10">Sign out</Button>
</div>
{:else}
<div class="flex flex-col gap-4 pt-4">
<div class="flex flex-col gap-4 pt-2">
{#if authScreen === 'login'}
<div class="flex w-full flex-col gap-1.5">
<div class="flex w-full flex-col gap-2">
<Label for="accountNumber">Account Number</Label>
<div class="flex items-center gap-2">
<Input
@@ -266,10 +266,10 @@
{busyAction === 'account-number' ? 'Signing in...' : 'Sign in with account number'}
</Button>
<div class="relative my-2 flex items-center gap-3">
<div class="h-px flex-1 bg-foreground/20"></div>
<span class="text-sm text-foreground/70">or</span>
<div class="h-px flex-1 bg-foreground/20"></div>
<div class="relative my-3 flex items-center gap-4">
<div class="h-px flex-1 bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
<span class="text-sm text-white/50">or</span>
<div class="h-px flex-1 bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
</div>
<Button
@@ -281,17 +281,19 @@
{busyAction === 'create-account' ? 'Creating account...' : 'Create account number'}
</Button>
{#if authMessage}
<p class="text-sm text-red-400">{authMessage}</p>
<p class="text-sm text-red-400/90 bg-red-500/10 rounded-lg px-3 py-2 border border-red-500/20">{authMessage}</p>
{/if}
{:else if authScreen === 'create'}
<Label for="name">Your name</Label>
<Input
type="text"
id="name"
bind:value={name}
placeholder="Steve Jobs"
autocomplete="name webauthn"
/>
<div class="flex flex-col gap-2">
<Label for="name">Your name</Label>
<Input
type="text"
id="name"
bind:value={name}
placeholder="Steve Jobs"
autocomplete="name webauthn"
/>
</div>
<div class="flex w-full items-center gap-2">
<Button

18
src/lib/components/ui/dialog/dialog-content.svelte
View File

@@ -23,18 +23,26 @@
<DialogPrimitive.Content
bind:ref
class={cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 duration-200 sm:rounded-xl',
'bg-black/40 backdrop-blur-lg border border-white/10 shadow-lg text-white',
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 duration-300 sm:rounded-2xl',
'bg-white/[0.08] dark:bg-black/[0.45] backdrop-blur-2xl',
'border border-white/[0.12] dark:border-white/[0.08]',
'shadow-[0_8px_32px_rgba(0,0,0,0.32),inset_0_1px_0_rgba(255,255,255,0.1)]',
'text-white',
'data-[state=open]:animate-in data-[state=closed]:animate-out',
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
'before:absolute before:inset-0 before:rounded-2xl before:bg-gradient-to-br before:from-white/[0.08] before:to-transparent before:pointer-events-none',
className
)}
{...restProps}
>
<div class="text-white max-w-none space-y-3 font-medium">
<div class="relative z-10 text-white max-w-none space-y-3 font-medium">
{@render children?.()}
</div>
<DialogPrimitive.Close
class="absolute right-4 top-4 rounded-md opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none p-1 shadow-sm bg-black/20 backdrop-blur-md border border-white/10"
class="absolute right-4 top-4 z-20 rounded-lg p-2 opacity-60 transition-all duration-200 hover:opacity-100 hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/20 disabled:pointer-events-none backdrop-blur-sm border border-white/[0.08]"
>
<X class="size-4 text-white" />
<span class="sr-only">Close</span>

2
src/lib/components/ui/dialog/dialog-description.svelte
View File

@@ -11,6 +11,6 @@
<DialogPrimitive.Description
bind:ref
class={cn("text-black/80 text-sm", className)}
class={cn("text-white/70 text-sm leading-relaxed", className)}
{...restProps}
/>

2
src/lib/components/ui/dialog/dialog-footer.svelte
View File

@@ -13,7 +13,7 @@
<div
bind:this={ref}
class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 mt-2 border-t border-white/[0.08]", className)}
{...restProps}
>
{@render children?.()}

2
src/lib/components/ui/dialog/dialog-header.svelte
View File

@@ -13,7 +13,7 @@
<div
bind:this={ref}
class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
class={cn("flex flex-col space-y-2 text-center sm:text-left pb-2", className)}
{...restProps}
>
{@render children?.()}

6
src/lib/components/ui/dialog/dialog-overlay.svelte
View File

@@ -12,7 +12,11 @@
<DialogPrimitive.Overlay
bind:ref
class={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
"fixed inset-0 z-50",
"data-[state=open]:animate-in data-[state=closed]:animate-out",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"bg-black/40 backdrop-blur-sm",
"before:absolute before:inset-0 before:bg-gradient-to-b before:from-black/20 before:to-transparent",
className
)}
{...restProps}

2
src/lib/components/ui/dialog/dialog-title.svelte
View File

@@ -11,6 +11,6 @@
<DialogPrimitive.Title
bind:ref
class={cn("text-lg font-semibold leading-none tracking-tight", className)}
class={cn("text-xl font-semibold leading-none tracking-tight text-white drop-shadow-sm", className)}
{...restProps}
/>

15
src/lib/components/ui/input/input.svelte
View File

@@ -24,7 +24,13 @@
<input
bind:this={ref}
class={cn(
"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"flex h-10 w-full rounded-lg px-3 py-2 text-sm transition-all duration-200",
"bg-white/[0.06] dark:bg-black/20 backdrop-blur-sm",
"border border-white/[0.1] dark:border-white/[0.08]",
"placeholder:text-white/40 text-white",
"focus:outline-none focus:ring-2 focus:ring-white/20 focus:border-white/20",
"disabled:cursor-not-allowed disabled:opacity-50",
"file:border-0 file:bg-transparent file:text-sm file:font-medium",
className
)}
type="file"
@@ -36,7 +42,12 @@
<input
bind:this={ref}
class={cn(
"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"flex h-10 w-full rounded-lg px-3 py-2 text-sm transition-all duration-200",
"bg-white/[0.06] dark:bg-black/20 backdrop-blur-sm",
"border border-white/[0.1] dark:border-white/[0.08]",
"placeholder:text-white/40 text-white",
"focus:outline-none focus:ring-2 focus:ring-white/20 focus:border-white/20",
"disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{type}

2
src/lib/components/ui/label/label.svelte
View File

@@ -12,7 +12,7 @@
<LabelPrimitive.Root
bind:ref
class={cn(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
"text-sm font-medium leading-none text-white/90 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
className
)}
{...restProps}