fix: Establish clear button color hierarchy in Gallery
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:
1 parent
119b75fbcd
commit
905201f239
1 file changed
+5
-5
@@ -283,7 +283,7 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
|
|||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={(e) => { e.stopPropagation(); startRename(clip) }}
|
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"
|
title="Rename clip"
|
||||||
>
|
>
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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)
|
setUploadingId(clip.id)
|
||||||
setTimeout(() => artworkInputRef.current?.click(), 0)
|
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"
|
title="Upload album art"
|
||||||
>
|
>
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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">
|
<div className="flex items-center gap-1 mt-2 pt-1.5 border-t border-white/5">
|
||||||
<button
|
<button
|
||||||
onClick={(e) => { e.stopPropagation(); startRename(clip) }}
|
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"
|
title="Rename"
|
||||||
>
|
>
|
||||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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()
|
e.stopPropagation()
|
||||||
window.open(`/api/clips/${clip.id}/download`, '_blank')
|
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"
|
title="Download MP3"
|
||||||
>
|
>
|
||||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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>
|
||||||
<button
|
<button
|
||||||
onClick={(e) => { e.stopPropagation(); onDelete(clip.id) }}
|
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"
|
title="Delete"
|
||||||
>
|
>
|
||||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
|||||||
Reference in new issue
Block a user