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

fix(#240): make Mission Control Strip dark-mode compatible

Browse Source 
Replace all hardcoded Tailwind colours with semantic tokens:
- bg-white → bg-surface (outer strip container)
- text-gray-400 → text-ink-3 (dates, meta text, empty-state copy)
- text-green-800 / text-green-700 → text-ink / text-ink-2 (headings, pulse, reviewed %)
- bg-green-50 / border-green-200 → bg-accent-bg / border-line (skill pill, weekly pulse badge)
- bg-ink text-white → bg-primary text-primary-fg (CTA buttons; dark: mint bg + navy text)
- hover:text-white → hover:text-primary-fg (ghost CTA hover text)
- focus-visible:ring-brand-navy → focus-visible:ring-focus-ring (all doc links)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-16 10:31:20 +02:00
parent 48152517aa
commit 86a216918f
4 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,8 +31,8 @@ let { segmentationDocs, transcriptionDocs, readyDocs, weeklyStats }: Props = $pr
</script>
{#if segmentationDocs.length > 0 || transcriptionDocs.length > 0 || readyDocs.length > 0}
<section class="mt-4 rounded-sm border border-line bg-white p-6">
<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
<section class="mt-4 rounded-sm border border-line bg-surface p-6">
<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
{m.mission_control_heading()}
</h2>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">

16
frontend/src/lib/components/ReadyColumn.svelte
View File

@@ -39,16 +39,16 @@ function reviewedPct(doc: TranscriptionQueueItemDTO): number {
>
<div>
<div class="mb-1 flex items-center gap-2">
<h3 class="font-sans text-xs font-bold tracking-widest text-green-800 uppercase">
<h3 class="font-sans text-xs font-bold tracking-widest text-ink uppercase">
{m.mission_control_ready_heading()}
</h3>
{#if weeklyCount > 0}
<span class="rounded-full bg-green-50 px-2 py-0.5 text-xs font-semibold text-green-700">
<span class="rounded-full bg-accent-bg px-2 py-0.5 text-xs font-semibold text-ink-2">
{m.mission_control_weekly_pulse({ count: weeklyCount })}
</span>
{/if}
</div>
<p class="text-xs font-semibold text-green-800">
<p class="text-xs font-semibold text-ink-2">
{m.mission_control_ready_subtitle({ count: docs.length })}
</p>
</div>
@@ -57,15 +57,15 @@ function reviewedPct(doc: TranscriptionQueueItemDTO): number {
<li>
<a
href="/documents/{doc.id}"
class="flex min-h-[44px] flex-col justify-center rounded px-1 py-2 hover:bg-brand-mint/20 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
class="flex min-h-[44px] flex-col justify-center rounded px-1 py-2 hover:bg-brand-mint/20 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none"
>
<span class="font-serif text-sm text-ink">{doc.title}</span>
<div class="mt-0.5 flex items-center gap-2">
{#if doc.documentDate}
<span class="text-xs text-gray-400">{formatDate(doc.documentDate)}</span>
<span class="text-xs text-ink-3">{formatDate(doc.documentDate)}</span>
{/if}
{#if doc.textedBlockCount > 0}
<span class="text-xs font-semibold text-green-800">
<span class="text-xs font-semibold text-ink">
{m.mission_control_reviewed_pct({ pct: reviewedPct(doc) })}
</span>
{/if}
@@ -79,10 +79,10 @@ function reviewedPct(doc: TranscriptionQueueItemDTO): number {
<div
class="flex min-h-[120px] flex-col items-center justify-center rounded-sm border border-dashed border-brand-mint bg-brand-mint/5 p-6 text-center"
>
<p class="text-xs text-gray-400">{m.mission_control_ready_empty()}</p>
<p class="text-xs text-ink-3">{m.mission_control_ready_empty()}</p>
<a
href="/enrich?filter=NEEDS_SEGMENTATION&next=1"
class="mt-2 inline-flex items-center rounded-sm border border-ink px-3 py-2 text-xs font-semibold text-ink transition-colors hover:bg-ink hover:text-white focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
class="mt-2 inline-flex items-center rounded-sm border border-ink px-3 py-2 text-xs font-semibold text-ink transition-colors hover:bg-ink hover:text-primary-fg focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none"
>
{m.mission_control_ready_empty_cta()}
</a>

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

@@ -36,12 +36,12 @@ function formatDate(dateStr: string): string {
{m.mission_control_segmentation_heading()}
</h3>
<span
class="inline-flex items-center gap-1 rounded-full border border-green-200 bg-green-50 px-2 py-0.5 text-xs font-semibold text-green-800"
class="inline-flex items-center gap-1 rounded-full border border-line bg-accent-bg px-2 py-0.5 text-xs font-semibold text-ink"
>
{m.mission_control_seg_skill_pill()}
</span>
{#if weeklyCount > 0}
<p class="mt-1 text-xs font-semibold text-green-700">
<p class="mt-1 text-xs font-semibold text-ink-2">
{m.mission_control_weekly_pulse({ count: weeklyCount })}
</p>
{/if}
@@ -51,7 +51,7 @@ function formatDate(dateStr: string): string {
<li>
<a
href="/documents/{doc.id}"
class="hover:bg-brand-sand flex min-h-[44px] flex-col justify-center rounded px-1 py-2 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
class="flex min-h-[44px] flex-col justify-center rounded px-1 py-2 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none"
>
<div class="flex flex-wrap items-center gap-1.5">
<span class="font-serif text-sm text-ink">{doc.title}</span>
@@ -60,7 +60,7 @@ function formatDate(dateStr: string): string {
{/if}
</div>
{#if doc.documentDate}
<span class="mt-0.5 text-xs text-gray-400">{formatDate(doc.documentDate)}</span>
<span class="mt-0.5 text-xs text-ink-3">{formatDate(doc.documentDate)}</span>
{/if}
</a>
</li>
@@ -68,7 +68,7 @@ function formatDate(dateStr: string): string {
</ul>
<a
href="/enrich?filter=NEEDS_SEGMENTATION&next=1"
class="mt-auto block w-full rounded-sm bg-ink py-2 text-center text-xs font-semibold text-white transition-colors hover:bg-ink-2 focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-1 focus-visible:outline-none"
class="mt-auto block w-full rounded-sm bg-primary py-2 text-center text-xs font-semibold text-primary-fg transition-colors hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-1 focus-visible:outline-none"
>
{m.mission_control_segmentation_cta()}
</a>

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

@@ -56,7 +56,7 @@ function blockProgress(doc: TranscriptionQueueItemDTO): number {
<li>
<a
href="/documents/{doc.id}"
class="hover:bg-brand-sand flex min-h-[44px] flex-col justify-center rounded px-1 py-2 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
class="flex min-h-[44px] flex-col justify-center rounded px-1 py-2 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none"
>
<div class="flex flex-wrap items-center gap-1.5">
<span class="font-serif text-sm text-ink">{doc.title}</span>
@@ -65,11 +65,11 @@ function blockProgress(doc: TranscriptionQueueItemDTO): number {
{/if}
</div>
{#if doc.documentDate}
<span class="mt-0.5 text-xs text-gray-400">{formatDate(doc.documentDate)}</span>
<span class="mt-0.5 text-xs text-ink-3">{formatDate(doc.documentDate)}</span>
{/if}
{#if doc.textedBlockCount > 0}
<div class="mt-1.5 flex items-center gap-2">
<span class="shrink-0 text-xs text-gray-400">
<span class="shrink-0 text-xs text-ink-3">
{m.mission_control_blocks_progress({
texted: doc.textedBlockCount,
total: doc.annotationCount
@@ -83,7 +83,7 @@ function blockProgress(doc: TranscriptionQueueItemDTO): number {
</div>
</div>
{:else}
<span class="mt-0.5 text-xs text-gray-400 italic">—</span>
<span class="mt-0.5 text-xs text-ink-3 italic">—</span>
{/if}
</a>
</li>
@@ -91,7 +91,7 @@ function blockProgress(doc: TranscriptionQueueItemDTO): number {
</ul>
<a
href="/enrich?filter=NEEDS_TRANSCRIPTION&next=1"
class="mt-auto block w-full rounded-sm bg-ink py-2 text-center text-xs font-semibold text-white transition-colors hover:bg-ink-2 focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-1 focus-visible:outline-none"
class="mt-auto block w-full rounded-sm bg-primary py-2 text-center text-xs font-semibold text-primary-fg transition-colors hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-1 focus-visible:outline-none"
>
{m.mission_control_transcription_cta()}
</a>