feat(topbar): increase all font sizes and bar height by another 25%
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
CI / Backend Unit Tests (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
CI / Unit & Component Tests (pull_request) Failing after 1m23s
CI / Backend Unit Tests (pull_request) Failing after 2m38s
CI / E2E Tests (pull_request) Failing after 1h14m58s

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-01 09:12:27 +02:00
parent 37d728b006
commit 7f2940f0f2
7 changed files with 14 additions and 14 deletions

View File

@@ -9,10 +9,10 @@ let { annotateMode }: Props = $props();
{#if annotateMode}
<div
data-testid="annotate-hint-strip"
class="hidden h-[23px] items-center gap-2 border-t border-dashed px-3.5 md:flex"
class="hidden h-[29px] items-center gap-2 border-t border-dashed px-3.5 md:flex"
style="background: rgba(1,40,81,0.05); border-color: rgba(1,40,81,0.20)"
>
<span class="text-[13px] font-bold tracking-wide text-primary uppercase">Annotieren</span>
<span class="text-[13px] text-ink-2">Klicken Sie auf einen Bereich im Dokument</span>
<span class="text-[16px] font-bold tracking-wide text-primary uppercase">Annotieren</span>
<span class="text-[16px] text-ink-2">Klicken Sie auf einen Bereich im Dokument</span>
</div>
{/if}

View File

@@ -14,7 +14,7 @@ const label = $derived(statusLabel(status));
</script>
<span
class="hidden shrink-0 md:block {dotClass} h-3 w-3 rounded-full"
class="hidden shrink-0 md:block {dotClass} h-4 w-4 rounded-full"
title={label}
aria-label={label}
></span>

View File

@@ -42,7 +42,7 @@ const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long'
<div data-topbar class="border-b border-line bg-surface shadow-sm">
<!-- Main row -->
<div class="flex h-[60px] shrink-0 items-center xs:h-[70px]">
<div class="flex h-[75px] shrink-0 items-center xs:h-[88px]">
<!-- Accent bar -->
<div class="h-full w-[3px] shrink-0 bg-primary"></div>
@@ -66,13 +66,13 @@ const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long'
<!-- Title + meta -->
<div class="min-w-0 flex-1 overflow-hidden">
<h1
class="truncate font-serif text-[14px] leading-tight text-ink lg:text-[16px]"
class="truncate font-serif text-[18px] leading-tight text-ink lg:text-[20px]"
title={doc.title ?? doc.originalFilename ?? ''}
>
{doc.title || doc.originalFilename}
</h1>
{#if shortDate}
<p class="font-sans text-[13px] text-ink-2">
<p class="font-sans text-[16px] text-ink-2">
<span class="lg:hidden">{shortDate}</span>
<span class="hidden lg:inline">{longDate}</span>
</p>

View File

@@ -47,7 +47,7 @@ function handleKeydown(e: KeyboardEvent) {
aria-label="{extraCount} weitere Empfänger anzeigen"
onclick={toggle}
onkeydown={handleKeydown}
class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[11px] font-bold text-ink-2 hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[14px] font-bold text-ink-2 hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
>
+{extraCount} weitere
</button>
@@ -57,12 +57,12 @@ function handleKeydown(e: KeyboardEvent) {
role="list"
class="absolute top-full left-0 z-50 mt-1 min-w-[160px] rounded-md border border-line bg-surface p-3 shadow-lg"
>
<p class="mb-2 text-[11px] font-bold tracking-wide text-ink-2 uppercase">Weitere Empfänger</p>
<p class="mb-2 text-[14px] font-bold tracking-wide text-ink-2 uppercase">Weitere Empfänger</p>
{#each persons as person (person.id)}
<div role="listitem">
<a
href="/persons/{person.id}"
class="block py-0.5 text-[14px] text-ink hover:text-primary focus-visible:ring-2 focus-visible:ring-primary"
class="block py-0.5 text-[18px] text-ink hover:text-primary focus-visible:ring-2 focus-visible:ring-primary"
>
{person.firstName}
{person.lastName}

View File

@@ -8,7 +8,7 @@ let { extraCount }: Props = $props();
<span
aria-hidden="true"
class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[11px] font-bold text-ink-2"
class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[14px] font-bold text-ink-2"
>
+{extraCount}
</span>

View File

@@ -23,11 +23,11 @@ const initials = $derived(
class="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-line bg-muted px-2 py-0.5"
>
<span
class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white"
class="flex h-[25px] w-[25px] shrink-0 items-center justify-center rounded-full text-[13px] font-bold text-white"
style="background-color: {avatarColor}"
aria-hidden="true"
>
{initials}
</span>
<span class="text-[11px] font-semibold text-ink">{displayName}</span>
<span class="text-[14px] font-semibold text-ink">{displayName}</span>
</span>

View File

@@ -22,7 +22,7 @@ const visibleReceivers = $derived(receivers.slice(0, 2));
{/if}
{#if sender && receivers.length > 0}
<span class="shrink-0 text-[13px] text-ink-2" aria-hidden="true"></span>
<span class="shrink-0 text-[16px] text-ink-2" aria-hidden="true"></span>
{/if}
{#each visibleReceivers as receiver, i (receiver.id)}