16907 web UI refresh (#16915)

* closes #16907: web ui refresh * closes #16907: changed default widget color to primary color * closes #16907: removed comma * Revert dashboard widget color changes * Rename logo images for consistency * Restore original dashboard widget config * Remove .navbar-brand-autodark from logo * Restore logo file names --------- Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local> Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>
netbox-community · Jul 16, 2024 · 938aa7b · 938aa7b
1 parent e5691df
commit 938aa7b
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 45 deletions.
diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css
diff --git a/netbox/project-static/img/logo_netbox_bright_teal.svg b/netbox/project-static/img/logo_netbox_bright_teal.svg
diff --git a/netbox/project-static/img/logo_netbox_dark_teal.svg b/netbox/project-static/img/logo_netbox_dark_teal.svg
diff --git a/netbox/project-static/styles/_variables.scss b/netbox/project-static/styles/_variables.scss
@@ -33,4 +33,4 @@ $dark-teal: #00857D;
 $primary: $dark-teal;
 
 // Navbar active dropdown border color
-$navbar-active-border-color: $bright-teal;
+$navbar-active-border-color: $dark-teal;
diff --git a/netbox/project-static/styles/overrides/_tabler.scss b/netbox/project-static/styles/overrides/_tabler.scss
@@ -32,16 +32,12 @@ pre {
 // Dropdown items
 .dropdown-item {
   // Tabler sets display: flex
-  display: inline-block;;
-}
-
-table th.orderable a {
-  color: var(--#{$prefix}body-color);
+  display: inline-block;
 }
 
 // Override background color alpha value
 [data-bs-theme=dark] ::selection {
-  background-color: rgba(var(--tblr-primary-rgb),.48)
+  background-color: rgba(var(--tblr-primary-rgb),.48);
 }
 
 // Dark mode colors
@@ -95,6 +91,21 @@ table th.orderable a {
 // Dark mode overrides
 body[data-bs-theme=dark] {
 
+  // Change content color when primary teal changes with theme
+  .bg-primary {
+    .card-title,a,i {
+      color: $rich-black!important;
+    }
+  }
+  .text-bg-primary {
+    color: $rich-black!important;
+  }
+
+  // Altering background colors
+  .card {
+    background: $rich-black!important;
+  }
+
   // Background colors to match brand colors
   background-color: $rich-black;
   .navbar, .page-header {
@@ -104,26 +115,6 @@ body[data-bs-theme=dark] {
     background-color: $rich-black-light!important;
   }
 
-  // Adjust dark table link color without affecting buttons and badges
-  table {
-    a {
-      color: $bright-teal;
-      &.dropdown-item {
-        color: inherit;
-      }
-    }
-    .badge a {
-      color: inherit;
-    }
-    .btn {
-      color: var(--#{$prefix}body-color);
-    }
-    // Stops table headers from appearing as primary link color
-    th.orderable a {
-      color: var(--#{$prefix}body-color);
-    }
-  }
-
   // Adjusting text colors
   .text- {
     &bg-primary {

diff --git a/netbox/project-static/styles/transitional/_navigation.scss b/netbox/project-static/styles/transitional/_navigation.scss
@@ -1,26 +1,32 @@
-// Navbar styling
+// Navbar and light theme styling
 .navbar-vertical.navbar-expand-lg {
-  background-color: $rich-black;
-  .dropdown-item {
-    color: white!important;
-  }
-  .text-secondary {
-    color: $bright-teal!important;
-  }
 
+  // Background Gradient
+  background: linear-gradient(180deg, rgba(0, 133, 125, 0.00) 0%, rgba(0, 133, 125, 0.10) 100%), #FFF;
+
+  // Adjust hover color & style for menu items
   .navbar-collapse {
+    .nav-link-icon {
+      color: var(--tblr-nav-link-color)!important;
+    }
+    .text-secondary {
+      color: $dark-teal!important;
+    }
+
     .dropdown-menu {
+
+      // Adjust hover color & style for menu items
       .dropdown-item {
         a {
-          color: inherit;
+          color: $rich-black;
         }
         .btn-group {
           visibility: hidden;
         }
 
-        // Adjust hover color & style for menu items
+        // Style menu item hover state
         &:hover {
-          background-color: $gray-700;
+          background-color: var(--tblr-navbar-active-bg);
           a {
             text-decoration: none;
           }
@@ -31,9 +37,9 @@
 
         // Style active menu item
         &.active {
-          background-color: $gray-700;
+          background-color: var(--tblr-navbar-active-bg);
           a {
-            color: white;
+            color: $rich-black;
           }
           .btn-group {
             visibility: visible;
@@ -44,3 +50,37 @@
     }
   }
 }
+
+// Dark theme styling
+body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
+
+  // Background Gradient
+  background: linear-gradient(180deg, rgba(0, 242, 212, 0.00) 0%, rgba(0, 242, 212, 0.10) 100%), #001423;
+
+  // Border color for active dropdown list
+  .nav-item.dropdown.active:after {
+    border-color: $bright-teal!important;
+  }
+
+  // Adjust hover color & style for menu items
+  .dropdown-item {
+    a {
+      color: white!important;
+    }
+    &.active {
+      background-color: $navbar-dark-active-bg!important;
+      a {
+        color: white!important;
+      }
+    }
+    &:hover {
+      background-color: $navbar-dark-active-bg!important;
+    }
+    .nav-link-title {
+      color: white!important;
+    }
+  }
+  .text-secondary {
+    color: $bright-teal!important;
+  }
+}
diff --git a/netbox/project-static/styles/transitional/_tables.scss b/netbox/project-static/styles/transitional/_tables.scss
@@ -1,6 +1,11 @@
 // Object list tables
 table.object-list {
 
+  // Adjust object list link color without affecting buttons
+  a:not(.btn) {
+    color: var(--#{$prefix}body-color);
+  }
+
   // Hide border of last row
   tbody > tr:last-child > td {
     border-bottom-width: 0;
@@ -48,3 +53,30 @@ table.attr-table {
 td pre {
   margin-bottom: 0;
 }
+
+table th.orderable a {
+  color: var(--#{$prefix}body-color);
+}
+
+body[data-bs-theme=dark] {
+  .table thead th, .markdown>table thead th {
+    background: $rich-black!important;
+  }
+
+  // Adjust dark table link color without affecting buttons and badges
+  table {
+    a:not(.btn,.badge a) {
+      color: $bright-teal;
+    }
+    // Stops table headers from appearing as primary link color
+    th.orderable a {
+      color: var(--#{$prefix}body-color);
+    }
+  }
+
+  table.object-list {
+    a {
+      color: var(--#{$prefix}body-color)!important;
+    }
+  }
+}
diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html
@@ -19,7 +19,7 @@
   <div class="page">
 
     {# Sidebar #}
-    <aside class="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark">
+    <aside class="navbar navbar-vertical navbar-expand-lg">
       <div class="container-fluid">
 
         {# Menu toggle (mobile view) #}
@@ -28,9 +28,10 @@
         </button>
 
         {# Logo #}
-        <h1 class="navbar-brand navbar-brand-autodark">
+        <h1 class="navbar-brand">
           <a href="{% url 'home' %}">
-            <img src="{% static 'netbox_logo.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image">
+            <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">
           </a>
         </h1>
 

diff --git a/netbox/utilities/templates/navigation/menu.html b/netbox/utilities/templates/navigation/menu.html
@@ -45,7 +45,7 @@
                   {% if buttons %}
                     <div class="btn-group ms-1">
                       {% for button in buttons %}
-                        <a href="{% url button.link %}" class="btn btn-sm btn-{{ button.color|default:"outline-dark" }} lh-2 px-2" title="{{ button.title }}">
+                        <a href="{% url button.link %}" class="btn btn-sm btn-{{ button.color|default:"outline" }} lh-2 px-2" title="{{ button.title }}">
                           <i class="{{ button.icon_class }}"></i>
                         </a>
                       {% endfor %}