From 9b77f32fee9065c1fc7d06184ede124cad3be3e2 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 8 Sep 2021 17:45:21 +1000
Subject: [PATCH] fix table dark mode colors

---
 src/components/RichTooltip.tsx | 30 ++++++++++++++++++++++++++----
 src/components/Table/styles.ts | 22 ++++++++++++++++------
 2 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/components/RichTooltip.tsx b/src/components/RichTooltip.tsx
index 57d1b424..d6f17e59 100644
--- a/src/components/RichTooltip.tsx
+++ b/src/components/RichTooltip.tsx
@@ -10,10 +10,23 @@ import {
   ButtonProps,
 } from "@material-ui/core";
 
+import { colord, extend } from "colord";
+import mixPlugin from "colord/plugins/lch";
+extend([mixPlugin]);
+
 const useStyles = makeStyles((theme) =>
   createStyles({
+    popper: {
+      zIndex: theme.zIndex.drawer - 1,
+    },
+
     tooltip: {
-      backgroundColor: theme.palette.background.default,
+      backgroundColor:
+        theme.palette.mode === "light"
+          ? theme.palette.background.default
+          : colord(theme.palette.background.paper)
+              .mix("#fff", 0.16)
+              .toHslString(),
       boxShadow: theme.shadows[8],
 
       ...theme.typography.body2,
@@ -23,8 +36,13 @@ const useStyles = makeStyles((theme) =>
 
     arrow: {
       "&::before": {
-        backgroundColor: theme.palette.background.default,
-        boxShadow: theme.shadows[2],
+        backgroundColor:
+          theme.palette.mode === "light"
+            ? theme.palette.background.default
+            : colord(theme.palette.background.paper)
+                .mix("#fff", 0.16)
+                .toHslString(),
+        boxShadow: theme.shadows[8],
       },
     },
 
@@ -89,7 +107,11 @@ export default function RichTooltip({
       arrow
       open={open}
       onClose={closeTooltip}
-      classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
+      classes={{
+        popper: classes.popper,
+        tooltip: classes.tooltip,
+        arrow: classes.arrow,
+      }}
       title={
         <div className={classes.grid} onClick={closeTooltip}>
           <span className={classes.icon}>{icon}</span>
diff --git a/src/components/Table/styles.ts b/src/components/Table/styles.ts
index e7733a09..d0ca05f3 100644
--- a/src/components/Table/styles.ts
+++ b/src/components/Table/styles.ts
@@ -1,8 +1,12 @@
 import { makeStyles, createStyles } from "@material-ui/styles";
-import { alpha, emphasize, darken, lighten } from "@material-ui/core";
+import { alpha, darken, lighten } from "@material-ui/core";
 import { APP_BAR_HEIGHT } from "components/Navigation";
 import { DRAWER_COLLAPSED_WIDTH } from "components/SideDrawer";
 
+import { colord, extend } from "colord";
+import mixPlugin from "colord/plugins/lch";
+extend([mixPlugin]);
+
 export const useStyles = makeStyles((theme) =>
   createStyles({
     tableWrapper: {
@@ -29,12 +33,18 @@ export const useStyles = makeStyles((theme) =>
         "--color": theme.palette.text.primary,
         "--border-color": theme.palette.divider,
         // "--summary-border-color": "#aaa",
-        "--background-color": theme.palette.background.paper,
+        "--background-color":
+          theme.palette.mode === "light"
+            ? theme.palette.background.paper
+            : colord(theme.palette.background.paper)
+                .mix("#fff", 0.04)
+                .alpha(1)
+                .toHslString(),
         "--header-background-color": theme.palette.background.default,
-        "--row-hover-background-color": emphasize(
-          theme.palette.background.paper,
-          0.04
-        ),
+        "--row-hover-background-color": colord(theme.palette.background.paper)
+          .mix(theme.palette.action.hover, theme.palette.action.hoverOpacity)
+          .alpha(1)
+          .toHslString(),
         "--row-selected-background-color":
           theme.palette.mode === "light"
             ? lighten(theme.palette.primary.main, 0.9)