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:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user