fix(ui): promote modal overlay to token, lift modal above grain, dedupe FilesPage drop-zone

- Add --color-overlay-dim token to app.css @theme (rgba(15,14,12,0.7) dark, rgba(26,24,22,0.55) light); mirror as --overlay-dim in design-system/colors_and_type.css.
- MorningTriageModal: replace inlined rgba scrim with var(--color-overlay-dim), drop backdrop-blur-sm (brand opposes glassmorphism by default), bump container to z-[60] so it sits above the .grain z-50 overlay.
- FilesPage: collapse two near-identical drop-zone blocks into one bordered region with conditional inner content; preserves isDragOver hover behaviour and aria region.
This commit is contained in:
2026-05-07 10:04:30 +01:00
parent 13af425dfa
commit 5e3a9f9f42
4 changed files with 34 additions and 32 deletions

View File

@@ -155,43 +155,31 @@
<!-- Drop zone -->
<div class="px-7 pb-3">
<Card>
{#if !fileTranscript && !transcribing}
<div
class="flex flex-col items-center justify-center py-10 px-6 rounded-xl border-2 border-dashed m-3
{isDragOver
? 'border-accent bg-accent-subtle scale-[1.01]'
: 'border-border hover:border-text-tertiary'}"
style="transition-duration: var(--duration-ui)"
role="region"
>
<div
class="flex flex-col items-center justify-center py-10 px-6 rounded-xl border-2 border-dashed m-3
{isDragOver
? 'border-accent bg-accent-subtle scale-[1.01]'
: 'border-border hover:border-text-tertiary'}"
style="transition-duration: var(--duration-ui)"
role="region"
>
{#if !fileTranscript && !transcribing}
<EmptyState
icon={Upload}
message="Drop an audio file or click to browse"
/>
<p class="text-[11px] text-text-tertiary text-center mt-1.5">
MP3, WAV, M4A, MP4, FLAC, OGG
</p>
</div>
{:else}
<div
class="flex flex-col items-center justify-center py-10 px-6 rounded-xl border-2 border-dashed m-3
{isDragOver
? 'border-accent bg-accent-subtle scale-[1.01]'
: 'border-border hover:border-text-tertiary'}"
style="transition-duration: var(--duration-ui)"
role="region"
>
{:else}
<div class="w-10 h-10 rounded-full bg-bg-elevated flex items-center justify-center mb-3">
<Upload size={20} class="text-text-tertiary" aria-hidden="true" />
</div>
<p class="text-[13px] text-text-secondary text-center">
Drop audio or video files here
</p>
<p class="text-[11px] text-text-tertiary text-center mt-1.5">
MP3, WAV, M4A, MP4, FLAC, OGG
</p>
</div>
{/if}
{/if}
<p class="text-[11px] text-text-tertiary text-center mt-1.5">
MP3, WAV, M4A, MP4, FLAC, OGG
</p>
</div>
</Card>
</div>