feat: improve design trough the whole application

This commit is contained in:
Elias Schneider
2026-05-29 11:37:34 +02:00
parent 272d1479bd
commit b3d40a476b
115 changed files with 822 additions and 550 deletions
+1 -1
View File
@@ -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}
+1 -1
View File
@@ -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()}
+1 -1
View File
@@ -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()}
+1 -1
View File
@@ -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
+2 -10
View File
@@ -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" />
+1 -1
View File
@@ -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>