molecule-ai/molecule-core
41
0
Fork 2
Code Issues 103 Pull Requests 142 Actions 29 Packages Projects Releases Wiki Activity

canvas/BundleDropZone: theme-flip drag overlay + announce import + reduced-motion

Browse Source 
Three small UIUX fixes for the bundle drag-import surface.

1. Drag overlay was hardcoded blue-950/blue-400 — those tones don't
   exist in the warm-paper light theme, so the overlay washed out
   inconsistently. Switched to bg-accent/15 + border-accent/40 so
   the overlay flips with theme and matches the inner card's
   border-accent/50.

2. Importing spinner was visually obvious but invisible to screen
   readers — only the result toast had aria-live. Operators relying
   on AT had no way to know the import was in flight. Added
   role="status" + aria-live="polite" + aria-hidden on the spinner
   itself so the SR hears "Importing bundle..." once.

3. animate-spin → motion-safe:animate-spin so the spinner respects
   prefers-reduced-motion (Tailwind's built-in variant gates the
   animation on the user's OS setting). Layout doesn't change in
   either case — text alone communicates state.

Also dropped border-sky-400 → border-accent on the spinner so it
matches the rest of the canvas semantics.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hongming Wang 2026-05-03 17:26:15 -07:00
parent 4cd01a2df1
commit ec54942628
1 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
canvas/src/components/BundleDropZone.tsx
View File

@ -117,9 +117,11 @@ export function BundleDropZone() {
📦 Import bundle
</button>
{/* Visual overlay when dragging */}
{/* Visual overlay when dragging — was hardcoded blue-950/blue-400
which doesn't flip with theme. accent colors stay visually
consistent with the rest of the canvas in both modes. */}
{isDragging && (
<div className="fixed inset-0 z-20 flex items-center justify-center bg-blue-950/40 backdrop-blur-sm border-2 border-dashed border-blue-400/50 pointer-events-none">
<div className="fixed inset-0 z-20 flex items-center justify-center bg-accent/15 backdrop-blur-sm border-2 border-dashed border-accent/40 pointer-events-none">
<div className="bg-surface-sunken/95 border border-accent/50 rounded-2xl px-8 py-6 shadow-2xl text-center">
<div className="text-3xl mb-2" aria-hidden="true">📦</div>
<div className="text-sm font-semibold text-ink">Drop Bundle to Import</div>
@ -128,10 +130,21 @@ export function BundleDropZone() {
</div>
)}
{/* Importing spinner */}
{/* Importing indicator — role=status + aria-live so SR users hear
"Importing bundle..." while the API call is in flight, not just
the result toast that fires after. motion-safe:animate-spin
respects prefers-reduced-motion (Tailwind's motion-safe variant
gates animation on the user's OS setting). */}
{importing && (
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-surface-sunken/95 border border-line/60 rounded-xl px-5 py-3 shadow-2xl flex items-center gap-3">
<div className="w-4 h-4 border-2 border-sky-400 border-t-transparent rounded-full animate-spin" />
<div
role="status"
aria-live="polite"
className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-surface-sunken/95 border border-line/60 rounded-xl px-5 py-3 shadow-2xl flex items-center gap-3"
>
<div
aria-hidden="true"
className="w-4 h-4 border-2 border-accent border-t-transparent rounded-full motion-safe:animate-spin"
/>
<span className="text-sm text-ink">Importing bundle...</span>
</div>
)}