mirror of
https://github.com/pocket-id/pocket-id.git
synced 2026-10-08 10:49:06 +02:00
feat: improve design trough the whole application
This commit is contained in:
@@ -265,7 +265,7 @@
|
||||
{:else}
|
||||
<SignInWrapper showAlternativeSignInMethodButton={$userStore == null}>
|
||||
<ClientProviderImages {client} {success} error={!!errorMessage} />
|
||||
<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">
|
||||
<h1 class="font-glooock mt-5 text-3xl font-bold sm:text-4xl">
|
||||
{m.sign_in_to({ name: client.name })}
|
||||
</h1>
|
||||
{#if errorMessage}
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
<LoginLogoErrorSuccessIndicator {success} error={!!errorMessage} />
|
||||
{/if}
|
||||
</div>
|
||||
<h1 class="font-playfair mt-5 text-4xl font-bold">{m.authorize_device()}</h1>
|
||||
<h1 class="font-glooock mt-5 text-4xl font-bold">{m.authorize_device()}</h1>
|
||||
{#if errorMessage}
|
||||
<p class="text-muted-foreground mt-2">
|
||||
{errorMessage}. {m.please_try_again()}
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
<div class="flex justify-center">
|
||||
<LoginLogoErrorSuccessIndicator error={!!error} />
|
||||
</div>
|
||||
<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">
|
||||
<h1 class="font-glooock mt-5 text-3xl font-bold sm:text-4xl">
|
||||
{m.sign_in_to_appname({ appName: $appConfigStore.appName })}
|
||||
</h1>
|
||||
{#if error}
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<div class="bg-muted mx-auto rounded-2xl p-3">
|
||||
<Logo class="size-10" />
|
||||
</div>
|
||||
<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">{m.alternative_sign_in()}</h1>
|
||||
<h1 class="font-glooock mt-5 text-3xl font-bold sm:text-4xl">{m.alternative_sign_in()}</h1>
|
||||
<p class="text-muted-foreground mt-3">
|
||||
{m.if_you_do_not_have_access_to_your_passkey_you_can_sign_in_using_one_of_the_following_methods()}
|
||||
</p>
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
<div class="flex justify-center">
|
||||
<LoginLogoErrorSuccessIndicator error={!!error} />
|
||||
</div>
|
||||
<h1 class="font-playfair mt-5 text-4xl font-bold">{m.login_code()}</h1>
|
||||
<h1 class="font-glooock mt-5 text-4xl font-bold">{m.login_code()}</h1>
|
||||
{#if error}
|
||||
<p class="text-muted-foreground mt-2">
|
||||
{error}. {m.please_try_again()}
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
import Input from '$lib/components/ui/input/input.svelte';
|
||||
import { m } from '$lib/paraglide/messages';
|
||||
import UserService from '$lib/services/user-service';
|
||||
import { preventDefault } from '$lib/utils/event-util';
|
||||
import { fade } from 'svelte/transition';
|
||||
import LoginLogoErrorSuccessIndicator from '../../components/login-logo-error-success-indicator.svelte';
|
||||
import { preventDefault } from '$lib/utils/event-util';
|
||||
|
||||
const { data } = $props();
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
<div class="flex justify-center">
|
||||
<LoginLogoErrorSuccessIndicator {success} error={!!error} />
|
||||
</div>
|
||||
<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">{m.email_login()}</h1>
|
||||
<h1 class="font-glooock mt-5 text-3xl font-bold sm:text-4xl">{m.email_login()}</h1>
|
||||
{#if error}
|
||||
<p class="text-muted-foreground mt-2" in:fade>
|
||||
{error}. {m.please_try_again()}
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
<Logo class="size-10" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="font-playfair mt-5 text-4xl font-bold">{m.sign_out()}</h1>
|
||||
<h1 class="font-glooock mt-5 text-4xl">{m.sign_out()}</h1>
|
||||
|
||||
<p class="text-muted-foreground mt-2">
|
||||
<FormattedMessage
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
import Sidebar from '$lib/components/sidebar.svelte';
|
||||
import { m } from '$lib/paraglide/messages';
|
||||
import userStore from '$lib/stores/user-store';
|
||||
import { LucideSettings } from '@lucide/svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { fade, fly } from 'svelte/transition';
|
||||
import type { LayoutData } from './$types';
|
||||
@@ -46,7 +45,7 @@
|
||||
|
||||
<section>
|
||||
<div
|
||||
class="bg-muted/40 dark:bg-background flex min-h-[calc(100vh-64px)] w-full flex-col justify-between"
|
||||
class="bg-muted/40 dark:bg-background flex min-h-[calc(100vh-86px)] w-full flex-col justify-between"
|
||||
>
|
||||
<main
|
||||
in:fade={{ duration: 200 }}
|
||||
@@ -54,13 +53,6 @@
|
||||
>
|
||||
<div class="min-w-[200px] xl:min-w-[250px]">
|
||||
<div in:fly={{ x: -15, duration: 200 }} class="sticky top-6">
|
||||
<div class="mx-auto grid w-full gap-2">
|
||||
<h1 class="mb-4 flex items-center gap-2 text-2xl font-semibold">
|
||||
<LucideSettings class="size-5" />
|
||||
{m.settings()}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<Sidebar
|
||||
{items}
|
||||
storageKey="sidebar-open:settings"
|
||||
@@ -70,7 +62,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full flex-col gap-4 overflow-hidden">
|
||||
<div class="flex w-full flex-col gap-4 overflow-hidden pb-2">
|
||||
<FadeWrapper>
|
||||
<EmailVerificationStateBox />
|
||||
{@render children()}
|
||||
|
||||
@@ -141,7 +141,7 @@
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<Item.Group class="bg-card rounded-xl border p-4 shadow-sm">
|
||||
<Item.Group class="bg-card border shadow-sm rounded-4xl p-5">
|
||||
<Item.Root class="border-none bg-transparent p-0">
|
||||
<Item.Media class="text-primary/80">
|
||||
<KeyRound class="size-5" />
|
||||
|
||||
@@ -64,7 +64,6 @@
|
||||
value={loginCodeLink}
|
||||
size={150}
|
||||
color={mode.current === 'dark' ? '#FFFFFF' : '#000000'}
|
||||
backgroundColor={mode.current === 'dark' ? '#000000' : '#FFFFFF'}
|
||||
/>
|
||||
<CopyToClipboard value={loginCodeLink!}>
|
||||
<p class="text-sm" data-testId="login-code-link">{loginCodeLink!}</p>
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex justify-start gap-3">
|
||||
<div class="flex flex-col sm:flex-row justify-start gap-3">
|
||||
<Field.Field class="w-auto min-w-48">
|
||||
<Field.Label>{m.users()}</Field.Label>
|
||||
<SearchableSelect
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
</div>
|
||||
</CollapsibleCard>
|
||||
|
||||
<Item.Group class="bg-card rounded-xl border p-4 shadow-sm">
|
||||
<Item.Group class="bg-card border p-4 shadow-sm">
|
||||
<Item.Root class="border-none bg-transparent p-0">
|
||||
<Item.Media class="text-primary/80">
|
||||
<KeyRound class="size-5" />
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
<LoginLogoErrorSuccessIndicator error={!!error} />
|
||||
</div>
|
||||
|
||||
<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">
|
||||
<h1 class="font-glooock mt-5 text-3xl font-bold sm:text-4xl">
|
||||
{m.signup_to_appname({ appName: $appConfigStore.appName })}
|
||||
</h1>
|
||||
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
<div class="flex justify-center">
|
||||
<LoginLogoErrorSuccessIndicator error={!!error} />
|
||||
</div>
|
||||
<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">
|
||||
<h1 class="font-glooock mt-5 text-3xl font-bold sm:text-4xl">
|
||||
{m.setup_your_passkey()}
|
||||
</h1>
|
||||
<p class="text-muted-foreground mt-2" in:fade>
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
<LoginLogoErrorSuccessIndicator error={!!error} />
|
||||
</div>
|
||||
|
||||
<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">
|
||||
<h1 class="font-glooock mt-5 text-3xl font-bold sm:text-4xl">
|
||||
{m.signup_to_appname({ appName: $appConfigStore.appName })}
|
||||
</h1>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user