From a682f814f7066bea3c8f4dd91f8f06cac1df7763 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Tue, 10 Mar 2026 16:18:07 -0700
Subject: [PATCH] Sidebar SVG icons, larger page header icons, and
 accent-colored nav

---
 webui/index.html       | 22 +++++++++++-----------
 webui/static/style.css | 35 ++++++++++++++++++-----------------
 2 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 9487bf65..40ec092c 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -92,47 +92,47 @@
             <!-- Navigation Section -->
             <nav class="sidebar-nav">
                 <button class="nav-button active" data-page="dashboard">
-                    <span class="nav-icon"><img src="/static/dashboard.png" class="nav-icon-img"></span>
+                    <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="4" rx="1"/><rect x="3" y="14" width="7" height="4" rx="1"/><rect x="14" y="11" width="7" height="7" rx="1"/><line x1="5" y1="20" x2="5" y2="22"/><line x1="8" y1="19" x2="8" y2="22"/></svg></span>
                     <span class="nav-text">Dashboard</span>
                 </button>
                 <button class="nav-button" data-page="sync">
-                    <span class="nav-icon"><img src="/static/sync.png" class="nav-icon-img"></span>
+                    <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg></span>
                     <span class="nav-text">Sync</span>
                 </button>
                 <button class="nav-button" data-page="downloads">
-                    <span class="nav-icon"><img src="/static/search.png" class="nav-icon-img"></span>
+                    <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><polyline points="8 11 11 14 14 11"/></svg></span>
                     <span class="nav-text">Search</span>
                 </button>
                 <button class="nav-button" data-page="discover">
-                    <span class="nav-icon"><img src="/static/discover.png" class="nav-icon-img"></span>
+                    <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" fill="currentColor" opacity="0.2" stroke="currentColor"/></svg></span>
                     <span class="nav-text">Discover</span>
                 </button>
                 <button class="nav-button" data-page="artists">
-                    <span class="nav-icon"><img src="/static/artists.png" class="nav-icon-img"></span>
+                    <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></span>
                     <span class="nav-text">Artists</span>
                 </button>
                 <button class="nav-button" data-page="automations">
-                    <span class="nav-icon"><img src="/static/automation.png" class="nav-icon-img"></span>
+                    <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></span>
                     <span class="nav-text">Automations</span>
                 </button>
                 <button class="nav-button" data-page="library">
-                    <span class="nav-icon"><img src="/static/library.png" class="nav-icon-img"></span>
+                    <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/><line x1="9" y1="7" x2="16" y2="7"/><line x1="9" y1="11" x2="14" y2="11"/></svg></span>
                     <span class="nav-text">Library</span>
                 </button>
                 <button class="nav-button" data-page="import">
-                    <span class="nav-icon"><img src="/static/import.png" class="nav-icon-img"></span>
+                    <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></span>
                     <span class="nav-text">Import</span>
                 </button>
                 <button class="nav-button" data-page="settings">
-                    <span class="nav-icon"><img src="/static/settings.png" class="nav-icon-img"></span>
+                    <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></span>
                     <span class="nav-text">Settings</span>
                 </button>
                 <button class="nav-button" data-page="help">
-                    <span class="nav-icon"><img src="/static/help.png" class="nav-icon-img" onerror="this.style.display='none'; this.parentElement.textContent='?';"></span>
+                    <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></span>
                     <span class="nav-text">Help & Docs</span>
                 </button>
                 <button class="nav-button" data-page="hydrabase" id="hydrabase-nav" style="display: none;">
-                    <span class="nav-icon"><img src="/static/hydrabase.png?v=1" class="nav-icon-img"></span>
+                    <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></span>
                     <span class="nav-text">Hydrabase</span>
                 </button>
             </nav>
diff --git a/webui/static/style.css b/webui/static/style.css
index cd8f131d..5c3636a8 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -325,12 +325,12 @@ body {
         inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 
-.nav-icon-img {
-    width: 38px;
-    height: 38px;
-    object-fit: contain;
+.nav-svg {
+    width: 22px;
+    height: 22px;
     pointer-events: none;
     transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    color: rgba(var(--accent-rgb), 0.7);
 }
 
 .nav-button:hover .nav-icon {
@@ -341,18 +341,19 @@ body {
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
+.nav-button:hover .nav-svg {
+    color: rgba(255, 255, 255, 0.95);
+}
+
 .nav-button.active .nav-icon {
-    width: 45px;
-    height: 45px;
-    background: transparent;
-    border: none;
-    box-shadow: none;
+    background: rgba(var(--accent-rgb), 0.12);
+    border: 1px solid rgba(var(--accent-rgb), 0.25);
+    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.15);
 }
 
-.nav-button.active .nav-icon-img {
-    width: 43px;
-    height: 43px;
-    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.5));
+.nav-button.active .nav-svg {
+    color: rgba(var(--accent-light-rgb, var(--accent-rgb)), 1);
+    filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.5));
 }
 
 .nav-text {
@@ -5229,8 +5230,8 @@ body {
 
 /* Page header icon — shown beside all page titles */
 .page-header-icon {
-    width: 88px;
-    height: 88px;
+    width: 176px;
+    height: 176px;
     object-fit: contain;
     flex-shrink: 0;
     filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb), 0.3));
@@ -5269,8 +5270,8 @@ body {
 
 @media (max-width: 768px) {
     .page-header-icon {
-        width: 56px;
-        height: 56px;
+        width: 100px;
+        height: 100px;
     }
 }