core-lead/molecule-core
1
0
Fork 0
forked from molecule-ai/molecule-core
Code Pull Requests Activity

canvas/MemoryTab: fix 9 hover bugs (4 light + 4 no-op + Delete no-op)

Browse Source 
Three matched fixes — same patterns shipped on OnboardingWizard,
ConfirmDialog, ApprovalBanner.

1. 4× bg-accent-strong hover:bg-accent (Save, Add, two Show buttons)
   hovered LIGHTER on white text — accent is the lighter variant, so
   contrast dropped below AA on hover. Flipped: bg-accent
   hover:bg-accent-strong.

2. 4× bg-surface-card hover:bg-surface-card no-op hovers (Collapse,
   Open, Hide-Advanced, Refresh, Cancel). Lift to surface-elevated
   so the buttons visibly respond.

3. Delete row button: text-bad hover:text-bad was a no-op. Switched
   to a light hover bg + focus-visible danger ring so the destructive
   action visibly responds and keyboard users see focus.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hongming Wang 2026-05-03 21:06:17 -07:00
parent 43e0f69dc8
commit 7a30af5af0
1 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
canvas/src/components/tabs/MemoryTab.tsx
View File

@ -137,14 +137,14 @@ export function MemoryTab({ workspaceId }: Props) {
<button
type="button"
onClick={() => setShowAwareness((prev) => !prev)}
className="shrink-0 px-2 py-1 bg-surface-card hover:bg-surface-card text-[10px] rounded text-ink"
className="shrink-0 px-2 py-1 bg-surface-card hover:bg-surface-elevated text-[10px] rounded text-ink"
>
{showAwareness ? "Collapse" : "Expand"}
</button>
<button
type="button"
onClick={openAwareness}
className="shrink-0 px-2 py-1 bg-surface-card hover:bg-surface-card text-[10px] rounded text-ink"
className="shrink-0 px-2 py-1 bg-surface-card hover:bg-surface-elevated text-[10px] rounded text-ink"
>
Open
</button>
@ -177,7 +177,7 @@ export function MemoryTab({ workspaceId }: Props) {
<button
type="button"
onClick={() => setShowAwareness(true)}
className="shrink-0 px-2 py-1 bg-accent-strong hover:bg-accent text-[10px] rounded text-white"
className="shrink-0 px-2 py-1 bg-accent hover:bg-accent-strong text-[10px] rounded text-white"
>
Expand
</button>
@ -212,21 +212,21 @@ export function MemoryTab({ workspaceId }: Props) {
<button
type="button"
onClick={() => setShowAdvanced((prev) => !prev)}
className="px-2 py-1 bg-surface-card hover:bg-surface-card text-[10px] rounded text-ink-mid"
className="px-2 py-1 bg-surface-card hover:bg-surface-elevated text-[10px] rounded text-ink-mid"
>
{showAdvanced ? "Hide Advanced" : "Advanced"}
</button>
<button
type="button"
onClick={loadMemory}
className="px-2 py-1 bg-surface-card hover:bg-surface-card text-[10px] rounded text-ink-mid"
className="px-2 py-1 bg-surface-card hover:bg-surface-elevated text-[10px] rounded text-ink-mid"
>
Refresh
</button>
<button
type="button"
onClick={() => { setShowAdd(!showAdd); if (!showAdd) setShowAdvanced(true); }}
className="px-2 py-1 bg-accent-strong hover:bg-accent text-[10px] rounded text-white"
className="px-2 py-1 bg-accent hover:bg-accent-strong text-[10px] rounded text-white"
>
+ Add
</button>
@ -262,7 +262,7 @@ export function MemoryTab({ workspaceId }: Props) {
<button
type="button"
onClick={handleAdd}
className="px-3 py-1 bg-accent-strong hover:bg-accent text-xs rounded text-white"
className="px-3 py-1 bg-accent hover:bg-accent-strong text-xs rounded text-white"
>
Save
</button>
@ -272,7 +272,7 @@ export function MemoryTab({ workspaceId }: Props) {
setShowAdd(false);
setError(null);
}}
className="px-3 py-1 bg-surface-card hover:bg-surface-card text-xs rounded text-ink-mid"
className="px-3 py-1 bg-surface-card hover:bg-surface-elevated text-xs rounded text-ink-mid"
>
Cancel
</button>
@ -318,7 +318,11 @@ export function MemoryTab({ workspaceId }: Props) {
<button
type="button"
onClick={() => handleDelete(entry.key)}
className="text-[10px] text-bad hover:text-bad"
// hover:text-bad on top of text-bad was a no-op.
// Switch to a hover bg + focus-visible ring so
// the destructive button visibly responds and
// keyboard users see focus.
className="text-[10px] text-bad hover:bg-red-950/40 rounded px-1 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60"
>
Delete
</button>
@ -340,7 +344,7 @@ export function MemoryTab({ workspaceId }: Props) {
<button
type="button"
onClick={() => setShowAdvanced(true)}
className="shrink-0 px-2 py-1 bg-accent-strong hover:bg-accent text-[10px] rounded text-white"
className="shrink-0 px-2 py-1 bg-accent hover:bg-accent-strong text-[10px] rounded text-white"
>
Show
</button>