From 905201f239c0245263e45c412b7cf81f6cfe6f0c Mon Sep 17 00:00:00 2001
From: Kagamine Rin <rin.kagamine@captcouch.xyz>
Date: Fri, 29 May 2026 21:36:20 -0400
Subject: [PATCH] fix: Establish clear button color hierarchy in Gallery
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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).
---
 frontend/src/components/Gallery.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Gallery.tsx b/frontend/src/components/Gallery.tsx
index 809c3cf..a2de56f 100644
--- a/frontend/src/components/Gallery.tsx
+++ b/frontend/src/components/Gallery.tsx
@@ -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">