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

fix(ui): semantic turquoise tokens, badge styling, saved fade animation

Browse Source 
- Add turquoise/turquoise-fg semantic color tokens to layout.css
  (light + dark mode), replacing all hardcoded #00C7B1 in components
- Bump Details toggle from text-xs to text-sm for visual hierarchy
- Block badge: navy → turquoise, overlapping top-left card border
  with absolute positioning to visually link PDF annotation badges
- Saved indicator: smooth 300ms opacity fade before removal
  (new 'fading' state in SaveState type)
- Transcribe buttons: use border-turquoise/bg-turquoise/text-turquoise-fg

Fixes @Leonie concerns: toggle visual weight, semantic tokens,
badge styling, saved fade animation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-05 20:26:41 +02:00
parent b21778b3d1
commit a3fbcf346b
4 changed files with 41 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/lib/components/TranscriptionBlock.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
type SaveState = 'idle' | 'saving' | 'saved' | 'error';
type SaveState = 'idle' | 'saving' | 'saved' | 'fading' | 'error';
type Props = {
blockId: string;
@@ -30,7 +30,7 @@ let {
}: Props = $props();
let leftBorderClass = $derived(
saveState === 'error' ? 'border-l-2 border-error' : active ? 'border-l-2 border-[#00C7B1]' : ''
saveState === 'error' ? 'border-l-2 border-error' : active ? 'border-l-2 border-turquoise' : ''
);
function autoresize(node: HTMLTextAreaElement) {
@@ -61,15 +61,19 @@ function handleDelete() {
}
</script>
<div class="overflow-hidden rounded border border-line {leftBorderClass}" data-block-id={blockId}>
<div class="p-4">
<div
class="relative overflow-visible rounded border border-line {leftBorderClass}"
data-block-id={blockId}
>
<!-- Turquoise numbered badge — overlaps top-left of card -->
<span
class="absolute -top-2 -left-2 z-10 flex h-6 w-6 items-center justify-center rounded-full bg-turquoise text-xs font-bold text-turquoise-fg shadow-sm"
>
{blockNumber}
</span>
<div class="p-4 pl-6">
<!-- Header -->
<div class="mb-2 flex items-center gap-2">
<span
class="flex h-6 w-6 items-center justify-center rounded-full bg-[#002850] text-xs font-bold text-white"
>
{blockNumber}
</span>
{#if label}
<span class="text-xs font-medium tracking-wide text-ink-2 uppercase">
{label}
@@ -96,8 +100,10 @@ function handleDelete() {
<span class="animate-pulse text-xs text-ink-3">
{m.transcription_block_save_saving()}
</span>
{:else if saveState === 'saved'}
<span class="text-xs text-green-600">
{:else if saveState === 'saved' || saveState === 'fading'}
<span
class="text-xs text-green-600 transition-opacity duration-300 {saveState === 'fading' ? 'opacity-0' : 'opacity-100'}"
>
{m.transcription_block_save_saved()} <span class="inline-block">&#10003;</span>
</span>
{:else if saveState === 'error'}