danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

UI consistency (buttons 2/N): wishlist modal buttons -> .btn

Browse source 
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`.
This commit is contained in:
BoulderBadgeDad 2026-05-28 23:48:23 -07:00
parent eebc58d3ff
commit dd5fe844d4
2 changed files with 26 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
webui/index.html
View file

@ -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>

96
webui/static/style.css
View file

@ -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%;
}
}