From 89fa76fae89eca75218d95ff7c200260fd622b66 Mon Sep 17 00:00:00 2001
From: Min RK <benjaminrk@gmail.com>
Date: Wed, 17 Apr 2024 14:32:54 +0200
Subject: [PATCH] start using some css variables where we can

---
 .../ServerDashboard/ServerDashboard.jsx       |  2 +-
 share/jupyterhub/static/scss/cssvariables.css | 20 +++++++++++++++++++
 share/jupyterhub/static/scss/style.scss       |  3 +++
 share/jupyterhub/static/scss/variables.scss   |  6 ------
 4 files changed, 24 insertions(+), 7 deletions(-)
 create mode 100644 share/jupyterhub/static/scss/cssvariables.css

diff --git a/jsx/src/components/ServerDashboard/ServerDashboard.jsx b/jsx/src/components/ServerDashboard/ServerDashboard.jsx
index 3c8f6e30..7d6f2d21 100644
--- a/jsx/src/components/ServerDashboard/ServerDashboard.jsx
+++ b/jsx/src/components/ServerDashboard/ServerDashboard.jsx
@@ -318,7 +318,7 @@ const ServerDashboard = (props) => {
       }, {});
     return (
       <ReactObjectTableViewer
-        className="table-striped table-bordered"
+        className="table table-striped table-bordered"
         style={{
           padding: "3px 6px",
           margin: "auto",
diff --git a/share/jupyterhub/static/scss/cssvariables.css b/share/jupyterhub/static/scss/cssvariables.css
new file mode 100644
index 00000000..5128dd8a
--- /dev/null
+++ b/share/jupyterhub/static/scss/cssvariables.css
@@ -0,0 +1,20 @@
+/* CSS variables
+ note: SCSS variable overrides must be loaded _before_ bootstrap (variables.scss)
+ while CSS variable overrides must be loaded _after_ bootstrap (cssvariables.scss)
+*/
+
+.navbar {
+  /* higher contrast nav links by default */
+  --bs-navbar-color: rgba(black, 0.9);
+}
+
+.navbar-nav {
+  /* no color change on nav links 
+    darken background on hover, no change to text
+    background part is in page.scss
+  */
+
+  --bs-nav-link-color: var(--bs-navbar-color);
+  --bs-nav-link-hover-color: var(--bs-nav-link-color);
+  --bs-nav-link-active-color: var(--bs-nav-link-color);
+}
diff --git a/share/jupyterhub/static/scss/style.scss b/share/jupyterhub/static/scss/style.scss
index f177b836..4e8cff16 100644
--- a/share/jupyterhub/static/scss/style.scss
+++ b/share/jupyterhub/static/scss/style.scss
@@ -39,6 +39,9 @@
 // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
 // @import "../components/bootstrap/scss/utilities/api";
 
+// CSS variables must be loaded _after_ bootstrap to override
+@import "./cssvariables";
+
 // redefine .btn-xs, removed in bootstrap 4
 .btn-xs {
   // $padding-y, $padding-x, $font-size, $border-radius
diff --git a/share/jupyterhub/static/scss/variables.scss b/share/jupyterhub/static/scss/variables.scss
index 7afdc617..dd221d49 100644
--- a/share/jupyterhub/static/scss/variables.scss
+++ b/share/jupyterhub/static/scss/variables.scss
@@ -1,10 +1,4 @@
 $border-radius-large: 5px;
-$navbar-height: 40px;
-
-// darken background on hover, no change to text
-// background part is in page.scss
-$nav-link-color: var(--bs-navbar-color);
-$nav-link-hover-color: $nav-link-color;
 
 $jupyter-orange: #f37524;
 $jupyter-red: #e34f21;