From eb1d6872efc6ff74715b54c28dcc4f98bef5f89a Mon Sep 17 00:00:00 2001
From: Joseph Doherty <dohejw01@gmail.com>
Date: Tue, 12 May 2026 03:57:45 -0400
Subject: [PATCH] refactor(ui/shared): migrate sidebar CSS to Bootstrap
 variables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces hardcoded sidebar / nav-link hex colors with Bootstrap CSS
custom properties (var(--bs-dark), var(--bs-primary), var(--bs-gray-*),
var(--bs-white)). Visual parity preserved; rebrand/dark-mode work
later can override the variables without touching this file.

Only the reconnect overlay rgba(0,0,0,0.5) is left as a literal —
Bootstrap doesn't ship a backdrop-overlay token.
---
 src/ScadaLink.CentralUI/wwwroot/css/site.css | 22 ++++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/ScadaLink.CentralUI/wwwroot/css/site.css b/src/ScadaLink.CentralUI/wwwroot/css/site.css
index 9e89e6f..a61a98e 100644
--- a/src/ScadaLink.CentralUI/wwwroot/css/site.css
+++ b/src/ScadaLink.CentralUI/wwwroot/css/site.css
@@ -5,30 +5,30 @@
     min-width: 220px;
     max-width: 220px;
     min-height: 100vh;
-    background-color: #212529;
+    background-color: var(--bs-dark);
 }
 
 .sidebar .nav-link {
-    color: #adb5bd;
+    color: var(--bs-gray-500);
     padding: 0.4rem 1rem;
     font-size: 0.9rem;
 }
 
 .sidebar .nav-link:hover {
-    color: #fff;
-    background-color: #343a40;
+    color: var(--bs-white);
+    background-color: var(--bs-gray-700);
 }
 
 .sidebar .nav-link.active {
-    color: #fff;
-    background-color: #0d6efd;
+    color: var(--bs-white);
+    background-color: var(--bs-primary);
     /* Left accent so active state isn't carried by color alone. */
-    border-left: 3px solid #0d6efd;
+    border-left: 3px solid var(--bs-primary);
     padding-left: calc(1rem - 3px);
 }
 
 .sidebar .nav-section-header {
-    color: #6c757d;
+    color: var(--bs-gray-600);
     font-size: 0.75rem;
     font-weight: 600;
     text-transform: uppercase;
@@ -38,11 +38,11 @@
 }
 
 .sidebar .brand {
-    color: #fff;
+    color: var(--bs-white);
     font-size: 1.1rem;
     font-weight: 600;
     padding: 1rem;
-    border-bottom: 1px solid #343a40;
+    border-bottom: 1px solid var(--bs-gray-700);
 }
 
 /* When the sidebar is collapsed under <lg viewports the Bootstrap collapse
@@ -70,6 +70,6 @@
     max-width: 400px;
     padding: 2rem;
     text-align: center;
-    background: #fff;
+    background: var(--bs-white);
     border-radius: 0.5rem;
 }