From dd5fe844d479e394ca4aa5449bad9da60887afaf Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Thu, 28 May 2026 23:48:23 -0700
Subject: [PATCH] UI consistency (buttons 2/N): wishlist modal buttons -> .btn

Migrate the wishlist add-to-wishlist modal buttons onto the shared .btn
primitive: primary -> .btn--primary, secondary -> .btn--secondary, the green
download CTA -> new .btn--download modifier. Added a shared .btn.loading state
(amber pulse, reusing the existing pulse-loading keyframe) since
confirm-add-to-wishlist-btn toggles `loading` via JS (wishlist-tools.js).

Removed the dead .wishlist-modal-btn* rules and re-scoped the mobile
full-width override to `.wishlist-modal-actions .btn`.
---
 webui/index.html       |  6 +--
 webui/static/style.css | 96 ++++++++++--------------------------------
 2 files changed, 26 insertions(+), 76 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 55be3e95..bae77d96 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -7290,15 +7290,15 @@
 
                 <div class="add-to-wishlist-modal-footer">
                     <div class="wishlist-modal-actions">
-                        <button class="wishlist-modal-btn wishlist-modal-btn-secondary"
+                        <button class="btn btn--secondary"
                             onclick="closeAddToWishlistModal()">
                             Close
                         </button>
-                        <button class="wishlist-modal-btn wishlist-modal-btn-download" id="wishlist-download-now-btn"
+                        <button class="btn btn--download" id="wishlist-download-now-btn"
                             onclick="handleWishlistDownloadNow()">
                             Download Now
                         </button>
-                        <button class="wishlist-modal-btn wishlist-modal-btn-primary" id="confirm-add-to-wishlist-btn">
+                        <button class="btn btn--primary" id="confirm-add-to-wishlist-btn">
                             Add to Wishlist
                         </button>
                     </div>
diff --git a/webui/static/style.css b/webui/static/style.css
index 9560a68c..8293d395 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -8047,6 +8047,26 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
 }
 
+/* Spotify-green download CTA (intentional brand color). */
+.btn--download {
+    background: linear-gradient(135deg, #1db954, #1ed760);
+    color: #fff;
+    border: 1px solid rgba(29, 185, 84, 0.3);
+}
+.btn--download:hover:not(:disabled) {
+    background: linear-gradient(135deg, #1ed760, #1db954);
+    transform: translateY(-1px);
+    box-shadow: 0 8px 24px rgba(29, 185, 84, 0.4);
+}
+
+/* Shared loading state (JS toggles `.loading`). */
+.btn.loading {
+    background: rgba(255, 193, 7, 0.9);
+    color: #000;
+    animation: pulse-loading 1.5s infinite;
+    cursor: not-allowed;
+}
+
 
 /* ── Shared page shell ──────────────────────────────────────────────
    The canonical page card (the dashboard / stats look). Adopted by the
@@ -28152,78 +28172,8 @@ div.artist-hero-badge {
     gap: 12px;
 }
 
-.wishlist-modal-btn {
-    padding: 12px 24px;
-    border: none;
-    border-radius: 12px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    min-width: 120px;
-}
-
-.wishlist-modal-btn-secondary {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.wishlist-modal-btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.2);
-    color: #ffffff;
-    border-color: rgba(255, 255, 255, 0.3);
-}
-
-.wishlist-modal-btn-download {
-    background: linear-gradient(135deg, #1db954, #1ed760);
-    color: #ffffff;
-    border: 1px solid rgba(29, 185, 84, 0.3);
-}
-
-.wishlist-modal-btn-download:hover {
-    background: linear-gradient(135deg, #1ed760, #1db954);
-    transform: translateY(-1px);
-    box-shadow: 0 8px 24px rgba(29, 185, 84, 0.4);
-}
-
-.wishlist-modal-btn-download:active {
-    transform: translateY(0);
-    box-shadow: 0 4px 12px rgba(29, 185, 84, 0.3);
-}
-
-.wishlist-modal-btn-primary {
-    background: linear-gradient(135deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-light-rgb)) 100%);
-    color: #ffffff;
-    border: 1px solid rgba(var(--accent-rgb), 0.3);
-}
-
-.wishlist-modal-btn-primary:hover {
-    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)) 0%, #22e167 100%);
-    transform: translateY(-1px);
-    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4);
-}
-
-.wishlist-modal-btn-primary:active {
-    transform: translateY(0);
-    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
-}
-
-/* Loading State */
-.wishlist-modal-btn-primary.loading {
-    background: rgba(255, 193, 7, 0.9);
-    color: #000000;
-    animation: pulse-loading 1.5s infinite;
-    cursor: not-allowed;
-}
-
-.wishlist-modal-btn-primary:disabled {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.4);
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
-}
+/* .wishlist-modal-btn* migrated to the shared .btn primitive
+   (.btn--primary / .btn--secondary / .btn--download / .btn.loading). */
 
 /* Animation for modal appearance */
 @keyframes wishlistModalFadeIn {
@@ -28310,7 +28260,7 @@ div.artist-hero-badge {
         gap: 12px;
     }
 
-    .wishlist-modal-btn {
+    .wishlist-modal-actions .btn {
         width: 100%;
     }
 }