From 94df0bf0377c0a4f47441c748a2208cb291b4ffc Mon Sep 17 00:00:00 2001
From: Gordon Smith <GordonJSmith@gmail.com>
Date: Mon, 11 Dec 2023 18:22:55 +0000
Subject: [PATCH] HPCC-31052 ECL Watch metrics timeline darkmode issue

Background is stuck on white.
Tweaked grid highlighting and border for darkmode.

Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>
---
 esp/src/eclwatch/css/hpcc.css             |  5 +++
 esp/src/src-react/components/DojoGrid.css | 40 +++++++++--------------
 esp/src/src-react/layouts/HolyGrail.tsx   | 39 +++-------------------
 3 files changed, 24 insertions(+), 60 deletions(-)

diff --git a/esp/src/eclwatch/css/hpcc.css b/esp/src/eclwatch/css/hpcc.css
index c13d45e88a2..26559935861 100644
--- a/esp/src/eclwatch/css/hpcc.css
+++ b/esp/src/eclwatch/css/hpcc.css
@@ -1952,4 +1952,9 @@ span.dijitReset.dijitInline.dijitIcon.fa.disabled {
 .flat .p-TabBar-tab.p-mod-current {
     background-color: var(--colorNeutralBackground1);
     border-bottom-color: var(--colorNeutralStroke1);
+}
+
+.flat .chart_Axis .axis .tick line,
+.flat .chart_Axis .axis path.domain {
+    stroke: var(--colorNeutralStroke1);
 }
\ No newline at end of file
diff --git a/esp/src/src-react/components/DojoGrid.css b/esp/src/src-react/components/DojoGrid.css
index fcae903ba78..1099c8ae7a9 100644
--- a/esp/src/src-react/components/DojoGrid.css
+++ b/esp/src/src-react/components/DojoGrid.css
@@ -1,16 +1,6 @@
 :root {
     --header-font-size: 14px;
     --row-font-size: 13px;
-    --grid-background: transparent;
-    --grid-selectionForeground: rgb(50, 49, 48);
-    --grid-selectionForegroundDark: rgb(225, 225, 225);
-    --grid-selectionForgroundHoverDark: rgb(225, 225, 225);
-    --grid-selectionBackground: rgb(235, 235, 235);
-    --grid-selectionBackgroundDark: rgb(47, 47, 47);
-    --grid-hoverBackground: rgb(215, 237, 248);
-    --grid-hoverBackgroundDark: rgb(49, 49, 49);
-    --grid-selectionHoverBackground: rgb(227, 225, 223);
-    --grid-selectionHoverBackgroundDark: rgb(176, 176, 176);
 }
 
 .flat .dojo-component.dgrid.dgrid-grid {
@@ -18,13 +8,13 @@
 }
 
 .flat .dgrid-header-row {
-    background-color: var(--grid-background);
+    background-color: transparent;
     font-size: var(--header-font-size);
     line-height: 32px;
 }
 
 .flat .dgrid-header-row .dgrid-cell {
-    border-bottom-color: var(--grid-selectionBackground);
+    border-bottom-color: var(--colorNeutralBackground1Selected);
 }
 
 .flat .dgrid-header-row:focus {
@@ -32,7 +22,7 @@
 }
 
 .flat .dgrid-header.dgrid-header-scroll {
-    background-color: var(--grid-background);
+    background-color: transparent;
 }
 
 .flat .dgrid-row {
@@ -41,34 +31,34 @@
 }
 
 .flat .dgrid-row:hover {
-    background-color: var(--grid-hoverBackground);
+    background-color: var(--colorNeutralBackground1Hover);
 }
 
 .flat-dark .dgrid-row:hover {
-    background-color: var(--grid-hoverBackgroundDark);
+    background-color: var(--colorNeutralBackground1Hover);
 }
 
 .flat .dgrid-row.dgrid-selected:hover {
-    background-color: var(--grid-selectionHoverBackground);
+    background-color: var(--colorNeutralBackground1Hover);
 }
 
 .flat-dark .dgrid-row.dgrid-selected:hover {
-    background-color: var(--grid-selectionHoverBackgroundDark);
+    background-color: var(--colorNeutralBackground1Hover);
 }
 
 .flat .dgrid-row.dgrid-selected {
-    background-color: var(--grid-selectionBackground);
-    color: var(--grid-selectionForeground);
-    border-color: var(--grid-background);
+    background-color: var(--colorNeutralBackground1Selected);
+    color: var(--colorNeutralForeground1Selected);
+    border-color: transparent;
 }
 
 .flat-dark .dgrid-row.dgrid-selected {
-    background-color: var(--grid-selectionBackgroundDark);
-    color: var(--grid-selectionForegroundDark);
+    background-color: var(--colorNeutralBackground1Selected);
+    color: var(--colorNeutralForeground1Selected);
 }
 
 .flat .dgrid-cell {
-    border-color: var(--grid-background);
+    border-color: transparent;
 }
 
 .flat .dgrid-focus:focus {
@@ -81,7 +71,7 @@
 }
 
 .flat .dgrid-footer {
-    background-color: var(--grid-background);
+    background-color: var(--colorNeutralStroke1);
 }
 
 .flat .dgrid-pagination {
@@ -109,7 +99,7 @@
 .flat .dgrid-pagination .dgrid-navigation .dgrid-page-input {
     padding: 0;
     margin: 0;
-    background: var(--grid-background);
+    background: var(--colorNeutralStroke1);
     border-style: solid;
     border-width: 1px;
     color: inherit;
diff --git a/esp/src/src-react/layouts/HolyGrail.tsx b/esp/src/src-react/layouts/HolyGrail.tsx
index 5119bd232d0..6e0dcb205bb 100644
--- a/esp/src/src-react/layouts/HolyGrail.tsx
+++ b/esp/src/src-react/layouts/HolyGrail.tsx
@@ -22,54 +22,23 @@ export const HolyGrail: React.FunctionComponent<HolyGrailProps> = ({
     fullscreen = false
 }) => {
 
-    const { isDark } = useUserTheme();
-    const [btnHoverBgColor, setBtnHoverBgColor] = React.useState("rgb(175, 217, 255)");
-    const [btnDisabledColor, setBtnDisabledColor] = React.useState("rgb(180, 180, 180)");
-    const [btnDisabledBgColor, setBtnDisabledBgColor] = React.useState("rgb(238, 240, 242)");
+    const { themeV9 } = useUserTheme();
 
     const layoutStyles = React.useMemo(() => mergeStyleSets({
-        header: {
-            ".ms-CommandBar": {
-                ".ms-Button:hover": {
-                    backgroundColor: btnHoverBgColor
-                },
-                ".ms-Button.is-disabled": {
-                    color: btnDisabledColor,
-                    ".ms-Icon": {
-                        color: btnDisabledColor
-                    }
-                },
-                ".ms-Button.is-disabled:hover": {
-                    backgroundColor: btnDisabledBgColor,
-                }
-            }
-        },
         fullscreen: {
             position: "fixed",
             top: "0",
             left: "0",
             width: "100%",
             height: "100%",
-            background: "white"
+            background: themeV9.colorNeutralBackground1,
         },
         normal: {
         }
-    }), [btnDisabledColor, btnDisabledBgColor, btnHoverBgColor]);
-
-    React.useEffect(() => {
-        if (isDark) {
-            setBtnHoverBgColor("rgb(49, 49, 49)");
-            setBtnDisabledColor("rgb(130, 130, 130)");
-            setBtnDisabledBgColor("rgb(49, 49, 49)");
-        } else {
-            setBtnHoverBgColor("rgb(175, 217, 255)");
-            setBtnDisabledColor("rgb(180, 180, 180)");
-            setBtnDisabledBgColor("rgb(238, 240, 242)");
-        }
-    }, [isDark]);
+    }), [themeV9.colorNeutralBackground1]);
 
     return <div className={fullscreen ? layoutStyles.fullscreen : layoutStyles.normal} style={{ display: "flex", flexDirection: "column", minWidth: 0, minHeight: "100%", overflow: "hidden" }}>
-        <header className={layoutStyles.header} style={{ flex: "0 0", minWidth: 0 }}>{header}</header>
+        <header style={{ flex: "0 0", minWidth: 0 }}>{header}</header>
         <div style={{ flex: "1 1", display: "flex", minWidth: 0 }} >
             <div style={{ flex: "0 2" }}>{left}</div>
             <div style={{ flex: "1 1 auto", minWidth: 1, minHeight: 1 }}>{main}</div>