From d3365122d7b0abfef33aa6664e803aaa574fc8fa Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@netboxlabs.com>
Date: Fri, 2 Aug 2024 09:19:22 -0400
Subject: [PATCH] Misc cleanup & refactoring

---
 netbox/project-static/dist/netbox.css         | Bin 556962 -> 556903 bytes
 .../styles/overrides/_tabler.scss             |  90 ++++++++----------
 .../styles/transitional/_navigation.scss      |  19 ++--
 netbox/templates/base/layout.html             |   2 +-
 4 files changed, 51 insertions(+), 60 deletions(-)

diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css
index 24ebd7b7a0a6a4592c9f84061435a715b010a0a2..42639c31d76f6defb1eb7923d46b37cfea941d93 100644
GIT binary patch
delta 151
zcmV;I0BHZB{~_o8A%KJdgaU*Egam{Iga(8Mv<O*Sm(E=XDFb43Zj+%e7nk5(2xpgf
zTL>u#WO8qCWN&wFlbkOcm$F_6E|-EX0TY)KBLfr%eJ*feXJssxP<99umk?eEp_dYB
z1xuItpaBiHzFY_o0hefE2pE@bS^*lD%wGshm+V^zC6~-!2pN|qTnIpyB4G#`w;5mv
Fi60CkGqnH!

delta 214
zcmaF<PjS(I#fBEf7N!>F7M2#)7Pc1lEgX^2)0?6>WT!JTF^W%@jNuTT-lWGU#Hce}
zJBCALx=<FY$aL3u4z=kHS*)VdTjDt!Kw{q8*TizjFtX_-=A;&tO#c|oE<U}Wjh%}_
zvsSMlF+EjhdVL~?`Q!uV#U{(wb53W9<%pl|AH$(PeNHq-x_*9XNls>7s%~*=a(-S)
zVo{}DVsc4lS*ng+Qc0dJhV0~pKO`m}IKa-Lo0hIQJ+Od7a{7Zfj<oG}<2kzI0Xn%!
At^fc4

diff --git a/netbox/project-static/styles/overrides/_tabler.scss b/netbox/project-static/styles/overrides/_tabler.scss
index e6432558b..a17a800f5 100644
--- a/netbox/project-static/styles/overrides/_tabler.scss
+++ b/netbox/project-static/styles/overrides/_tabler.scss
@@ -11,16 +11,38 @@ pre {
   color: inherit;
 }
 
-// Buttons
+// Slightly increase alert contrast between bg and text
+.alert {
+  background: var(--#{$prefix}bg-surface);
+}
+
+// Button adjustments
 .btn {
   // Tabler sets display: flex
   display: inline-block;
+
+  &:focus {
+    // Add button focus state
+    border: 1px solid var(--tblr-primary-fg);
+    outline: 2px solid var(--tblr-primary) !important;
+  }
 }
 .btn-sm {
   // $border-radius-sm (2px) is too small
   border-radius: $border-radius;
 }
 
+// Dropdown items
+.dropdown-item {
+  // Tabler sets display: flex
+  display: inline-block;
+}
+
+// Set footer icon color
+.footer .text-primary {
+  color: $rich-black !important;
+}
+
 // Tabs
 .nav-tabs {
   .nav-link {
@@ -29,15 +51,12 @@ pre {
   }
 }
 
-// Dropdown items
-.dropdown-item {
-  // Tabler sets display: flex
-  display: inline-block;
+// Altering background colors
+.page, .page-tabs .nav-tabs .nav-link.active {
+  background-color: var(--#{$prefix}bg-surface-tertiary) !important;
 }
-
-// Override background color alpha value
-[data-bs-theme=dark] ::selection {
-  background-color: rgba(var(--tblr-primary-rgb),.48);
+.page-body .card .card-header {
+  background: var(--tblr-bg-surface-secondary) !important;
 }
 
 // Dark mode colors
@@ -55,59 +74,30 @@ pre {
   }
 }
 
-// Slightly increase alert contrast between bg and text
-.alert {
-  background: var(--#{$prefix}bg-surface);
-}
-
-// Altering background colors
-.page, .page-tabs .nav-tabs .nav-link.active {
-  background-color: var(--#{$prefix}bg-surface-tertiary)!important;
-}
-.page-body .card .card-header {
-  background: var(--tblr-bg-surface-secondary)!important;
-}
-
-.footer .text-primary {
-  color: $rich-black!important;
-}
-
-// Add button focus state
-.btn:focus {
-  border: 1px solid var(--tblr-primary-fg);
-  outline: 2px solid var(--tblr-primary)!important;
-}
-
-// Fix secondary combo button contrast
-.btn-outline-secondary {
-  &.active {
-    color: var(--tblr-primary-fg);
-  }
-  &:hover {
-    color: var(--tblr-primary-fg);
-  }
-}
-
 // Dark mode overrides
 body[data-bs-theme=dark] {
+  // Override background color alpha value
+  ::selection {
+    background-color: rgba(var(--tblr-primary-rgb),.48);
+  }
 
   .btn-primary {
-    color: $rich-black!important;
+    color: $rich-black !important;
   }
 
   // Change content color when primary teal changes with theme
   .bg-primary {
     .card-title,a,i {
-      color: $rich-black!important;
+      color: $rich-black !important;
     }
   }
   .text-bg-primary {
-    color: $rich-black!important;
+    color: $rich-black !important;
   }
 
   // Altering background colors
   .card {
-    background: $rich-black!important;
+    background: $rich-black !important;
   }
 
   // Background colors to match brand colors
@@ -116,7 +106,7 @@ body[data-bs-theme=dark] {
     background-color: $rich-black;
   }
   .page, .page-tabs .nav-tabs .nav-link.active {
-    background-color: $rich-black-light!important;
+    background-color: $rich-black-light !important;
   }
 
   .page-link.active, .active>.page-link {
@@ -126,16 +116,16 @@ body[data-bs-theme=dark] {
   // Adjusting text colors
   .text- {
     &bg-primary {
-      color: $rich-black!important;
+      color: $rich-black !important;
     }
     &muted {
       color: var(--#{$prefix}secondary-color) !important;
     }
     &secondary {
-      color: $gray-400!important;
+      color: $gray-400 !important;
     }
   }
   .footer .text-primary {
-    color: white!important;
+    color: white !important;
   }
 }
diff --git a/netbox/project-static/styles/transitional/_navigation.scss b/netbox/project-static/styles/transitional/_navigation.scss
index 63adb8467..67aa19935 100644
--- a/netbox/project-static/styles/transitional/_navigation.scss
+++ b/netbox/project-static/styles/transitional/_navigation.scss
@@ -9,10 +9,10 @@
   // Adjust hover color & style for menu items
   .navbar-collapse {
     .nav-link-icon {
-      color: var(--tblr-nav-link-color)!important;
+      color: var(--tblr-nav-link-color) !important;
     }
     .text-secondary {
-      color: $dark-teal!important;
+      color: $dark-teal !important;
     }
 
     .dropdown-menu {
@@ -94,6 +94,7 @@
 
 // Light theme styling
 body[data-bs-theme=light] .navbar-vertical.navbar-expand-lg {
+  // Background Gradient
   background: linear-gradient(180deg, rgba(0, 133, 125, 0.00) 0%, rgba(0, 133, 125, 0.10) 100%), #FFF;
 }
 
@@ -105,29 +106,29 @@ body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
 
   // Border color for active dropdown list
   .nav-item.dropdown.active:after {
-    border-color: $bright-teal!important;
+    border-color: $bright-teal !important;
   }
 
   // Adjust hover color & style for menu items
   .dropdown-item {
     a {
-      color: white!important;
+      color: white !important;
     }
     &.active {
-      background-color: $navbar-dark-active-bg!important;
+      background-color: $navbar-dark-active-bg !important;
       a {
-        color: white!important;
+        color: white !important;
       }
     }
     &:hover {
-      background-color: $navbar-dark-active-bg!important;
+      background-color: $navbar-dark-active-bg !important;
     }
     .nav-link-title {
-      color: white!important;
+      color: white !important;
     }
   }
   .text-secondary {
-    color: $bright-teal!important;
+    color: $bright-teal !important;
   }
 
   img.motif {
diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html
index 280406e0b..693a1a017 100644
--- a/netbox/templates/base/layout.html
+++ b/netbox/templates/base/layout.html
@@ -37,7 +37,7 @@ Blocks:
           <a href="{% url 'home' %}">
             <img src="{% static 'logo_netbox_dark_teal.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image hide-theme-dark">
             <img src="{% static 'logo_netbox_bright_teal.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image hide-theme-light">
-            <div class="netbox-edition fw-semibold text-center fs-5 mt-2">{{ settings.RELEASE.edition }}</div>
+            <div class="netbox-edition fw-semibold text-center fs-5 my-1">{{ settings.RELEASE.edition }}</div>
           </a>
         </h1>