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

UI: add .btn--sm/.btn--block/.btn--warning tier; migrate sync-history buttons

Browse source 
Formalize the compact 'toolbar' button tier as design-system modifiers
(.btn--sm), plus a full-width (.btn--block) and amber caution
(.btn--warning) modifier, so the many smaller per-page buttons can share
the .btn primitive without being forced to the large default size.

First adopter: the Sync page header buttons (.sync-history-btn) now use
.btn .btn--sm .btn--secondary. The class is kept as a JS/onboarding
selector hook; .auto-sync-manager-btn still tints Auto-Sync accent.
This commit is contained in:
BoulderBadgeDad 2026-05-29 11:30:13 -07:00
parent ae0968e1b0
commit 169c30fd5b
2 changed files with 30 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
webui/index.html
View file

@ -986,9 +986,9 @@
server</p>
</div>
<div style="display:flex;gap:8px;align-items:center;">
<button class="sync-history-btn auto-sync-manager-btn" onclick="openAutoSyncScheduleModal()" title="Schedule mirrored playlists to refresh, discover, sync, and queue missing tracks">Auto-Sync</button>
<button class="sync-history-btn" onclick="openManualLibraryMatchTool()" title="Manually link source tracks to library tracks">Library Match</button>
<button class="sync-history-btn" onclick="openSyncHistoryModal()" title="View sync history">Sync History</button>
<button class="btn btn--sm btn--secondary sync-history-btn auto-sync-manager-btn" onclick="openAutoSyncScheduleModal()" title="Schedule mirrored playlists to refresh, discover, sync, and queue missing tracks">Auto-Sync</button>
<button class="btn btn--sm btn--secondary sync-history-btn" onclick="openManualLibraryMatchTool()" title="Manually link source tracks to library tracks">Library Match</button>
<button class="btn btn--sm btn--secondary sync-history-btn" onclick="openSyncHistoryModal()" title="View sync history">Sync History</button>
</div>
</div>
</div>

33
webui/static/style.css
View file

@ -8059,6 +8059,30 @@ body.helper-mode-active #dashboard-activity-feed:hover {
box-shadow: 0 8px 24px rgba(29, 185, 84, 0.4);
}
/* Amber "caution" color (e.g. bulk fix-all). */
.btn--warning {
background: rgba(245, 158, 11, 0.12);
color: #fbbf24;
border: 1px solid rgba(245, 158, 11, 0.3);
}
.btn--warning:hover:not(:disabled) {
background: rgba(245, 158, 11, 0.22);
border-color: rgba(245, 158, 11, 0.45);
}
/* Compact toolbar size — the second button tier used in headers, bulk-action
rows and toolbars (smaller than the default large action button). Combine
with a color modifier, e.g. `.btn .btn--sm .btn--secondary`. */
.btn--sm {
padding: 6px 14px;
font-size: 12px;
border-radius: 8px;
gap: 6px;
}
/* Full-width (form submit buttons, etc.). */
.btn--block { width: 100%; }
/* Shared loading state (JS toggles `.loading`). */
.btn.loading {
background: rgba(255, 193, 7, 0.9);
@ -11298,12 +11322,9 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.sync-history-page-btn:hover:not(:disabled) { color: rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), 0.1); }
.sync-history-page-btn:disabled { opacity: 0.3; cursor: default; }
.sync-history-page-info { font-size: 12px; color: rgba(255, 255, 255, 0.35); }
.sync-history-btn {
font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px; padding: 5px 12px; cursor: pointer; transition: all 0.2s ease;
}
.sync-history-btn:hover { color: rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.3); }
/* .sync-history-btn styling migrated to .btn .btn--sm .btn--secondary.
The class is kept on the markup as a JS/onboarding selector hook, and
.auto-sync-manager-btn still tints the Auto-Sync button accent. */
.auto-sync-manager-btn {
color: rgb(var(--accent-light-rgb));