From 1ed4750cdf537e9b14516caa730a869b6625f3da Mon Sep 17 00:00:00 2001
From: Sam Gaus <sam@gaus.co.uk>
Date: Thu, 13 Jul 2023 17:57:20 +0100
Subject: [PATCH] Fix skill hover previews in dark mode

---
 packages/greenbox-web/src/components/Image.tsx           | 6 +++++-
 packages/greenbox-web/src/components/Skill.tsx           | 2 +-
 .../greenbox-web/src/components/SkillDescription.tsx     | 9 +++++++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/greenbox-web/src/components/Image.tsx b/packages/greenbox-web/src/components/Image.tsx
index d1b4e23..d28569e 100644
--- a/packages/greenbox-web/src/components/Image.tsx
+++ b/packages/greenbox-web/src/components/Image.tsx
@@ -1,7 +1,11 @@
 import { Image as ChakraImage, ImageProps, useColorModeValue } from "@chakra-ui/react";
 
+export function useColorModeFilter() {
+  return useColorModeValue("", "contrast(0.6666) invert(1) hue-rotate(180deg)");
+}
+
 export default function Image(props: ImageProps) {
-  const filter = useColorModeValue("", "contrast(0.6666) invert(1) hue-rotate(180deg)");
+  const filter = useColorModeFilter();
 
   return <ChakraImage {...props} filter={filter} />;
 }
diff --git a/packages/greenbox-web/src/components/Skill.tsx b/packages/greenbox-web/src/components/Skill.tsx
index 685ce42..2dc351a 100644
--- a/packages/greenbox-web/src/components/Skill.tsx
+++ b/packages/greenbox-web/src/components/Skill.tsx
@@ -40,7 +40,7 @@ export default function Skill({ skill, status, level }: Props) {
           }
         />
       </PopoverTrigger>
-      <PopoverContent>
+      <PopoverContent style={{ ["--popper-bg" as any]: "var(--chakra-colors-chakra-body-bg)" }}>
         <PopoverArrow />
         <PopoverBody>
           <SkillDescription skill={skill} />
diff --git a/packages/greenbox-web/src/components/SkillDescription.tsx b/packages/greenbox-web/src/components/SkillDescription.tsx
index 29b0a04..42eb8c8 100644
--- a/packages/greenbox-web/src/components/SkillDescription.tsx
+++ b/packages/greenbox-web/src/components/SkillDescription.tsx
@@ -5,6 +5,7 @@ import { useSelector } from "react-redux";
 
 import { RootState } from "../store";
 
+import { useColorModeFilter } from "./Image";
 import Spinner from "./Spinner";
 import { guessWikiLink } from "./Thing";
 
@@ -32,7 +33,9 @@ export default function SkillDescription({ skill }: Props) {
         setContents("Cannot load wiki page (this is an experimental feature!)");
       } else {
         setContents(
-          match[0].replaceAll('href="/', 'href="https://kol.coldfront.net/') + "</tr></table>",
+          match[0]
+            .replaceAll('href="/', 'href="https://kol.coldfront.net/')
+            .replaceAll('p style="color:', 'p class="colortext" style="color:') + "</tr></table>",
         );
       }
     }
@@ -46,8 +49,10 @@ export default function SkillDescription({ skill }: Props) {
     }
   }, [ref, contents]);
 
+  const filter = useColorModeFilter();
+
   return (
-    <Flex ref={ref} justifyContent="center">
+    <Flex sx={{ img: { filter }, "p.colortext": { filter } }} ref={ref} justifyContent="center">
       <Spinner />
     </Flex>
   );