chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: tag badges and buttons using bg-accent with unreadable text

Browse Source 
bg-accent (#f97316 orange) with text-muted-foreground (#848b9b gray)
is nearly invisible. Replaced with bg-elevated + border pattern for
readable contrast across TagBadges, StepForm, StepDetailModal, and
StepLibraryBrowser. Also fixed emerald → success-dim token.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-30 02:04:16 +00:00
parent 0484a1cb12
commit d67af71b4c
4 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/common/TagBadges.tsx
View File

@@ -34,11 +34,11 @@ export function TagBadges({
}}
disabled={!onTagClick}
className={cn(
'rounded-full font-sans text-xs transition-colors',
'rounded-full font-sans transition-colors',
size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
variant === 'default'
? 'bg-accent text-muted-foreground hover:bg-accent'
: 'bg-accent/50 text-muted-foreground hover:bg-accent',
? 'bg-[var(--color-bg-elevated)] text-muted-foreground border border-border hover:text-foreground hover:border-[var(--color-border-hover)]'
: 'bg-[rgba(255,255,255,0.04)] text-muted-foreground border border-border hover:text-foreground',
!onTagClick && 'cursor-default'
)}
>
@@ -48,9 +48,9 @@ export function TagBadges({
{hiddenCount > 0 && (
<span
className={cn(
'rounded-full font-sans text-xs',
'rounded-full font-sans',
size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
'bg-accent/50 text-muted-foreground'
'bg-[rgba(255,255,255,0.04)] text-muted-foreground border border-border'
)}
title={tags.slice(maxVisible).join(', ')}
>

4
frontend/src/components/step-library/StepDetailModal.tsx
View File

@@ -208,8 +208,8 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
className={cn(
'flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors',
copiedCommandIndex === index
? 'bg-emerald-400/10 text-emerald-400'
: 'bg-accent text-muted-foreground hover:bg-accent hover:text-foreground'
? 'bg-success-dim text-success'
: 'border border-border bg-[var(--color-bg-elevated)] text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)]'
)}
>
{copiedCommandIndex === index ? (

4
frontend/src/components/step-library/StepForm.tsx
View File

@@ -224,7 +224,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
<button
type="button"
onClick={addCommand}
className="flex items-center gap-1 rounded-md bg-accent px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
className="flex items-center gap-1 rounded-md border border-border bg-[var(--color-bg-elevated)] px-2 py-1 text-xs font-medium text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)]"
>
<Plus className="h-3 w-3" />
Add Command
@@ -304,7 +304,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
<button
type="button"
onClick={addTag}
className="rounded-md bg-accent px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
className="rounded-md border border-border bg-[var(--color-bg-elevated)] px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)]"
>
Add
</button>

2
frontend/src/components/step-library/StepLibraryBrowser.tsx
View File

@@ -226,7 +226,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
'rounded-full px-2.5 py-1 text-xs transition-colors',
selectedTag === tag.tag
? 'bg-primary text-white'
: 'bg-accent text-muted-foreground hover:bg-accent'
: 'border border-border bg-[var(--color-bg-elevated)] text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)]'
)}
>
{tag.tag} ({tag.count})