Public/kithara-studio
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Establish clear button color hierarchy in Gallery

Browse Source 
Button color tiers (all views):
- Tier 1 (Primary actions): Download, Delete — text-lyria-muted base,
  hover to accent/red. Always visible.
- Tier 2 (Secondary actions): Rename, Artwork upload — text-lyria-muted/60
  base, hover to white. Subtler but still discoverable.

Previously all buttons were text-lyria-muted/40 (barely visible) or mixed
inconsistently. Now there's a clear visual hierarchy:
  Primary > Secondary > Background elements

Applies to both ribbon view (w-4 h-4 icons) and tile view (w-3 h-3 icons).
This commit is contained in:
rin.kagamine committed 2026-05-29 21:36:20 -04:00
1 parent 119b75fbcd
commit 905201f239
1 file changed
+5 -5
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Gallery.tsx
+5 -5
View File
@@ -283,7 +283,7 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
<button
onClick={(e) => { e.stopPropagation(); startRename(clip) }}
className="text-lyria-muted/40 hover:text-lyria-accent transition-colors shrink-0"
className="text-lyria-muted/60 hover:text-white transition-colors shrink-0"
title="Rename clip"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -296,7 +296,7 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
setUploadingId(clip.id)
setTimeout(() => artworkInputRef.current?.click(), 0)
}}
className="text-lyria-muted/40 hover:text-lyria-accent transition-colors shrink-0"
className="text-lyria-muted/60 hover:text-white transition-colors shrink-0"
title="Upload album art"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -454,7 +454,7 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
<div className="flex items-center gap-1 mt-2 pt-1.5 border-t border-white/5">
<button
onClick={(e) => { e.stopPropagation(); startRename(clip) }}
className="text-lyria-muted/40 hover:text-lyria-accent transition-colors text-xs"
className="text-lyria-muted/60 hover:text-white transition-colors text-xs"
title="Rename"
>
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -466,7 +466,7 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
e.stopPropagation()
window.open(`/api/clips/${clip.id}/download`, '_blank')
}}
className="text-lyria-muted/40 hover:text-lyria-accent transition-colors text-xs"
className="text-lyria-muted hover:text-lyria-accent transition-colors text-xs"
title="Download MP3"
>
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -475,7 +475,7 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
</button>
<button
onClick={(e) => { e.stopPropagation(); onDelete(clip.id) }}
className="text-lyria-muted/40 hover:text-red-400 transition-colors text-xs"
className="text-lyria-muted hover:text-red-400 transition-colors text-xs"
title="Delete"
>
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">