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

fix(components): replace remaining unthemed gray classes with semantic tokens

Browse Source 
Replace text-gray-*, bg-gray-*, border-gray-*, divide-gray-*, placeholder-gray-*,
focus:border-blue-*, focus:ring-blue-*, hover:bg-blue-*, and ring-brand-mint with
their semantic-token equivalents (text-ink, bg-muted, border-line, etc.) across
all pages and shared components so dark mode renders correctly everywhere.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-25 12:37:46 +01:00
parent e4539ed0f0
commit 162c58e8c5
19 changed files with 98 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -230,7 +230,7 @@ onMount(() => {
</span> </span>
{/if} {/if}
</div> </div>
<p class="mt-1 font-serif text-sm leading-relaxed text-gray-700">{thread.content}</p> <p class="mt-1 font-serif text-sm leading-relaxed text-ink-2">{thread.content}</p>
</div> </div>
{#if canModify(thread)} {#if canModify(thread)}
<div class="flex shrink-0 items-center gap-2"> <div class="flex shrink-0 items-center gap-2">
@@ -302,7 +302,7 @@ onMount(() => {
</span> </span>
{/if} {/if}
</div> </div>
<p class="mt-1 font-serif text-sm leading-relaxed text-gray-700">{reply.content}</p> <p class="mt-1 font-serif text-sm leading-relaxed text-ink-2">{reply.content}</p>
</div> </div>
{#if canModify(reply)} {#if canModify(reply)}
<div class="flex shrink-0 items-center gap-2"> <div class="flex shrink-0 items-center gap-2">

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

@@ -137,7 +137,7 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
onpointerup={onDragEnd} onpointerup={onDragEnd}
onpointercancel={onDragEnd} onpointercancel={onDragEnd}
> >
<div class="h-1 w-12 rounded-full bg-gray-200"></div> <div class="h-1 w-12 rounded-full bg-line"></div>
</div> </div>
<!-- Tab bar --> <!-- Tab bar -->

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

@@ -165,7 +165,7 @@ let { doc }: { doc: Doc } = $props();
> >
<a href="/persons/{receiver.id}" class="flex min-w-0 flex-1 items-center gap-3"> <a href="/persons/{receiver.id}" class="flex min-w-0 flex-1 items-center gap-3">
<div <div
class="flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 font-serif text-xs text-ink-2" class="flex h-6 w-6 items-center justify-center rounded-full bg-muted font-serif text-xs text-ink-2"
> >
{receiver.firstName[0]}{receiver.lastName[0]} {receiver.firstName[0]}{receiver.lastName[0]}
</div> </div>

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

@@ -80,7 +80,7 @@ function clickOutside(node: HTMLElement) {
<div class="relative" use:clickOutside> <div class="relative" use:clickOutside>
<div <div
class="flex min-h-[42px] flex-wrap gap-2 rounded border border-gray-300 bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink" class="flex min-h-[42px] flex-wrap gap-2 rounded border border-line bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"
> >
{#each selectedPersons as person (person.id)} {#each selectedPersons as person (person.id)}
<span <span
@@ -128,7 +128,7 @@ function clickOutside(node: HTMLElement) {
{:else} {:else}
{#each results as person (person.id)} {#each results as person (person.id)}
<div <div
class="cursor-pointer py-2 pr-9 pl-3 text-gray-900 select-none hover:bg-muted" class="cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-muted"
onclick={() => selectPerson(person)} onclick={() => selectPerson(person)}
onkeydown={(e) => e.key === 'Enter' && selectPerson(person)} onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
role="button" role="button"

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

@@ -111,7 +111,7 @@ function clickOutside(node: HTMLElement) {
</script> </script>
<div class="relative" use:clickOutside> <div class="relative" use:clickOutside>
<label for={name} class="block text-sm font-medium text-gray-700">{label}</label> <label for={name} class="block text-sm font-medium text-ink-2">{label}</label>
<input type="hidden" name={name} bind:value={value} /> <input type="hidden" name={name} bind:value={value} />
@@ -123,7 +123,7 @@ function clickOutside(node: HTMLElement) {
oninput={handleInput} oninput={handleInput}
onfocus={handleFocus} onfocus={handleFocus}
placeholder={m.comp_typeahead_placeholder()} placeholder={m.comp_typeahead_placeholder()}
class="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-blue-500 focus:ring-blue-500" class="mt-1 block w-full rounded-md border border-line p-2 shadow-sm focus:border-accent focus:ring-accent"
/> />
{#if showDropdown && (results.length > 0 || loading)} {#if showDropdown && (results.length > 0 || loading)}
@@ -135,7 +135,7 @@ function clickOutside(node: HTMLElement) {
{:else} {:else}
{#each results as person (person.id)} {#each results as person (person.id)}
<div <div
class="relative cursor-pointer py-2 pr-9 pl-3 text-gray-900 select-none hover:bg-blue-100" class="relative cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-accent-bg"
onclick={() => selectPerson(person)} onclick={() => selectPerson(person)}
onkeydown={(e) => e.key === 'Enter' && selectPerson(person)} onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
role="button" role="button"

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

@@ -85,7 +85,7 @@ function clickOutside(node: HTMLElement) {
<div class="w-full" use:clickOutside> <div class="w-full" use:clickOutside>
<!-- Tag Container --> <!-- Tag Container -->
<div <div
class="flex min-h-[42px] flex-wrap gap-2 rounded border border-gray-300 bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink" class="flex min-h-[42px] flex-wrap gap-2 rounded border border-line bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"
> >
<!-- Render Selected Tags --> <!-- Render Selected Tags -->
{#each tags as tag, i (i)} {#each tags as tag, i (i)}
@@ -137,7 +137,7 @@ function clickOutside(node: HTMLElement) {
tabindex="0" tabindex="0"
class="cursor-pointer px-3 py-2 text-sm hover:bg-muted {i === activeIndex class="cursor-pointer px-3 py-2 text-sm hover:bg-muted {i === activeIndex
? 'bg-muted font-bold text-ink' ? 'bg-muted font-bold text-ink'
: 'text-gray-700'}" : 'text-ink-2'}"
onclick={() => addTag(suggestion)} onclick={() => addTag(suggestion)}
onkeydown={(e) => e.key === 'Enter' && addTag(suggestion)} onkeydown={(e) => e.key === 'Enter' && addTag(suggestion)}
> >

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

@@ -90,7 +90,7 @@ $effect(() => {
onfocus={() => (qFocused = true)} onfocus={() => (qFocused = true)}
onblur={() => (qFocused = false)} onblur={() => (qFocused = false)}
placeholder={m.docs_search_placeholder()} placeholder={m.docs_search_placeholder()}
class="block w-full border-gray-300 py-2.5 pr-10 pl-3 placeholder-gray-400 shadow-sm focus:border-ink focus:ring-ink" class="block w-full border-line py-2.5 pr-10 pl-3 placeholder-ink-3 shadow-sm focus:border-ink focus:ring-ink"
/> />
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"> <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<img <img
@@ -105,7 +105,7 @@ $effect(() => {
<!-- Toggle Advanced Button --> <!-- Toggle Advanced Button -->
<button <button
onclick={() => (showAdvanced = !showAdvanced)} onclick={() => (showAdvanced = !showAdvanced)}
class="flex items-center gap-2 border border-gray-300 bg-gray-50 px-4 py-2.5 text-sm font-bold tracking-wide text-ink-2 uppercase transition hover:bg-gray-100 hover:text-ink" class="flex items-center gap-2 border border-line bg-muted px-4 py-2.5 text-sm font-bold tracking-wide text-ink-2 uppercase transition hover:bg-muted hover:text-ink"
> >
<img <img
src="/degruyter-icons/Simple/Small-16px/SVG/Action/Chevron/Chevron-Down-SM.svg" src="/degruyter-icons/Simple/Small-16px/SVG/Action/Chevron/Chevron-Down-SM.svg"
@@ -148,7 +148,7 @@ $effect(() => {
<!-- Sender --> <!-- Sender -->
<div class="md:col-span-3"> <div class="md:col-span-3">
<div <div
class="[&_input]:border-gray-300 [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase" class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
> >
<PersonTypeahead <PersonTypeahead
name="senderId" name="senderId"
@@ -163,7 +163,7 @@ $effect(() => {
<!-- Receiver --> <!-- Receiver -->
<div class="md:col-span-3"> <div class="md:col-span-3">
<div <div
class="[&_input]:border-gray-300 [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase" class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
> >
<PersonTypeahead <PersonTypeahead
name="receiverId" name="receiverId"
@@ -188,7 +188,7 @@ $effect(() => {
id="from" id="from"
bind:value={from} bind:value={from}
onchange={triggerSearch} onchange={triggerSearch}
class="block w-full border-gray-300 py-2.5 text-sm shadow-sm" class="block w-full border-line py-2.5 text-sm shadow-sm"
/> />
</div> </div>
<div> <div>
@@ -202,7 +202,7 @@ $effect(() => {
id="to" id="to"
bind:value={to} bind:value={to}
onchange={triggerSearch} onchange={triggerSearch}
class="block w-full border-gray-300 py-2.5 text-sm shadow-sm" class="block w-full border-line py-2.5 text-sm shadow-sm"
/> />
</div> </div>
</div> </div>
@@ -284,9 +284,7 @@ $effect(() => {
>{m.docs_list_from()}</span >{m.docs_list_from()}</span
> >
{#if doc.sender} {#if doc.sender}
<span class="text-gray-900" <span class="text-ink">{doc.sender.firstName} {doc.sender.lastName}</span>
>{doc.sender.firstName} {doc.sender.lastName}</span
>
{:else} {:else}
<span class="text-ink-3 italic">{m.docs_list_unknown()}</span> <span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
{/if} {/if}
@@ -297,7 +295,7 @@ $effect(() => {
>{m.docs_list_to()}</span >{m.docs_list_to()}</span
> >
{#if doc.receivers && doc.receivers.length > 0} {#if doc.receivers && doc.receivers.length > 0}
<span class="text-gray-900"> <span class="text-ink">
{doc.receivers.map((p) => p.firstName + ' ' + p.lastName).join(', ')} {doc.receivers.map((p) => p.firstName + ' ' + p.lastName).join(', ')}
</span> </span>
{:else} {:else}

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

@@ -109,7 +109,7 @@ async function backfillFileHashes() {
{#if activeTab === 'users'} {#if activeTab === 'users'}
<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide> <div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide>
<div class="flex items-center justify-between border-b border-line-2 p-6"> <div class="flex items-center justify-between border-b border-line-2 p-6">
<h2 class="text-lg font-bold text-gray-700">{m.admin_section_users()}</h2> <h2 class="text-lg font-bold text-ink-2">{m.admin_section_users()}</h2>
<a <a
href="/admin/users/new" href="/admin/users/new"
class="inline-flex items-center gap-1 rounded-sm bg-primary px-4 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80" class="inline-flex items-center gap-1 rounded-sm bg-primary px-4 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
@@ -126,8 +126,8 @@ async function backfillFileHashes() {
</a> </a>
</div> </div>
<table class="min-w-full divide-y divide-gray-200"> <table class="min-w-full divide-y divide-line">
<thead class="bg-gray-50"> <thead class="bg-muted">
<tr> <tr>
<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase" <th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
>{m.admin_col_login()}</th >{m.admin_col_login()}</th
@@ -143,10 +143,10 @@ async function backfillFileHashes() {
> >
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-200 bg-surface"> <tbody class="divide-y divide-line bg-surface">
{#each data.users as user (user.id)} {#each data.users as user (user.id)}
<tr class="group/row hover:bg-gray-50"> <tr class="group/row hover:bg-muted">
<td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900"> <td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-ink">
{user.username} {user.username}
</td> </td>
<td class="px-6 py-4 text-sm whitespace-nowrap text-ink-2"> <td class="px-6 py-4 text-sm whitespace-nowrap text-ink-2">
@@ -218,15 +218,15 @@ async function backfillFileHashes() {
{:else if activeTab === 'tags'} {:else if activeTab === 'tags'}
<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide> <div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide>
<div class="border-b border-line-2 bg-yellow-50/50 p-6"> <div class="border-b border-line-2 bg-yellow-50/50 p-6">
<h2 class="text-lg font-bold text-gray-700">{m.admin_section_tags()}</h2> <h2 class="text-lg font-bold text-ink-2">{m.admin_section_tags()}</h2>
<p class="mt-1 text-xs text-yellow-800"> <p class="mt-1 text-xs text-yellow-800">
{m.admin_tags_warning()} {m.admin_tags_warning()}
</p> </p>
</div> </div>
<ul class="max-h-[600px] divide-y divide-gray-100 overflow-y-auto"> <ul class="max-h-[600px] divide-y divide-line-2 overflow-y-auto">
{#each data.tags as tag (tag.id)} {#each data.tags as tag (tag.id)}
<li class="group flex items-center justify-between px-6 py-3 hover:bg-gray-50"> <li class="group flex items-center justify-between px-6 py-3 hover:bg-muted">
{#if editingTagId === tag.id} {#if editingTagId === tag.id}
<form <form
method="POST" method="POST"
@@ -243,7 +243,7 @@ async function backfillFileHashes() {
type="text" type="text"
name="name" name="name"
bind:value={editingTagName} bind:value={editingTagName}
class="flex-1 rounded border-accent px-2 py-1 text-sm ring-1 ring-brand-mint" class="flex-1 rounded border-accent px-2 py-1 text-sm ring-1 ring-accent"
/> />
<button aria-label={m.btn_save()} class="text-green-600 hover:text-green-800" <button aria-label={m.btn_save()} class="text-green-600 hover:text-green-800"
><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" ><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
@@ -330,11 +330,11 @@ async function backfillFileHashes() {
{:else if activeTab === 'groups'} {:else if activeTab === 'groups'}
<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide> <div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide>
<div class="flex items-center justify-between border-b border-line-2 p-6"> <div class="flex items-center justify-between border-b border-line-2 p-6">
<h2 class="text-lg font-bold text-gray-700">{m.admin_section_groups()}</h2> <h2 class="text-lg font-bold text-ink-2">{m.admin_section_groups()}</h2>
</div> </div>
<table class="min-w-full divide-y divide-gray-200"> <table class="min-w-full divide-y divide-line">
<thead class="bg-gray-50"> <thead class="bg-muted">
<tr> <tr>
<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase" <th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
>{m.admin_col_name()}</th >{m.admin_col_name()}</th
@@ -347,9 +347,9 @@ async function backfillFileHashes() {
> >
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-200 bg-surface"> <tbody class="divide-y divide-line bg-surface">
{#each data.groups as group (group.id)} {#each data.groups as group (group.id)}
<tr class="group/row hover:bg-gray-50"> <tr class="group/row hover:bg-muted">
{#if editingGroupId === group.id} {#if editingGroupId === group.id}
<!-- EDIT MODE --> <!-- EDIT MODE -->
<td colspan="3" class="px-6 py-4"> <td colspan="3" class="px-6 py-4">
@@ -385,7 +385,7 @@ async function backfillFileHashes() {
name="permissions" name="permissions"
value={perm} value={perm}
checked={group.permissions.includes(perm)} checked={group.permissions.includes(perm)}
class="mr-2 rounded border-gray-300 text-ink focus:ring-accent" class="mr-2 rounded border-line text-ink focus:ring-accent"
/> />
{perm.replace('_', ' ')} {perm.replace('_', ' ')}
</label> </label>
@@ -437,7 +437,7 @@ async function backfillFileHashes() {
class="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase class="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase
{perm === 'ADMIN' {perm === 'ADMIN'
? 'border-red-100 bg-red-50 text-red-700' ? 'border-red-100 bg-red-50 text-red-700'
: 'border-line bg-gray-100 text-ink-2'}" : 'border-line bg-muted text-ink-2'}"
> >
{perm} {perm}
</span> </span>
@@ -489,7 +489,7 @@ async function backfillFileHashes() {
</table> </table>
<!-- CREATE GROUP FORM --> <!-- CREATE GROUP FORM -->
<div class="border-t border-line bg-gray-50 p-6"> <div class="border-t border-line bg-muted p-6">
<h3 class="mb-4 text-xs font-bold tracking-wide text-ink-2 uppercase"> <h3 class="mb-4 text-xs font-bold tracking-wide text-ink-2 uppercase">
{m.admin_section_new_group()} {m.admin_section_new_group()}
</h3> </h3>
@@ -505,7 +505,7 @@ async function backfillFileHashes() {
name="name" name="name"
placeholder={m.admin_group_name_placeholder()} placeholder={m.admin_group_name_placeholder()}
required required
class="w-full rounded border-gray-300 text-sm" class="w-full rounded border-line text-sm"
/> />
</div> </div>
@@ -516,7 +516,7 @@ async function backfillFileHashes() {
type="checkbox" type="checkbox"
name="permissions" name="permissions"
value={perm} value={perm}
class="mr-2 rounded border-gray-300 text-ink focus:ring-accent" class="mr-2 rounded border-line text-ink focus:ring-accent"
/> />
{perm.replace('_', ' ')} {perm.replace('_', ' ')}
</label> </label>
@@ -534,7 +534,7 @@ async function backfillFileHashes() {
</div> </div>
{:else if activeTab === 'system'} {:else if activeTab === 'system'}
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm"> <div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
<h2 class="mb-1 text-lg font-bold text-gray-700">{m.admin_system_backfill_heading()}</h2> <h2 class="mb-1 text-lg font-bold text-ink-2">{m.admin_system_backfill_heading()}</h2>
<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_description()}</p> <p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_description()}</p>
<button <button
onclick={backfillVersions} onclick={backfillVersions}
@@ -551,7 +551,7 @@ async function backfillFileHashes() {
</div> </div>
<div class="mt-4 rounded-sm border border-line bg-surface p-6 shadow-sm"> <div class="mt-4 rounded-sm border border-line bg-surface p-6 shadow-sm">
<h2 class="mb-1 text-lg font-bold text-gray-700"> <h2 class="mb-1 text-lg font-bold text-ink-2">
{m.admin_system_backfill_hashes_heading()} {m.admin_system_backfill_hashes_heading()}
</h2> </h2>
<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_hashes_description()}</p> <p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_hashes_description()}</p>

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

@@ -157,13 +157,13 @@ function handleBirthDateInput(e: Event) {
<div class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-3">
{#each data.groups as group (group.id)} {#each data.groups as group (group.id)}
<label class="inline-flex items-center gap-2 text-sm text-gray-700"> <label class="inline-flex items-center gap-2 text-sm text-ink-2">
<input <input
type="checkbox" type="checkbox"
name="groupIds" name="groupIds"
value={group.id} value={group.id}
checked={data.editUser.groups?.some((g: { id: string }) => g.id === group.id)} checked={data.editUser.groups?.some((g: { id: string }) => g.id === group.id)}
class="rounded border-gray-300 text-ink focus:ring-accent" class="rounded border-line text-ink focus:ring-accent"
/> />
{group.name} {group.name}
</label> </label>

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

@@ -156,12 +156,12 @@ function handleBirthDateInput(e: Event) {
<div class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-3">
{#each data.groups as group (group.id)} {#each data.groups as group (group.id)}
<label class="inline-flex items-center gap-2 text-sm text-gray-700"> <label class="inline-flex items-center gap-2 text-sm text-ink-2">
<input <input
type="checkbox" type="checkbox"
name="groupIds" name="groupIds"
value={group.id} value={group.id}
class="rounded border-gray-300 text-ink focus:ring-accent" class="rounded border-line text-ink focus:ring-accent"
/> />
{group.name} {group.name}
</label> </label>

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

@@ -79,7 +79,7 @@ const enrichedDocuments = $derived(
<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6"> <div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
<!-- Sender --> <!-- Sender -->
<div <div
class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase" class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
> >
<PersonTypeahead <PersonTypeahead
name="senderId" name="senderId"
@@ -123,7 +123,7 @@ const enrichedDocuments = $derived(
<!-- Receiver --> <!-- Receiver -->
<div <div
class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase" class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
> >
<PersonTypeahead <PersonTypeahead
name="receiverId" name="receiverId"
@@ -149,7 +149,7 @@ const enrichedDocuments = $derived(
type="date" type="date"
bind:value={fromDate} bind:value={fromDate}
onchange={() => applyFilters()} onchange={() => applyFilters()}
class="block w-full border-gray-300 py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink" class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
/> />
</div> </div>
@@ -165,7 +165,7 @@ const enrichedDocuments = $derived(
type="date" type="date"
bind:value={toDate} bind:value={toDate}
onchange={() => applyFilters()} onchange={() => applyFilters()}
class="block w-full border-gray-300 py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink" class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
/> />
</div> </div>

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

@@ -73,7 +73,7 @@ function handleDateInput(e: Event) {
<div class="grid grid-cols-1 gap-5 md:grid-cols-2"> <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
<!-- Datum --> <!-- Datum -->
<div> <div>
<label for="documentDate" class="mb-1 block text-sm font-medium text-gray-700" <label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_date()}</label >{m.form_label_date()}</label
> >
<input <input
@@ -84,7 +84,7 @@ function handleDateInput(e: Event) {
oninput={handleDateInput} oninput={handleDateInput}
placeholder={m.form_placeholder_date()} placeholder={m.form_placeholder_date()}
maxlength="10" maxlength="10"
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm class="block w-full rounded border border-line p-2 text-sm shadow-sm
{dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}" {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}"
aria-describedby={dateInvalid ? 'date-error' : undefined} aria-describedby={dateInvalid ? 'date-error' : undefined}
/> />
@@ -96,7 +96,7 @@ function handleDateInput(e: Event) {
<!-- Ort --> <!-- Ort -->
<div> <div>
<label for="location" class="mb-1 block text-sm font-medium text-gray-700" <label for="location" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_location()}</label >{m.form_label_location()}</label
> >
<input <input
@@ -105,7 +105,7 @@ function handleDateInput(e: Event) {
name="location" name="location"
value={doc.location || ''} value={doc.location || ''}
placeholder={m.form_placeholder_location()} placeholder={m.form_placeholder_location()}
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink" class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/> />
</div> </div>
@@ -121,7 +121,7 @@ function handleDateInput(e: Event) {
<!-- Empfänger --> <!-- Empfänger -->
<div> <div>
<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_receivers()}</p> <p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_receivers()}</p>
<PersonMultiSelect bind:selectedPersons={selectedReceivers} /> <PersonMultiSelect bind:selectedPersons={selectedReceivers} />
</div> </div>
</div> </div>
@@ -136,7 +136,7 @@ function handleDateInput(e: Event) {
<div class="space-y-5"> <div class="space-y-5">
<!-- Titel --> <!-- Titel -->
<div> <div>
<label for="title" class="mb-1 block text-sm font-medium text-gray-700" <label for="title" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_title()} *</label >{m.form_label_title()} *</label
> >
<input <input
@@ -145,13 +145,13 @@ function handleDateInput(e: Event) {
name="title" name="title"
value={doc.title || ''} value={doc.title || ''}
required required
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink" class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/> />
</div> </div>
<!-- Aufbewahrungsort --> <!-- Aufbewahrungsort -->
<div> <div>
<label for="documentLocation" class="mb-1 block text-sm font-medium text-gray-700" <label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_archive_location()}</label >{m.form_label_archive_location()}</label
> >
<input <input
@@ -160,21 +160,21 @@ function handleDateInput(e: Event) {
name="documentLocation" name="documentLocation"
value={doc.documentLocation || ''} value={doc.documentLocation || ''}
placeholder={m.form_placeholder_archive_location()} placeholder={m.form_placeholder_archive_location()}
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink" class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/> />
<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p> <p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
</div> </div>
<!-- Schlagworte --> <!-- Schlagworte -->
<div> <div>
<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_tags()}</p> <p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
<TagInput bind:tags={tags} /> <TagInput bind:tags={tags} />
<input type="hidden" name="tags" value={tags.join(',')} /> <input type="hidden" name="tags" value={tags.join(',')} />
</div> </div>
<!-- Inhalt --> <!-- Inhalt -->
<div> <div>
<label for="summary" class="mb-1 block text-sm font-medium text-gray-700" <label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_content()}</label >{m.form_label_content()}</label
> >
<textarea <textarea
@@ -182,7 +182,7 @@ function handleDateInput(e: Event) {
name="summary" name="summary"
rows="5" rows="5"
placeholder={m.form_placeholder_content()} placeholder={m.form_placeholder_content()}
class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink" class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
>{doc.summary || ''}</textarea >{doc.summary || ''}</textarea
> >
</div> </div>
@@ -199,7 +199,7 @@ function handleDateInput(e: Event) {
name="transcription" name="transcription"
rows="12" rows="12"
placeholder={m.form_placeholder_transcription()} placeholder={m.form_placeholder_transcription()}
class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink" class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
>{doc.transcription || ''}</textarea >{doc.transcription || ''}</textarea
> >
</div> </div>
@@ -223,7 +223,7 @@ function handleDateInput(e: Event) {
> >
</div> </div>
<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700"> <label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
{m.doc_file_replace_label()} {m.doc_file_replace_label()}
<span class="font-normal text-ink-3">({m.doc_file_replace_note()})</span> <span class="font-normal text-ink-3">({m.doc_file_replace_note()})</span>
</label> </label>

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

@@ -84,7 +84,7 @@ function handleDateInput(e: Event) {
<div class="grid grid-cols-1 gap-5 md:grid-cols-2"> <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
<!-- Datum --> <!-- Datum -->
<div> <div>
<label for="documentDate" class="mb-1 block text-sm font-medium text-gray-700" <label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_date()}</label >{m.form_label_date()}</label
> >
<input <input
@@ -95,7 +95,7 @@ function handleDateInput(e: Event) {
oninput={handleDateInput} oninput={handleDateInput}
placeholder={m.form_placeholder_date()} placeholder={m.form_placeholder_date()}
maxlength="10" maxlength="10"
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm class="block w-full rounded border border-line p-2 text-sm shadow-sm
{dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}" {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}"
aria-describedby={dateInvalid ? 'date-error' : undefined} aria-describedby={dateInvalid ? 'date-error' : undefined}
/> />
@@ -109,7 +109,7 @@ function handleDateInput(e: Event) {
<!-- Ort --> <!-- Ort -->
<div> <div>
<label for="location" class="mb-1 block text-sm font-medium text-gray-700" <label for="location" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_location()}</label >{m.form_label_location()}</label
> >
<input <input
@@ -117,7 +117,7 @@ function handleDateInput(e: Event) {
type="text" type="text"
name="location" name="location"
placeholder={m.form_placeholder_location()} placeholder={m.form_placeholder_location()}
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink" class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/> />
</div> </div>
@@ -133,7 +133,7 @@ function handleDateInput(e: Event) {
<!-- Empfänger --> <!-- Empfänger -->
<div> <div>
<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_receivers()}</p> <p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_receivers()}</p>
<PersonMultiSelect bind:selectedPersons={selectedReceivers} /> <PersonMultiSelect bind:selectedPersons={selectedReceivers} />
</div> </div>
</div> </div>
@@ -148,7 +148,7 @@ function handleDateInput(e: Event) {
<div class="space-y-5"> <div class="space-y-5">
<!-- Titel --> <!-- Titel -->
<div> <div>
<label for="title" class="mb-1 block text-sm font-medium text-gray-700" <label for="title" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_title()} *</label >{m.form_label_title()} *</label
> >
<input <input
@@ -156,13 +156,13 @@ function handleDateInput(e: Event) {
type="text" type="text"
name="title" name="title"
required required
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink" class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/> />
</div> </div>
<!-- Aufbewahrungsort --> <!-- Aufbewahrungsort -->
<div> <div>
<label for="documentLocation" class="mb-1 block text-sm font-medium text-gray-700" <label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_archive_location()}</label >{m.form_label_archive_location()}</label
> >
<input <input
@@ -170,21 +170,21 @@ function handleDateInput(e: Event) {
type="text" type="text"
name="documentLocation" name="documentLocation"
placeholder={m.form_placeholder_archive_location()} placeholder={m.form_placeholder_archive_location()}
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink" class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/> />
<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p> <p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
</div> </div>
<!-- Schlagworte --> <!-- Schlagworte -->
<div> <div>
<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_tags()}</p> <p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
<TagInput bind:tags={tags} /> <TagInput bind:tags={tags} />
<input type="hidden" name="tags" value={tags.join(',')} /> <input type="hidden" name="tags" value={tags.join(',')} />
</div> </div>
<!-- Inhalt --> <!-- Inhalt -->
<div> <div>
<label for="summary" class="mb-1 block text-sm font-medium text-gray-700" <label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_content()}</label >{m.form_label_content()}</label
> >
<textarea <textarea
@@ -192,7 +192,7 @@ function handleDateInput(e: Event) {
name="summary" name="summary"
rows="5" rows="5"
placeholder={m.form_placeholder_content()} placeholder={m.form_placeholder_content()}
class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink" class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
></textarea> ></textarea>
</div> </div>
</div> </div>
@@ -208,7 +208,7 @@ function handleDateInput(e: Event) {
name="transcription" name="transcription"
rows="12" rows="12"
placeholder={m.form_placeholder_transcription()} placeholder={m.form_placeholder_transcription()}
class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink" class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
></textarea> ></textarea>
</div> </div>
@@ -218,7 +218,7 @@ function handleDateInput(e: Event) {
{m.doc_section_file()} {m.doc_section_file()}
</h2> </h2>
<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700"> <label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
{m.doc_file_upload_label()} {m.doc_file_upload_label()}
<span class="font-normal text-ink-3">({m.doc_file_upload_note()})</span> <span class="font-normal text-ink-3">({m.doc_file_upload_note()})</span>
</label> </label>

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

@@ -47,7 +47,7 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
id="email" id="email"
required required
autocomplete="email" autocomplete="email"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none" class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
/> />
</div> </div>

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

@@ -59,7 +59,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
id="username" id="username"
required required
autocomplete="username" autocomplete="username"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none" class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
/> />
</div> </div>
@@ -75,7 +75,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
id="password" id="password"
required required
autocomplete="current-password" autocomplete="current-password"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none" class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
/> />
</div> </div>

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

@@ -61,7 +61,7 @@ function handleSearch() {
oninput={handleSearch} oninput={handleSearch}
onfocus={() => (qFocused = true)} onfocus={() => (qFocused = true)}
onblur={() => (qFocused = false)} onblur={() => (qFocused = false)}
class="block w-full rounded-sm border border-gray-300 bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-gray-400 shadow-sm focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none" class="block w-full rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
/> />
<div <div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-3" class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-3"

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

@@ -142,7 +142,7 @@ $effect(() => {
type="text" type="text"
required required
value={person.firstName} value={person.firstName}
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none" class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
/> />
</div> </div>
<div> <div>
@@ -157,7 +157,7 @@ $effect(() => {
type="text" type="text"
required required
value={person.lastName} value={person.lastName}
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none" class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
/> />
</div> </div>
<div class="md:col-span-2"> <div class="md:col-span-2">
@@ -171,7 +171,7 @@ $effect(() => {
name="alias" name="alias"
type="text" type="text"
value={person.alias ?? ''} value={person.alias ?? ''}
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none" class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
/> />
</div> </div>
<div> <div>
@@ -188,7 +188,7 @@ $effect(() => {
max="2100" max="2100"
placeholder={m.person_placeholder_year()} placeholder={m.person_placeholder_year()}
value={person.birthYear ?? ''} value={person.birthYear ?? ''}
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none" class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
/> />
</div> </div>
<div> <div>
@@ -205,7 +205,7 @@ $effect(() => {
max="2100" max="2100"
placeholder={m.person_placeholder_year()} placeholder={m.person_placeholder_year()}
value={person.deathYear ?? ''} value={person.deathYear ?? ''}
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none" class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
/> />
</div> </div>
<div class="md:col-span-2"> <div class="md:col-span-2">
@@ -219,7 +219,7 @@ $effect(() => {
name="notes" name="notes"
rows="4" rows="4"
placeholder={m.person_placeholder_notes()} placeholder={m.person_placeholder_notes()}
class="block w-full resize-y rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none" class="block w-full resize-y rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
>{person.notes ?? ''}</textarea >{person.notes ?? ''}</textarea
> >
</div> </div>
@@ -235,7 +235,7 @@ $effect(() => {
<button <button
type="button" type="button"
onclick={() => (editMode = false)} onclick={() => (editMode = false)}
class="rounded border border-gray-300 px-5 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-gray-50" class="rounded border border-line px-5 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
> >
{m.btn_cancel()} {m.btn_cancel()}
</button> </button>
@@ -263,7 +263,7 @@ $effect(() => {
{#if data.canWrite} {#if data.canWrite}
<button <button
onclick={() => (editMode = true)} onclick={() => (editMode = true)}
class="inline-flex items-center gap-1.5 rounded border border-gray-300 px-3 py-1.5 text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:border-primary hover:text-ink" class="inline-flex items-center gap-1.5 rounded border border-line px-3 py-1.5 text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:border-primary hover:text-ink"
> >
<img <img
src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg" src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg"
@@ -379,7 +379,7 @@ $effect(() => {
<button <button
type="button" type="button"
onclick={() => (showMergeConfirm = false)} onclick={() => (showMergeConfirm = false)}
class="rounded border border-gray-300 px-4 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-gray-50" class="rounded border border-line px-4 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
> >
{m.btn_cancel()} {m.btn_cancel()}
</button> </button>

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

@@ -40,7 +40,7 @@ let { form } = $props();
<div class="grid grid-cols-1 gap-5 md:grid-cols-2"> <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
<div> <div>
<label for="firstName" class="mb-1 block text-sm font-medium text-gray-700" <label for="firstName" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_first_name()} *</label >{m.form_label_first_name()} *</label
> >
<input <input
@@ -48,12 +48,12 @@ let { form } = $props();
name="firstName" name="firstName"
type="text" type="text"
required required
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink" class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/> />
</div> </div>
<div> <div>
<label for="lastName" class="mb-1 block text-sm font-medium text-gray-700" <label for="lastName" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_last_name()} *</label >{m.form_label_last_name()} *</label
> >
<input <input
@@ -61,12 +61,12 @@ let { form } = $props();
name="lastName" name="lastName"
type="text" type="text"
required required
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink" class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/> />
</div> </div>
<div class="md:col-span-2"> <div class="md:col-span-2">
<label for="alias" class="mb-1 block text-sm font-medium text-gray-700" <label for="alias" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_alias()}</label >{m.form_label_alias()}</label
> >
<input <input
@@ -74,7 +74,7 @@ let { form } = $props();
name="alias" name="alias"
type="text" type="text"
placeholder={m.form_placeholder_alias()} placeholder={m.form_placeholder_alias()}
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink" class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/> />
</div> </div>
</div> </div>

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

@@ -56,7 +56,7 @@ let {
id="newPassword" id="newPassword"
required required
autocomplete="new-password" autocomplete="new-password"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none" class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
/> />
</div> </div>
@@ -72,7 +72,7 @@ let {
id="confirmPassword" id="confirmPassword"
required required
autocomplete="new-password" autocomplete="new-password"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none" class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
/> />
</div> </div>