From cb4cbde0ed4ab4ca8b8232da7c5d3f565bce881c Mon Sep 17 00:00:00 2001
From: VitroidFPV <76877124+VitroidFPV@users.noreply.github.com>
Date: Tue, 17 Dec 2024 23:00:53 +0100
Subject: [PATCH] Style: Fix contrast issues on dark mode

---
 src/css/dark-theme.less   | 40 ++-------------------------------------
 src/css/main.less         |  6 ++++++
 src/js/tabs/pid_tuning.js |  6 +++---
 src/tabs/auxiliary.html   |  2 +-
 4 files changed, 12 insertions(+), 42 deletions(-)

diff --git a/src/css/dark-theme.less b/src/css/dark-theme.less
index 8c4d48d8cb..f3ce1cf194 100644
--- a/src/css/dark-theme.less
+++ b/src/css/dark-theme.less
@@ -2,15 +2,8 @@ body.dark-theme {
     .helpicon {
         background-image: url(../images/icons/cf_icon_info_white.svg);
         opacity: 0.3;
-    }
-    .cf {
-        .helpicon {
-            background-image: url(../images/icons/cf_icon_info_grey.svg);
-            opacity: 0.4;
-            &:hover {
-                background-image: url(../images/icons/cf_icon_info_grey.svg);
-                opacity: 1;
-            }
+        &:hover {
+            opacity: 0.5;
         }
     }
     .gui_box_titlebar {
@@ -37,35 +30,6 @@ body.dark-theme {
             }
         }
     }
-    .tab-pid_tuning {
-        .profile {
-            .helpicon {
-                background-image: url(../images/icons/cf_icon_info_grey.svg);
-                opacity: 0.4;
-                &:hover {
-                    opacity: 1;
-                }
-            }
-        }
-        .rate_profile {
-            .helpicon {
-                background-image: url(../images/icons/cf_icon_info_grey.svg);
-                opacity: 0.4;
-                &:hover {
-                    opacity: 1;
-                }
-            }
-        }
-        .pid_titlebar {
-            .helpicon {
-                background-image: url(../images/icons/cf_icon_info_grey.svg);
-                opacity: 0.4;
-                &:hover {
-                    opacity: 1;
-                }
-            }
-        }
-    }
 
     .invertable {
         filter: invert(1)
diff --git a/src/css/main.less b/src/css/main.less
index 95474ff080..0115b8ea9a 100644
--- a/src/css/main.less
+++ b/src/css/main.less
@@ -1295,6 +1295,12 @@ dialog {
     &:hover {
         background-color: var(--primary-400);
     }
+    &.disabled {
+        background-color: var(--surface-500);
+        border: 1px solid var(--surface-400);
+        color: var(--surface-900);
+        cursor: default;
+    }
 }
 .regular-button.pushed {
     background-color: var(--primary-transparent-3);
diff --git a/src/js/tabs/pid_tuning.js b/src/js/tabs/pid_tuning.js
index 67b8d5c57f..e134ff9660 100644
--- a/src/js/tabs/pid_tuning.js
+++ b/src/js/tabs/pid_tuning.js
@@ -981,7 +981,7 @@ pid_tuning.initialize = function (callback) {
     }
 
     function drawAxes(curveContext, width, height) {
-        curveContext.strokeStyle = '#000000';
+        curveContext.strokeStyle = '#888888';
         curveContext.lineWidth = 4;
 
         // Horizontal
@@ -1512,7 +1512,7 @@ pid_tuning.initialize = function (callback) {
                 thrlabel = `${Math.round(thrPercent <= 0 ? 0 : realthr)}%` +
                     ` = ${Math.round(thrPercent <= 0 ? 0 : expothr)}%`,
                 textWidth = context.measureText(thrlabel);
-            context.fillStyle = '#000';
+            context.fillStyle = '#888888';
             context.scale(textWidth / throttleCurve.clientWidth, 1);
             context.fillText(thrlabel, 5, 5 + fontSize);
             context.restore();
@@ -2071,7 +2071,7 @@ pid_tuning.updateRatesLabels = function() {
 
         const drawAxisLabel = function(context, axisLabel, x, y, align, color) {
 
-            context.fillStyle = color || '#000000' ;
+            context.fillStyle = color || '#888888' ;
             context.textAlign = align || 'center';
             context.fillText(axisLabel, x, y);
         };
diff --git a/src/tabs/auxiliary.html b/src/tabs/auxiliary.html
index 514a646285..0c62a7d7d1 100644
--- a/src/tabs/auxiliary.html
+++ b/src/tabs/auxiliary.html
@@ -68,7 +68,7 @@
             <div class="marker"></div>
         </div>
         <div class="delete">
-            <a class="deleteRange" href="#">&nbsp;</a>
+            <a class="deleteRange invertable" href="#">&nbsp;</a>
         </div>
     </div>
     <div class="link">