marcel/familienarchiv
1
0
Fork 0
Code Issues 127 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style(frontend): apply Prettier formatting to 26 pre-existing files

Browse Source 
No logic changes — whitespace and indentation only. These were flagged
by the pre-commit hook when running lint after layout.css was modified.

Refs #64
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-25 11:42:52 +01:00
parent 93befbd8da
commit e83ba9b681
27 changed files with 282 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/lib/components/AnnotationCommentPanel.svelte
View File

@@ -25,16 +25,16 @@ let {
<!-- Desktop / tablet panel (≥ sm): absolute overlay on the right side -->
<div
class="absolute top-0 right-0 z-50 hidden h-full w-80 flex-col border-l border-brand-sand bg-white shadow-2xl sm:flex"
class="border-brand-sand absolute top-0 right-0 z-50 hidden h-full w-80 flex-col border-l bg-white shadow-2xl sm:flex"
>
<div class="flex shrink-0 items-center justify-between border-b border-brand-sand px-4 py-3">
<div class="border-brand-sand flex shrink-0 items-center justify-between border-b px-4 py-3">
<h3 class="font-sans text-xs font-bold tracking-widest text-brand-navy uppercase">
{m.comment_panel_title()}
</h3>
<button
onclick={onClose}
aria-label={m.comment_panel_close()}
class="rounded p-1 text-gray-400 transition-colors hover:bg-brand-sand/50 hover:text-brand-navy"
class="hover:bg-brand-sand/50 rounded p-1 text-gray-400 transition-colors hover:text-brand-navy"
>
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -61,14 +61,14 @@ let {
<!-- Slide-up panel -->
<div class="flex max-h-[80vh] flex-col rounded-t-2xl bg-white shadow-2xl">
<div class="flex shrink-0 items-center justify-between border-b border-brand-sand px-4 py-3">
<div class="border-brand-sand flex shrink-0 items-center justify-between border-b px-4 py-3">
<h3 class="font-sans text-xs font-bold tracking-widest text-brand-navy uppercase">
{m.comment_panel_title()}
</h3>
<button
onclick={onClose}
aria-label={m.comment_panel_close()}
class="rounded p-1 text-gray-400 transition-colors hover:bg-brand-sand/50 hover:text-brand-navy"
class="hover:bg-brand-sand/50 rounded p-1 text-gray-400 transition-colors hover:text-brand-navy"
>
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />

6
frontend/src/lib/components/AnnotationSidePanel.svelte
View File

@@ -26,20 +26,20 @@ const visible = $derived(activeAnnotationId !== null);
</script>
<div
class="absolute inset-y-0 right-0 z-10 flex w-80 flex-col border-l border-brand-sand bg-white shadow-[-4px_0_16px_rgba(0,0,0,0.08)] transition-transform duration-200 {visible
class="border-brand-sand absolute inset-y-0 right-0 z-10 flex w-80 flex-col border-l bg-white shadow-[-4px_0_16px_rgba(0,0,0,0.08)] transition-transform duration-200 {visible
? 'translate-x-0'
: 'pointer-events-none translate-x-full'}"
data-testid="annotation-side-panel"
>
<!-- Header -->
<div class="flex shrink-0 items-center justify-between border-b border-brand-sand px-4 py-3">
<div class="border-brand-sand flex shrink-0 items-center justify-between border-b px-4 py-3">
<span class="font-sans text-xs font-medium text-brand-navy">
{m.doc_panel_discussion_annotation_tab({ page: String(activeAnnotationPage ?? '?') })}
</span>
<button
onclick={onClose}
aria-label={m.comment_panel_close()}
class="rounded p-1 text-gray-400 transition-colors hover:bg-brand-sand/50 hover:text-brand-navy"
class="hover:bg-brand-sand/50 rounded p-1 text-gray-400 transition-colors hover:text-brand-navy"
>
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />

14
frontend/src/lib/components/CommentThread.svelte
View File

@@ -191,13 +191,13 @@ onMount(() => {
<div class="space-y-4">
{#each comments as thread, ti (thread.id)}
<div class={ti > 0 ? 'border-t border-brand-sand pt-4' : ''}>
<div class={ti > 0 ? 'border-brand-sand border-t pt-4' : ''}>
<!-- Root comment -->
<div>
{#if editingId === thread.id}
<div class="flex flex-col gap-2">
<textarea
class="w-full resize-none rounded border border-brand-sand px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
class="border-brand-sand w-full resize-none rounded border px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
rows={3}
bind:value={editText}
></textarea>
@@ -267,11 +267,11 @@ onMount(() => {
<!-- Replies -->
{#each thread.replies as reply, ri (reply.id)}
<div class="mt-3 ml-6 border-l-2 border-brand-sand pl-4">
<div class="border-brand-sand mt-3 ml-6 border-l-2 pl-4">
{#if editingId === reply.id}
<div class="flex flex-col gap-2">
<textarea
class="w-full resize-none rounded border border-brand-sand px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
class="border-brand-sand w-full resize-none rounded border px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
rows={3}
bind:value={editText}
></textarea>
@@ -344,7 +344,7 @@ onMount(() => {
{#if replyingTo === thread.id}
<div class="mt-3 ml-6 flex flex-col gap-2">
<textarea
class="w-full resize-none rounded border border-brand-sand px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
class="border-brand-sand w-full resize-none rounded border px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
rows={3}
placeholder={m.comment_placeholder()}
bind:value={replyText}
@@ -371,10 +371,10 @@ onMount(() => {
<!-- New top-level comment textarea -->
{#if canComment}
<div class={comments.length > 0 ? 'border-t border-brand-sand pt-4' : ''}>
<div class={comments.length > 0 ? 'border-brand-sand border-t pt-4' : ''}>
<div class="flex flex-col gap-2">
<textarea
class="w-full resize-none rounded border border-brand-sand px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
class="border-brand-sand w-full resize-none rounded border px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
rows={3}
placeholder={m.comment_placeholder()}
bind:value={newText}

6
frontend/src/lib/components/DocumentBottomPanel.svelte
View File

@@ -121,7 +121,7 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
</script>
<div
class="fixed right-0 bottom-0 left-0 z-30 flex flex-col border-t border-brand-sand bg-white shadow-[0_-4px_16px_rgba(0,0,0,0.08)]"
class="border-brand-sand fixed right-0 bottom-0 left-0 z-30 flex flex-col border-t bg-white shadow-[0_-4px_16px_rgba(0,0,0,0.08)]"
style="height: {panelHeight}px"
data-testid="bottom-panel"
>
@@ -141,7 +141,7 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
</div>
<!-- Tab bar -->
<div class="flex shrink-0 items-center border-b border-brand-sand bg-white px-4">
<div class="border-brand-sand flex shrink-0 items-center border-b bg-white px-4">
{#each tabs as tab (tab.id)}
<button
onclick={() => openTab(tab.id)}
@@ -162,7 +162,7 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
onclick={closePanel}
data-testid="panel-close-btn"
aria-label="Panel schließen"
class="rounded p-1.5 text-gray-400 transition-colors hover:bg-brand-sand/50 hover:text-brand-navy"
class="hover:bg-brand-sand/50 rounded p-1.5 text-gray-400 transition-colors hover:text-brand-navy"
>
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />

6
frontend/src/lib/components/DocumentTopBar.svelte
View File

@@ -58,7 +58,7 @@ const compactMeta = $derived.by(() => {
</script>
<div
class="z-20 flex shrink-0 items-center justify-between border-b border-brand-sand bg-white px-6 py-3 shadow-sm"
class="border-brand-sand z-20 flex shrink-0 items-center justify-between border-b bg-white px-6 py-3 shadow-sm"
data-topbar
>
<!-- Left: back + title -->
@@ -68,7 +68,7 @@ const compactMeta = $derived.by(() => {
class="group flex shrink-0 items-center gap-2 font-sans text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy"
>
<div
class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-sand transition-colors group-hover:bg-brand-mint"
class="bg-brand-sand flex h-8 w-8 items-center justify-center rounded-full transition-colors group-hover:bg-brand-mint"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
@@ -134,7 +134,7 @@ const compactMeta = $derived.by(() => {
<a
href={fileUrl}
download={doc.originalFilename}
class="rounded border border-transparent bg-brand-sand/50 p-1.5 text-brand-navy transition hover:bg-brand-mint"
class="bg-brand-sand/50 rounded border border-transparent p-1.5 text-brand-navy transition hover:bg-brand-mint"
title={m.doc_download_title()}
>
<img

2
frontend/src/lib/components/ExpandableText.svelte
View File

@@ -18,7 +18,7 @@ $effect(() => {
<div
bind:this={el}
style={!expanded ? `overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${maxLines}` : ''}
class="rounded border border-brand-sand bg-brand-sand/30 p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-brand-navy"
class="border-brand-sand bg-brand-sand/30 rounded border p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-brand-navy"
>
{text}
</div>

18
frontend/src/lib/components/PanelHistory.svelte
View File

@@ -302,7 +302,7 @@ $effect(() => {
<select
id="compare-a"
bind:value={compareA}
class="w-full rounded border border-brand-sand bg-white px-2 py-1 font-sans text-xs text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
class="border-brand-sand w-full rounded border bg-white px-2 py-1 font-sans text-xs text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
>
<option value="">—</option>
{#each versions as v, i (v.id)}
@@ -317,7 +317,7 @@ $effect(() => {
<select
id="compare-b"
bind:value={compareB}
class="w-full rounded border border-brand-sand bg-white px-2 py-1 font-sans text-xs text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
class="border-brand-sand w-full rounded border bg-white px-2 py-1 font-sans text-xs text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
>
<option value="">—</option>
{#each versions as v, i (v.id)}
@@ -340,14 +340,14 @@ $effect(() => {
{:else if noDiff}
<div
data-testid="history-diff"
class="rounded-sm border border-brand-sand bg-white p-4 font-serif text-sm text-gray-400 italic"
class="border-brand-sand rounded-sm border bg-white p-4 font-serif text-sm text-gray-400 italic"
>
{m.history_diff_no_changes()}
</div>
{:else if diffEntries.length > 0}
<div
data-testid="history-diff"
class="space-y-4 rounded-sm border border-brand-sand bg-white p-4"
class="border-brand-sand space-y-4 rounded-sm border bg-white p-4"
>
{#each diffEntries as entry (entry.field)}
<div>
@@ -406,13 +406,13 @@ $effect(() => {
{/if}
{:else}
<!-- Version list with inline diff below each selected item -->
<ul class="divide-y divide-brand-sand">
<ul class="divide-brand-sand divide-y">
{#each versions as v, i (v.id)}
<li>
<button
onclick={() => selectVersion(v.id)}
data-testid="history-version"
class="w-full py-2 text-left transition hover:bg-brand-sand/30 {selectedVersionId ===
class="hover:bg-brand-sand/30 w-full py-2 text-left transition {selectedVersionId ===
v.id
? 'border-l-2 border-brand-mint pl-2'
: 'pl-0'}"
@@ -430,7 +430,7 @@ $effect(() => {
<div class="mt-1 flex flex-wrap gap-1">
{#each v.changedFields as field (field)}
<span
class="rounded bg-brand-sand/50 px-1.5 py-0.5 font-sans text-[10px] tracking-wide text-gray-500 uppercase"
class="bg-brand-sand/50 rounded px-1.5 py-0.5 font-sans text-[10px] tracking-wide text-gray-500 uppercase"
>
{fieldLabels[field] ? fieldLabels[field]() : field}
</span>
@@ -446,14 +446,14 @@ $effect(() => {
{:else if noDiff}
<div
data-testid="history-diff"
class="mb-2 rounded-sm border border-brand-sand bg-white p-4 font-serif text-sm text-gray-400 italic"
class="border-brand-sand mb-2 rounded-sm border bg-white p-4 font-serif text-sm text-gray-400 italic"
>
{m.history_diff_no_changes()}
</div>
{:else if diffEntries.length > 0}
<div
data-testid="history-diff"
class="mb-2 space-y-4 rounded-sm border border-brand-sand bg-white p-4"
class="border-brand-sand mb-2 space-y-4 rounded-sm border bg-white p-4"
>
{#each diffEntries as entry (entry.field)}
<div>

10
frontend/src/lib/components/PanelMetadata.svelte
View File

@@ -21,7 +21,7 @@ let { doc }: { doc: Doc } = $props();
<!-- DETAILS GROUP -->
<div>
<h3
class="mb-4 border-b border-brand-sand pb-2 font-sans text-xs font-bold tracking-widest text-brand-navy uppercase"
class="border-brand-sand mb-4 border-b pb-2 font-sans text-xs font-bold tracking-widest text-brand-navy uppercase"
>
{m.doc_section_details()}
</h3>
@@ -100,7 +100,7 @@ let { doc }: { doc: Doc } = $props();
{#each doc.tags as tag (tag.id)}
<a
href="/?tag={encodeURIComponent(tag.name)}"
class="inline-flex items-center rounded bg-brand-sand/50 px-2 py-0.5 text-xs font-bold tracking-wide text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
class="bg-brand-sand/50 inline-flex items-center rounded px-2 py-0.5 text-xs font-bold tracking-wide text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
title={m.doc_tag_filter_title({ name: tag.name })}
>
{tag.name}
@@ -117,7 +117,7 @@ let { doc }: { doc: Doc } = $props();
<!-- PERSONEN GROUP -->
<div>
<h3
class="mb-4 border-b border-brand-sand pb-2 font-sans text-xs font-bold tracking-widest text-brand-navy uppercase"
class="border-brand-sand mb-4 border-b pb-2 font-sans text-xs font-bold tracking-widest text-brand-navy uppercase"
>
{m.doc_section_persons()}
</h3>
@@ -129,7 +129,7 @@ let { doc }: { doc: Doc } = $props();
{#if doc.sender}
<a
href="/persons/{doc.sender.id}"
class="group block rounded border border-brand-sand bg-brand-sand/20 p-3 transition hover:border-brand-mint hover:bg-brand-mint/10"
class="group border-brand-sand bg-brand-sand/20 block rounded border p-3 transition hover:border-brand-mint hover:bg-brand-mint/10"
>
<div class="flex items-center gap-3">
<div
@@ -163,7 +163,7 @@ let { doc }: { doc: Doc } = $props();
<div class="space-y-2">
{#each doc.receivers as receiver (receiver.id)}
<div
class="group flex items-center justify-between rounded border border-brand-sand bg-white p-3 transition hover:border-brand-navy"
class="group border-brand-sand flex items-center justify-between rounded border bg-white p-3 transition hover:border-brand-navy"
>
<a href="/persons/{receiver.id}" class="flex min-w-0 flex-1 items-center gap-3">
<div

4
frontend/src/lib/components/PersonMultiSelect.svelte
View File

@@ -84,7 +84,7 @@ function clickOutside(node: HTMLElement) {
>
{#each selectedPersons as person (person.id)}
<span
class="inline-flex items-center gap-1 rounded bg-brand-sand/40 px-2 py-1 text-sm font-medium text-brand-navy"
class="bg-brand-sand/40 inline-flex items-center gap-1 rounded px-2 py-1 text-sm font-medium text-brand-navy"
>
{person.firstName}
{person.lastName}
@@ -128,7 +128,7 @@ function clickOutside(node: HTMLElement) {
{:else}
{#each results as person (person.id)}
<div
class="cursor-pointer py-2 pr-9 pl-3 text-gray-900 select-none hover:bg-brand-sand/30"
class="hover:bg-brand-sand/30 cursor-pointer py-2 pr-9 pl-3 text-gray-900 select-none"
onclick={() => selectPerson(person)}
onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
role="button"

4
frontend/src/lib/components/TagInput.svelte
View File

@@ -90,7 +90,7 @@ function clickOutside(node: HTMLElement) {
<!-- Render Selected Tags -->
{#each tags as tag, i (i)}
<span
class="flex items-center gap-1 rounded bg-brand-sand/30 px-2 py-1 text-sm font-medium text-brand-navy"
class="bg-brand-sand/30 flex items-center gap-1 rounded px-2 py-1 text-sm font-medium text-brand-navy"
>
{tag}
<button
@@ -137,7 +137,7 @@ function clickOutside(node: HTMLElement) {
role="option"
aria-selected={i === activeIndex}
tabindex="0"
class="cursor-pointer px-3 py-2 text-sm hover:bg-brand-sand/20 {i === activeIndex
class="hover:bg-brand-sand/20 cursor-pointer px-3 py-2 text-sm {i === activeIndex
? 'bg-brand-sand/20 font-bold text-brand-navy'
: 'text-gray-700'}"
onclick={() => addTag(suggestion)}

16
frontend/src/routes/+layout.svelte
View File

@@ -69,7 +69,7 @@ function clickOutside(node: HTMLElement) {
class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
{page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
? 'rounded bg-brand-purple/15 text-brand-navy'
: 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
: 'hover:bg-brand-sand/60 rounded text-gray-500 hover:text-brand-navy'}"
>
{m.nav_documents()}
</a>
@@ -79,7 +79,7 @@ function clickOutside(node: HTMLElement) {
class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
{page.url.pathname.startsWith('/persons')
? 'rounded bg-brand-purple/15 text-brand-navy'
: 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
: 'hover:bg-brand-sand/60 rounded text-gray-500 hover:text-brand-navy'}"
>
{m.nav_persons()}
</a>
@@ -89,7 +89,7 @@ function clickOutside(node: HTMLElement) {
class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
{page.url.pathname.startsWith('/conversations')
? 'rounded bg-brand-purple/15 text-brand-navy'
: 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
: 'hover:bg-brand-sand/60 rounded text-gray-500 hover:text-brand-navy'}"
>
{m.nav_conversations()}
</a>
@@ -99,7 +99,7 @@ function clickOutside(node: HTMLElement) {
class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
{page.url.pathname.startsWith('/admin')
? 'rounded bg-brand-purple/15 text-brand-navy'
: 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
: 'hover:bg-brand-sand/60 rounded text-gray-500 hover:text-brand-navy'}"
>
{m.nav_admin()}
</a>
@@ -162,20 +162,20 @@ function clickOutside(node: HTMLElement) {
{#if userMenuOpen}
<div
class="absolute top-full right-0 z-50 mt-1 min-w-[10rem] rounded-sm border border-brand-sand bg-white shadow-md"
class="border-brand-sand absolute top-full right-0 z-50 mt-1 min-w-[10rem] rounded-sm border bg-white shadow-md"
>
<a
href="/profile"
onclick={() => (userMenuOpen = false)}
class="block px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-brand-sand/40 hover:text-brand-navy"
class="hover:bg-brand-sand/40 block px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:text-brand-navy"
>
{m.nav_profile()}
</a>
<div class="border-t border-brand-sand">
<div class="border-brand-sand border-t">
<form action="/logout" method="POST" use:enhance>
<button
type="submit"
class="w-full px-4 py-2.5 text-left font-sans text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:bg-brand-sand/40 hover:text-brand-navy"
class="hover:bg-brand-sand/40 w-full px-4 py-2.5 text-left font-sans text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-brand-navy"
>
{m.nav_logout()}
</button>

10
frontend/src/routes/+page.svelte
View File

@@ -78,7 +78,7 @@ $effect(() => {
<!-- Outer Container: Matches the 'Sand' background of the layout -->
<main class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
<!-- SEARCH & FILTER CARD -->
<div class="mb-8 rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand mb-8 rounded-sm border bg-white p-6 shadow-sm">
<!-- ROW 1: Main Search (One Line) -->
<div class="flex items-center gap-4">
<!-- Full Text Search -->
@@ -229,7 +229,7 @@ $effect(() => {
</div>
<!-- DOCUMENT LIST -->
<div class="border border-brand-sand bg-white shadow-sm">
<div class="border-brand-sand border bg-white shadow-sm">
{#if data.error}
<div class="bg-red-50 p-8 text-center text-red-600">
{data.error}
@@ -237,7 +237,7 @@ $effect(() => {
{:else if data.documents && data.documents.length > 0}
<ul class="divide-y divide-gray-100">
{#each data.documents as doc (doc.id)}
<li class="group transition-colors duration-200 hover:bg-brand-sand/10">
<li class="group hover:bg-brand-sand/10 transition-colors duration-200">
<!-- LINK TO DETAIL PAGE -->
<a href="/documents/{doc.id}" class="block p-6">
<div class="flex flex-col gap-6 sm:flex-row">
@@ -312,7 +312,7 @@ $effect(() => {
{#each doc.tags as tag (tag.id)}
<button
type="button"
class="relative z-10 inline-flex cursor-pointer items-center rounded bg-brand-sand/30 px-2 py-1 text-[10px] font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
class="bg-brand-sand/30 relative z-10 inline-flex cursor-pointer items-center rounded px-2 py-1 text-[10px] font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
onclick={(e) => { e.preventDefault(); e.stopPropagation(); goto(`/?tag=${encodeURIComponent(tag.name)}`); }}
>
{tag.name}
@@ -342,7 +342,7 @@ $effect(() => {
<!-- Empty State -->
<div class="p-16 text-center">
<div
class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30"
class="bg-brand-sand/30 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"

12
frontend/src/routes/admin/+page.svelte
View File

@@ -107,7 +107,7 @@ async function backfillFileHashes() {
{/if}
{#if activeTab === 'users'}
<div class="overflow-hidden rounded-lg border border-brand-sand bg-white shadow-sm" in:slide>
<div class="border-brand-sand overflow-hidden rounded-lg border bg-white shadow-sm" in:slide>
<div class="flex items-center justify-between border-b border-gray-100 p-6">
<h2 class="text-lg font-bold text-gray-700">{m.admin_section_users()}</h2>
<a
@@ -217,7 +217,7 @@ async function backfillFileHashes() {
</table>
</div>
{:else if activeTab === 'tags'}
<div class="overflow-hidden rounded-lg border border-brand-sand bg-white shadow-sm" in:slide>
<div class="border-brand-sand overflow-hidden rounded-lg border bg-white shadow-sm" in:slide>
<div class="border-b border-gray-100 bg-yellow-50/50 p-6">
<h2 class="text-lg font-bold text-gray-700">{m.admin_section_tags()}</h2>
<p class="mt-1 text-xs text-yellow-800">
@@ -272,7 +272,7 @@ async function backfillFileHashes() {
>
</form>
{:else}
<span class="rounded bg-brand-sand/30 px-2 py-1 text-sm font-medium text-brand-navy">
<span class="bg-brand-sand/30 rounded px-2 py-1 text-sm font-medium text-brand-navy">
{tag.name}
</span>
<div
@@ -329,7 +329,7 @@ async function backfillFileHashes() {
</ul>
</div>
{:else if activeTab === 'groups'}
<div class="overflow-hidden rounded-lg border border-brand-sand bg-white shadow-sm" in:slide>
<div class="border-brand-sand overflow-hidden rounded-lg border bg-white shadow-sm" in:slide>
<div class="flex items-center justify-between border-b border-gray-100 p-6">
<h2 class="text-lg font-bold text-gray-700">{m.admin_section_groups()}</h2>
</div>
@@ -535,7 +535,7 @@ async function backfillFileHashes() {
</div>
</div>
{:else if activeTab === 'system'}
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-1 text-lg font-bold text-gray-700">{m.admin_system_backfill_heading()}</h2>
<p class="mb-4 text-sm text-gray-500">{m.admin_system_backfill_description()}</p>
<button
@@ -552,7 +552,7 @@ async function backfillFileHashes() {
{/if}
</div>
<div class="mt-4 rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand mt-4 rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-1 text-lg font-bold text-gray-700">
{m.admin_system_backfill_hashes_heading()}
</h2>

22
frontend/src/routes/admin/users/[id]/+page.svelte
View File

@@ -72,7 +72,7 @@ function handleBirthDateInput(e: Event) {
<form method="POST" use:enhance class="space-y-6">
<!-- Profile card -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.profile_section_personal()}
</h2>
@@ -89,7 +89,7 @@ function handleBirthDateInput(e: Event) {
type="text"
name="firstName"
value={data.editUser.firstName ?? ''}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -103,7 +103,7 @@ function handleBirthDateInput(e: Event) {
type="text"
name="lastName"
value={data.editUser.lastName ?? ''}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
</div>
@@ -119,7 +119,7 @@ function handleBirthDateInput(e: Event) {
placeholder="TT.MM.JJJJ"
value={birthDateDisplay}
oninput={handleBirthDateInput}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
<input type="hidden" name="birthDate" value={birthDateIso} />
</label>
@@ -134,7 +134,7 @@ function handleBirthDateInput(e: Event) {
type="email"
name="email"
value={data.editUser.email ?? ''}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -148,7 +148,7 @@ function handleBirthDateInput(e: Event) {
name="contact"
rows="3"
placeholder={m.profile_contact_placeholder()}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
>{data.editUser.contact ?? ''}</textarea
>
</label>
@@ -156,7 +156,7 @@ function handleBirthDateInput(e: Event) {
</div>
<!-- Groups card -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.admin_col_groups()}
</h2>
@@ -178,7 +178,7 @@ function handleBirthDateInput(e: Event) {
</div>
<!-- Password card -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.admin_label_new_password_optional()}
</h2>
@@ -193,7 +193,7 @@ function handleBirthDateInput(e: Event) {
<input
type="password"
name="newPassword"
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -206,7 +206,7 @@ function handleBirthDateInput(e: Event) {
<input
type="password"
name="confirmPassword"
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
</div>
@@ -214,7 +214,7 @@ function handleBirthDateInput(e: Event) {
<!-- Save bar -->
<div
class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-brand-sand bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
class="border-brand-sand sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
>
<a
href="/admin"

18
frontend/src/routes/admin/users/new/+page.svelte
View File

@@ -53,7 +53,7 @@ function handleBirthDateInput(e: Event) {
</div>
{/if}
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<form method="POST" use:enhance class="space-y-5">
<!-- Account -->
<h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase">
@@ -70,7 +70,7 @@ function handleBirthDateInput(e: Event) {
type="text"
name="username"
required
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -84,7 +84,7 @@ function handleBirthDateInput(e: Event) {
type="password"
name="password"
required
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -103,7 +103,7 @@ function handleBirthDateInput(e: Event) {
<input
type="text"
name="firstName"
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -116,7 +116,7 @@ function handleBirthDateInput(e: Event) {
<input
type="text"
name="lastName"
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
</div>
@@ -131,7 +131,7 @@ function handleBirthDateInput(e: Event) {
type="text"
placeholder="TT.MM.JJJJ"
oninput={handleBirthDateInput}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
<input type="hidden" name="birthDate" value={birthDateIso} />
</label>
@@ -145,7 +145,7 @@ function handleBirthDateInput(e: Event) {
<input
type="email"
name="email"
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -159,7 +159,7 @@ function handleBirthDateInput(e: Event) {
name="contact"
rows="3"
placeholder={m.profile_contact_placeholder()}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
></textarea>
</label>
@@ -184,7 +184,7 @@ function handleBirthDateInput(e: Event) {
<!-- Save bar -->
<div
class="mt-4 flex items-center justify-between rounded-sm border border-brand-sand bg-white px-6 py-4 shadow-sm"
class="border-brand-sand mt-4 flex items-center justify-between rounded-sm border bg-white px-6 py-4 shadow-sm"
>
<a
href="/admin"

22
frontend/src/routes/conversations/+page.svelte
View File

@@ -75,7 +75,7 @@ const enrichedDocuments = $derived(
</div>
<!-- FILTER BAR -->
<div class="relative z-20 mb-10 border border-brand-sand bg-white p-8 shadow-sm">
<div class="border-brand-sand relative z-20 mb-10 border bg-white p-8 shadow-sm">
<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
<!-- Sender -->
<div
@@ -98,7 +98,7 @@ const enrichedDocuments = $derived(
<button
data-testid="conv-swap-btn"
onclick={swapPersons}
class="flex w-full items-center justify-center gap-2 border border-brand-sand px-3 py-2.5 text-xs font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white md:w-auto {senderId &&
class="border-brand-sand flex w-full items-center justify-center gap-2 border px-3 py-2.5 text-xs font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white md:w-auto {senderId &&
receiverId
? ''
: 'invisible'}"
@@ -173,7 +173,7 @@ const enrichedDocuments = $derived(
<div>
<button
onclick={toggleSort}
class="flex h-[42px] w-full items-center justify-center border border-brand-sand text-xs font-bold tracking-wide text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
class="border-brand-sand flex h-[42px] w-full items-center justify-center border text-xs font-bold tracking-wide text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
>
<span class="mr-2">{m.conv_sort_label()}</span>
<span>{sortDir === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}</span>
@@ -196,9 +196,9 @@ const enrichedDocuments = $derived(
<!-- RESULTS LIST SECTION -->
{#if !senderId || !receiverId}
<div
class="flex flex-col items-center justify-center rounded-sm border border-dashed border-brand-sand bg-white py-24 text-center"
class="border-brand-sand flex flex-col items-center justify-center rounded-sm border border-dashed bg-white py-24 text-center"
>
<div class="mb-4 rounded-full bg-brand-sand/30 p-4 text-brand-navy">
<div class="bg-brand-sand/30 mb-4 rounded-full p-4 text-brand-navy">
<svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
@@ -213,7 +213,7 @@ const enrichedDocuments = $derived(
</div>
{:else if data.documents.length === 0}
<div
class="flex flex-col items-center justify-center rounded-sm border border-brand-sand bg-white py-24 text-center shadow-sm"
class="border-brand-sand flex flex-col items-center justify-center rounded-sm border bg-white py-24 text-center shadow-sm"
>
<p class="font-serif text-brand-navy">{m.conv_no_results_heading()}</p>
<p class="mt-2 text-sm text-gray-400">{m.conv_no_results_text()}</p>
@@ -246,10 +246,10 @@ const enrichedDocuments = $derived(
</div>
<!-- CHAT CONTAINER -->
<div class="relative overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
<div class="border-brand-sand relative overflow-hidden rounded-sm border bg-white shadow-sm">
<!-- Decoration: Central Timeline Line -->
<div
class="absolute top-0 bottom-0 left-1/2 hidden w-px -translate-x-1/2 transform bg-brand-sand/30 md:block"
class="bg-brand-sand/30 absolute top-0 bottom-0 left-1/2 hidden w-px -translate-x-1/2 transform md:block"
></div>
<div class="p-6 md:p-8">
@@ -257,12 +257,12 @@ const enrichedDocuments = $derived(
{#each enrichedDocuments as { doc, year, showYearDivider } (doc.id)}
{#if showYearDivider}
<div data-testid="year-divider" class="relative flex items-center py-2 text-center">
<div class="flex-grow border-t border-brand-sand"></div>
<div class="border-brand-sand flex-grow border-t"></div>
<span
class="mx-4 font-sans text-xs font-bold tracking-widest text-brand-navy/40 uppercase"
>{year}</span
>
<div class="flex-grow border-t border-brand-sand"></div>
<div class="border-brand-sand flex-grow border-t"></div>
</div>
{/if}
{@const isRight = doc.sender?.id === senderId}
@@ -297,7 +297,7 @@ const enrichedDocuments = $derived(
class="group block transform rounded border p-4 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md
{isRight
? 'rounded-br-none border-brand-navy bg-brand-navy text-white'
: 'rounded-bl-none border-brand-sand bg-brand-sand/10 text-brand-navy'}"
: 'border-brand-sand bg-brand-sand/10 rounded-bl-none text-brand-navy'}"
>
<!-- Header -->
<div class="mb-2 flex items-start justify-between gap-4">

24
frontend/src/routes/documents/[id]/edit/+page.svelte
View File

@@ -65,7 +65,7 @@ function handleDateInput(e: Event) {
<form method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
<!-- ── Section 1: Wer & Wann ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.doc_section_who_when()}
</h2>
@@ -128,7 +128,7 @@ function handleDateInput(e: Event) {
</div>
<!-- ── Section 2: Beschreibung ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.doc_section_description()}
</h2>
@@ -190,7 +190,7 @@ function handleDateInput(e: Event) {
</div>
<!-- ── Section 3: Transkription ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.form_label_transcription()}
</h2>
@@ -205,13 +205,13 @@ function handleDateInput(e: Event) {
</div>
<!-- ── Section 4: Datei ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.doc_section_file()}
</h2>
<div
class="mb-4 flex items-center gap-3 rounded bg-brand-sand/20 px-3 py-2 text-sm text-gray-600"
class="bg-brand-sand/20 mb-4 flex items-center gap-3 rounded px-3 py-2 text-sm text-gray-600"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
@@ -233,18 +233,18 @@ function handleDateInput(e: Event) {
id="file-upload"
type="file"
name="file"
class="block w-full cursor-pointer text-sm
text-gray-500 file:mr-4 file:rounded
file:border-0 file:bg-brand-sand/40
file:px-4 file:py-2
file:text-sm file:font-semibold
file:text-brand-navy hover:file:bg-brand-sand/60"
class="file:bg-brand-sand/40 hover:file:bg-brand-sand/60 block w-full
cursor-pointer text-sm text-gray-500
file:mr-4 file:rounded
file:border-0 file:px-4
file:py-2 file:text-sm
file:font-semibold file:text-brand-navy"
/>
</div>
<!-- ── Sticky Save Bar ── -->
<div
class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-brand-sand bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
class="border-brand-sand sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
>
<a
href="/documents/{doc.id}"

22
frontend/src/routes/documents/new/+page.svelte
View File

@@ -76,7 +76,7 @@ function handleDateInput(e: Event) {
<form method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
<!-- ── Section 1: Wer & Wann ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.doc_section_who_when()}
</h2>
@@ -140,7 +140,7 @@ function handleDateInput(e: Event) {
</div>
<!-- ── Section 2: Beschreibung ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.doc_section_description()}
</h2>
@@ -199,7 +199,7 @@ function handleDateInput(e: Event) {
</div>
<!-- ── Section 3: Transkription ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.form_label_transcription()}
</h2>
@@ -213,7 +213,7 @@ function handleDateInput(e: Event) {
</div>
<!-- ── Section 4: Datei ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.doc_section_file()}
</h2>
@@ -226,18 +226,18 @@ function handleDateInput(e: Event) {
id="file-upload"
type="file"
name="file"
class="block w-full cursor-pointer text-sm
text-gray-500 file:mr-4 file:rounded
file:border-0 file:bg-brand-sand/40
file:px-4 file:py-2
file:text-sm file:font-semibold
file:text-brand-navy hover:file:bg-brand-sand/60"
class="file:bg-brand-sand/40 hover:file:bg-brand-sand/60 block w-full
cursor-pointer text-sm text-gray-500
file:mr-4 file:rounded
file:border-0 file:px-4
file:py-2 file:text-sm
file:font-semibold file:text-brand-navy"
/>
</div>
<!-- ── Sticky Save Bar ── -->
<div
class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-brand-sand bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
class="border-brand-sand sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
>
<a href="/" class="text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy">
{m.btn_cancel()}

2
frontend/src/routes/forgot-password/+page.svelte
View File

@@ -20,7 +20,7 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
</div>
<!-- Card -->
<div class="rounded-sm border border-brand-sand bg-white p-8 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-8 shadow-sm">
<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
{m.forgot_password_heading()}
</h1>

154
frontend/src/routes/layout.css
View File

@@ -1,34 +1,160 @@
/* 1. Import Tailwind (replaces @tailwind base/components/utilities) */
/* Fonts: Montserrat = Gotham substitute | Tinos = Times substitute (De Gruyter Brill CI) */
/* ─── 1. Fonts & Tailwind ──────────────────────────────────────────────────── */
/* Tinos = Times substitute | Montserrat = Gotham substitute (De Gruyter Brill CI) */
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:wght@400;500;600;700&display=swap');
@import 'tailwindcss';
/* 2. Define Custom Theme Variables — De Gruyter Brill CI */
/* ─── 2. Raw palette — never used directly in components ──────────────────── */
@theme {
/* COLORS — exact De Gruyter Brill brand palette */
--color-brand-navy: #012851; /* Prussian Blue */
--color-brand-mint: #a1dcd8; /* Aqua Island */
--color-brand-purple: #b4b9ff; /* Melrose */
--color-brand-sand: #f0efe9; /* Neutral paper tone */
--color-brand-white: #ffffff;
--color-brand-dark: #0d0d0d;
/* Brand palette constants */
--palette-navy: #012851;
--palette-mint: #a1dcd8;
--palette-turquoise: #00c7b1;
--palette-sand: #f0efe9;
--palette-purple: #b4b9ff;
/* FONTS */
/* Typography */
--font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
--font-serif: 'Tinos', 'Times New Roman', Georgia, serif;
--text-huge: 4rem;
}
/* 3. Base Styles */
/* ─── 3. Semantic tokens — Tailwind utilities backed by CSS variables ──────── */
/*
@theme inline makes Tailwind generate utility classes (bg-surface, text-ink,
border-line, etc.) whose values are CSS custom properties, not hardcoded hex.
Changing --c-surface on :root is all it takes to retheme the whole UI.
*/
@theme inline {
/* Surfaces */
--color-canvas: var(--c-canvas);
--color-surface: var(--c-surface);
--color-overlay: var(--c-overlay);
--color-muted: var(--c-muted);
/* Borders */
--color-line: var(--c-line);
--color-line-2: var(--c-line-2);
/* Text */
--color-ink: var(--c-ink);
--color-ink-2: var(--c-ink-2);
--color-ink-3: var(--c-ink-3);
/* Accent (mint ↔ turquoise) */
--color-accent: var(--c-accent);
--color-accent-bg: var(--c-accent-bg);
/* Primary interactive (navy ↔ mint) */
--color-primary: var(--c-primary);
--color-primary-fg: var(--c-primary-fg);
/* Nav active state */
--color-nav-active: var(--c-nav-active);
/* PDF viewer */
--color-pdf-bg: var(--c-pdf-bg);
--color-pdf-ctrl: var(--c-pdf-ctrl);
--color-pdf-text: var(--c-pdf-text);
/* Static brand tokens (not themed) */
--color-brand-purple: var(--palette-purple);
--color-brand-navy: var(--palette-navy);
--color-brand-mint: var(--palette-mint);
}
/* ─── 4. Light mode (default) ─────────────────────────────────────────────── */
:root {
--c-canvas: #f0efe9;
--c-surface: #ffffff;
--c-overlay: #ffffff;
--c-muted: #f5f4ef;
--c-line: #e4e2d7;
--c-line-2: #eeede8;
--c-ink: #012851;
--c-ink-2: #6b7280;
--c-ink-3: #9ca3af;
--c-accent: #a1dcd8;
--c-accent-bg: rgba(161, 220, 216, 0.15);
--c-primary: #012851;
--c-primary-fg: #ffffff;
--c-nav-active: rgba(180, 185, 255, 0.15);
--c-pdf-bg: #ebebeb;
--c-pdf-ctrl: #d8d8d8;
--c-pdf-text: #333333;
}
/* ─── 5. Dark mode ─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--c-canvas: #0d0d0d;
--c-surface: #1a1a1a;
--c-overlay: #242424;
--c-muted: #252525;
--c-line: #2e2e2e;
--c-line-2: #222222;
--c-ink: #f0efe9;
--c-ink-2: #9ca3af;
--c-ink-3: #6b7280;
--c-accent: #00c7b1;
--c-accent-bg: rgba(0, 199, 177, 0.12);
--c-primary: #a1dcd8;
--c-primary-fg: #012851;
--c-nav-active: rgba(180, 185, 255, 0.12);
--c-pdf-bg: #1e1e1e;
--c-pdf-ctrl: #2a2a2a;
--c-pdf-text: #d1d1d1;
}
}
/* Manual dark override — takes precedence over media query */
:root[data-theme='dark'] {
--c-canvas: #0d0d0d;
--c-surface: #1a1a1a;
--c-overlay: #242424;
--c-muted: #252525;
--c-line: #2e2e2e;
--c-line-2: #222222;
--c-ink: #f0efe9;
--c-ink-2: #9ca3af;
--c-ink-3: #6b7280;
--c-accent: #00c7b1;
--c-accent-bg: rgba(0, 199, 177, 0.12);
--c-primary: #a1dcd8;
--c-primary-fg: #012851;
--c-nav-active: rgba(180, 185, 255, 0.12);
--c-pdf-bg: #1e1e1e;
--c-pdf-ctrl: #2a2a2a;
--c-pdf-text: #d1d1d1;
}
/* ─── 6. Base styles ───────────────────────────────────────────────────────── */
@layer base {
html {
overscroll-behavior: none;
}
body {
background-color: #ffffff;
color: var(--color-brand-navy);
background-color: var(--c-canvas);
color: var(--c-ink);
font-family: var(--font-serif);
}

2
frontend/src/routes/login/+page.svelte
View File

@@ -41,7 +41,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
</div>
<!-- Card -->
<div class="rounded-sm border border-brand-sand bg-white p-8 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-8 shadow-sm">
<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
{m.login_heading()}
</h1>

6
frontend/src/routes/persons/+page.svelte
View File

@@ -79,10 +79,10 @@ function handleSearch() {
{#if data.persons.length === 0}
<div
class="flex flex-col items-center justify-center rounded-lg border border-dashed border-brand-sand bg-white py-16 text-center"
class="border-brand-sand flex flex-col items-center justify-center rounded-lg border border-dashed bg-white py-16 text-center"
>
<div
class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30 text-brand-navy"
class="bg-brand-sand/30 mb-3 flex h-12 w-12 items-center justify-center rounded-full text-brand-navy"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg"
@@ -99,7 +99,7 @@ function handleSearch() {
{#each data.persons as person (person.id)}
<a href="/persons/{person.id}" class="group block h-full">
<div
class="relative flex h-full items-center gap-4 overflow-hidden rounded border border-brand-sand bg-white p-6 shadow-sm transition-all duration-200 hover:border-brand-navy hover:shadow-md"
class="border-brand-sand relative flex h-full items-center gap-4 overflow-hidden rounded border bg-white p-6 shadow-sm transition-all duration-200 hover:border-brand-navy hover:shadow-md"
>
<!-- Decorative Accent on Hover -->
<div

20
frontend/src/routes/persons/[id]/+page.svelte
View File

@@ -111,7 +111,7 @@ $effect(() => {
</div>
<!-- Header / Metadata Card -->
<div class="mb-10 overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
<div class="border-brand-sand mb-10 overflow-hidden rounded-sm border bg-white shadow-sm">
<div class="h-2 w-full bg-brand-navy"></div>
<div class="p-8 md:p-10">
@@ -247,7 +247,7 @@ $effect(() => {
<div class="flex flex-col items-start gap-8 md:flex-row">
<div class="flex-shrink-0">
<div
class="flex h-24 w-24 items-center justify-center rounded-full border border-brand-sand bg-brand-sand/30 text-brand-navy"
class="border-brand-sand bg-brand-sand/30 flex h-24 w-24 items-center justify-center rounded-full border text-brand-navy"
>
<span class="font-serif text-3xl">{person.firstName[0]}{person.lastName[0]}</span>
</div>
@@ -335,7 +335,7 @@ $effect(() => {
<!-- Merge Section -->
{#if data.canWrite}
{#key person.id}
<div class="mb-10 overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
<div class="border-brand-sand mb-10 overflow-hidden rounded-sm border bg-white shadow-sm">
<div class="p-6 md:p-8">
<h2 class="mb-1 font-serif text-lg text-brand-navy">{m.person_merge_heading()}</h2>
<p class="mb-5 font-sans text-sm text-gray-500">
@@ -413,7 +413,7 @@ $effect(() => {
{#each coCorrespondents as c (c.id)}
<a
href="/conversations?senderId={person.id}&receiverId={c.id}"
class="inline-flex items-center gap-1.5 rounded-full border border-brand-sand px-3 py-1 font-serif text-sm text-brand-navy transition-colors hover:border-brand-navy"
class="border-brand-sand inline-flex items-center gap-1.5 rounded-full border px-3 py-1 font-serif text-sm text-brand-navy transition-colors hover:border-brand-navy"
>
{c.name}
<span class="font-sans text-xs text-gray-400">({c.count})</span>
@@ -444,7 +444,7 @@ $effect(() => {
</div>
{#if sentDocuments.length === 0}
<div class="rounded-sm border border-dashed border-brand-sand bg-white p-12 text-center">
<div class="border-brand-sand rounded-sm border border-dashed bg-white p-12 text-center">
<p class="font-sans text-gray-500">{m.person_no_docs()}</p>
</div>
{:else}
@@ -453,12 +453,12 @@ $effect(() => {
<li class="group">
<a
href="/documents/{doc.id}"
class="block border border-brand-sand bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
class="border-brand-sand block border bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
>
<div class="flex items-center justify-between">
<div class="flex items-center gap-4 overflow-hidden">
<div
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-brand-sand/20 text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
class="bg-brand-sand/20 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
@@ -537,7 +537,7 @@ $effect(() => {
</div>
{#if receivedDocuments.length === 0}
<div class="rounded-sm border border-dashed border-brand-sand bg-white p-12 text-center">
<div class="border-brand-sand rounded-sm border border-dashed bg-white p-12 text-center">
<p class="font-sans text-gray-500">{m.person_no_received_docs()}</p>
</div>
{:else}
@@ -546,12 +546,12 @@ $effect(() => {
<li class="group">
<a
href="/documents/{doc.id}"
class="block border border-brand-sand bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
class="border-brand-sand block border bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
>
<div class="flex items-center justify-between">
<div class="flex items-center gap-4 overflow-hidden">
<div
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-brand-sand/20 text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
class="bg-brand-sand/20 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"

4
frontend/src/routes/persons/new/+page.svelte
View File

@@ -33,7 +33,7 @@ let { form } = $props();
{/if}
<form method="POST">
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.persons_section_details()}
</h2>
@@ -82,7 +82,7 @@ let { form } = $props();
<!-- Save Bar -->
<div
class="mt-4 flex items-center justify-between rounded-sm border border-brand-sand bg-white px-6 py-4 shadow-sm"
class="border-brand-sand mt-4 flex items-center justify-between rounded-sm border bg-white px-6 py-4 shadow-sm"
>
<a
href="/persons"

20
frontend/src/routes/profile/+page.svelte
View File

@@ -60,7 +60,7 @@ function handleBirthDateInput(e: Event) {
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<!-- Personal info card -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.profile_section_personal()}
</h2>
@@ -88,7 +88,7 @@ function handleBirthDateInput(e: Event) {
type="text"
name="firstName"
value={data.user?.firstName ?? ''}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -102,7 +102,7 @@ function handleBirthDateInput(e: Event) {
type="text"
name="lastName"
value={data.user?.lastName ?? ''}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -117,7 +117,7 @@ function handleBirthDateInput(e: Event) {
placeholder="TT.MM.JJJJ"
value={birthDateDisplay}
oninput={handleBirthDateInput}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
<input type="hidden" name="birthDate" value={birthDateIso} />
</label>
@@ -132,7 +132,7 @@ function handleBirthDateInput(e: Event) {
type="email"
name="email"
value={data.user?.email ?? ''}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -146,7 +146,7 @@ function handleBirthDateInput(e: Event) {
name="contact"
rows="3"
placeholder={m.profile_contact_placeholder()}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
>{data.user?.contact ?? ''}</textarea
>
</label>
@@ -162,7 +162,7 @@ function handleBirthDateInput(e: Event) {
</div>
<!-- Password change card -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.profile_section_password()}
</h2>
@@ -194,7 +194,7 @@ function handleBirthDateInput(e: Event) {
type="password"
name="currentPassword"
required
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -208,7 +208,7 @@ function handleBirthDateInput(e: Event) {
type="password"
name="newPassword"
required
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -222,7 +222,7 @@ function handleBirthDateInput(e: Event) {
type="password"
name="confirmPassword"
required
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
</div>

2
frontend/src/routes/reset-password/+page.svelte
View File

@@ -27,7 +27,7 @@ let {
</div>
<!-- Card -->
<div class="rounded-sm border border-brand-sand bg-white p-8 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-8 shadow-sm">
<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
{m.reset_password_heading()}
</h1>

2
frontend/src/routes/users/[id]/+page.svelte
View File

@@ -40,7 +40,7 @@ const initials = $derived.by(() => {
<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">{m.user_profile_heading()}</h1>
<div class="max-w-md">
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<!-- Avatar -->
<div class="mb-5 flex justify-center">
{#if initials}