From 7b0cdca17c1e187224d45729099ae0254bf7a081 Mon Sep 17 00:00:00 2001
From: Andrew Gormley <andrewgormley91@gmail.com>
Date: Wed, 10 Jul 2024 15:08:16 +0100
Subject: [PATCH] 16648 dashboard contrast issues (#16824)

* fixed #16648: dashboard contrast issues

* reinstate amendment to 16649

* fixed #16648: created gridstack override and removed inline bug fix

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
---
 netbox/project-static/dist/netbox.css         | Bin 553341 -> 553528 bytes
 netbox/project-static/styles/netbox.scss      |   1 +
 .../styles/overrides/_gridstack.scss          |  12 ++++++++++++
 .../styles/overrides/_tabler.scss             |   4 ++++
 netbox/templates/extras/dashboard/widget.html |   6 +++---
 5 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 netbox/project-static/styles/overrides/_gridstack.scss

diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css
index fc27a79e7c1bc96fc1506e382205f44a45c95efe..55c93ba2ce834deb3e654590e85b4026972c414a 100644
GIT binary patch
delta 140
zcmezSNO8v##fBEf7N!>F7M2#)7Pc1lEgW?b%6jQVnJK!(C5g$|3VO+jMJc)&sfj76
zMS4l;x+$q?iKRIu(+$lyq^3{U%*HYOzzG(v=^LUsc%*P>Q%J0y{=b`9VtZW#M>Okn
Y#u%VZ{a6mR>G_cyI@`a;a<mBp0QmqhXaE2J

delta 42
ycmdn-MDgz<#fBEf7N!>F7M2#)7Pc1lEgW?b+qok-qFJXKzGsu$zA28QO&9=V{|`<8

diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss
index af2905312..46d8da9aa 100644
--- a/netbox/project-static/styles/netbox.scss
+++ b/netbox/project-static/styles/netbox.scss
@@ -6,6 +6,7 @@
 
 // Overrides of external libraries
 @import 'overrides/bootstrap';
+@import 'overrides/gridstack';
 @import 'overrides/tabler';
 @import 'overrides/tomselect';
 
diff --git a/netbox/project-static/styles/overrides/_gridstack.scss b/netbox/project-static/styles/overrides/_gridstack.scss
new file mode 100644
index 000000000..ecb5d9a4c
--- /dev/null
+++ b/netbox/project-static/styles/overrides/_gridstack.scss
@@ -0,0 +1,12 @@
+// Altering dashboard card colors
+.grid-stack {
+  .card-header {
+    // Default color of card header changes depending on theme
+    &.bg-default {
+      background: var(--tblr-bg-surface-secondary)!important;
+    }
+    a {
+      color: inherit!important;
+    }
+  }
+}
diff --git a/netbox/project-static/styles/overrides/_tabler.scss b/netbox/project-static/styles/overrides/_tabler.scss
index 120f37990..20ebabab0 100644
--- a/netbox/project-static/styles/overrides/_tabler.scss
+++ b/netbox/project-static/styles/overrides/_tabler.scss
@@ -93,6 +93,10 @@ body[data-bs-theme=dark] {
     .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
diff --git a/netbox/templates/extras/dashboard/widget.html b/netbox/templates/extras/dashboard/widget.html
index 39be16145..51b40342e 100644
--- a/netbox/templates/extras/dashboard/widget.html
+++ b/netbox/templates/extras/dashboard/widget.html
@@ -9,14 +9,14 @@
     gs-id="{{ widget.id }}"
 >
   <div class="card grid-stack-item-content">
-    <div class="card-header text-{{ widget.fg_color }} bg-{{ widget.color|default:"secondary" }} px-2 py-1 d-flex flex-row">
+    <div class="card-header {% if widget.color %} text-{{ widget.fg_color }} {% endif %} bg-{{ widget.color|default:'default' }} px-2 py-1 d-flex flex-row">
       <a href="#"
         hx-get="{% url 'extras:dashboardwidget_config' id=widget.id %}"
         hx-target="#htmx-modal-content"
         data-bs-toggle="modal"
         data-bs-target="#htmx-modal"
       >
-        <i class="mdi mdi-cog text-{{ widget.fg_color }}"></i>
+        <i class="mdi mdi-cog {% if widget.color %} text-{{ widget.fg_color }} {% endif %}"></i>
       </a>
       <div class="card-title flex-fill text-center">
         {% if widget.title %}
@@ -29,7 +29,7 @@
         data-bs-toggle="modal"
         data-bs-target="#htmx-modal"
       >
-        <i class="mdi mdi-close text-{{ widget.fg_color }}"></i>
+        <i class="mdi mdi-close {% if widget.color %} text-{{ widget.fg_color }} {% endif %}"></i>
       </a>
     </div>
     <div class="card-body p-2 pt-1 overflow-auto">