From b758ea9c5f29a4f6ede6dba08bac63877f2b7683 Mon Sep 17 00:00:00 2001
From: Sam Gaus <sam@gaus.co.uk>
Date: Thu, 13 Jul 2023 15:45:03 +0100
Subject: [PATCH] Improve darkmode and fix some warnings in dev mode

---
 .../src/components/AlphaImage.tsx             |  9 ++--
 .../greenbox-web/src/components/Header.tsx    | 49 +++++++++----------
 .../greenbox-web/src/components/Image.tsx     |  7 +++
 .../greenbox-web/src/components/MainPage.tsx  |  2 +-
 .../greenbox-web/src/components/Spinner.tsx   |  4 +-
 .../src/components/SwitchButton.tsx           |  2 +-
 packages/greenbox-web/src/theme.ts            | 10 ++--
 7 files changed, 42 insertions(+), 41 deletions(-)
 create mode 100644 packages/greenbox-web/src/components/Image.tsx

diff --git a/packages/greenbox-web/src/components/AlphaImage.tsx b/packages/greenbox-web/src/components/AlphaImage.tsx
index 247e093..6921853 100644
--- a/packages/greenbox-web/src/components/AlphaImage.tsx
+++ b/packages/greenbox-web/src/components/AlphaImage.tsx
@@ -1,8 +1,9 @@
-import { Image as ChakraImage, useColorModeValue } from "@chakra-ui/react";
 import { CSSObject } from "@emotion/react";
 import Color from "color";
 import { useEffect, useMemo, useState } from "react";
 
+import Image from "./Image";
+
 function createAlphaMask(data: Uint8ClampedArray, width: number) {
   const mask = new Uint8ClampedArray(data.length).fill(255);
   const visited = new Set();
@@ -52,8 +53,6 @@ export default function AlphaImage({
   sourceHeight = sourceWidth,
 }: Props) {
   const [maskImage, setMaskImage] = useState({} as CSSObject);
-  const invert = useColorModeValue(0, 100);
-
   const url = useMemo(() => `https://s3.amazonaws.com/images.kingdomofloathing.com/${src}`, [src]);
 
   useEffect(() => {
@@ -92,7 +91,5 @@ export default function AlphaImage({
     storeMask();
   }, [url, src]);
 
-  return (
-    <ChakraImage alt={title} src={url} width={sourceWidth} height={sourceHeight} sx={maskImage} />
-  );
+  return <Image alt={title} src={url} width={sourceWidth} height={sourceHeight} sx={maskImage} />;
 }
diff --git a/packages/greenbox-web/src/components/Header.tsx b/packages/greenbox-web/src/components/Header.tsx
index bf25532..82d86d6 100644
--- a/packages/greenbox-web/src/components/Header.tsx
+++ b/packages/greenbox-web/src/components/Header.tsx
@@ -11,12 +11,9 @@ import {
   Code,
   HStack,
   Heading,
-  Image,
   Stack,
   Text,
   Tooltip,
-  useColorMode,
-  useColorModeValue,
 } from "@chakra-ui/react";
 import { RawSnapshotData } from "greenbox-data";
 import { useCallback } from "react";
@@ -50,30 +47,28 @@ export default function Header({ meta, loading, error, errorMessage }: Props) {
 
   return (
     <AccordionItem>
-      <Heading as="h1">
-        <AccordionButton fontSize="4xl">
-          <HStack alignItems="center" flex={1}>
-            <Box textAlign="left">Greenbox</Box>
-            <Box>
-              <SwitchButton />
-            </Box>
-            <Box flex={1} />
-            <Box textAlign="right">
-              {meta ? (
-                <MetaInfo meta={meta} />
-              ) : loading ? (
-                <Spinner />
-              ) : error ? (
-                <Alert status="error" fontSize="md">
-                  <AlertIcon />
-                  {errorMessage}
-                </Alert>
-              ) : null}
-            </Box>
-          </HStack>
-          <AccordionIcon />
-        </AccordionButton>
-      </Heading>
+      <AccordionButton fontSize="4xl" as="section">
+        <HStack alignItems="center" flex={1}>
+          <Heading as="h1">Greenbox</Heading>
+          <Box>
+            <SwitchButton />
+          </Box>
+          <Box flex={1} />
+          <Box textAlign="right">
+            {meta ? (
+              <MetaInfo meta={meta} />
+            ) : loading ? (
+              <Spinner />
+            ) : error ? (
+              <Alert status="error" fontSize="md">
+                <AlertIcon />
+                {errorMessage}
+              </Alert>
+            ) : null}
+          </Box>
+        </HStack>
+        <AccordionIcon />
+      </AccordionButton>
       <AccordionPanel>
         <Stack>
           <Text>To get the data from your account, first install the script by running</Text>
diff --git a/packages/greenbox-web/src/components/Image.tsx b/packages/greenbox-web/src/components/Image.tsx
new file mode 100644
index 0000000..d1b4e23
--- /dev/null
+++ b/packages/greenbox-web/src/components/Image.tsx
@@ -0,0 +1,7 @@
+import { Image as ChakraImage, ImageProps, useColorModeValue } from "@chakra-ui/react";
+
+export default function Image(props: ImageProps) {
+  const filter = useColorModeValue("", "contrast(0.6666) invert(1) hue-rotate(180deg)");
+
+  return <ChakraImage {...props} filter={filter} />;
+}
diff --git a/packages/greenbox-web/src/components/MainPage.tsx b/packages/greenbox-web/src/components/MainPage.tsx
index 27ab557..96c7c39 100644
--- a/packages/greenbox-web/src/components/MainPage.tsx
+++ b/packages/greenbox-web/src/components/MainPage.tsx
@@ -68,7 +68,7 @@ export default function MainPage() {
 
   return (
     <Container maxWidth="1000px" width="100%">
-      <Accordion allowMultiple allowToggle defaultIndex={0}>
+      <Accordion allowMultiple defaultIndex={[0]}>
         <Header
           meta={data?.meta}
           loading={loading.playerData}
diff --git a/packages/greenbox-web/src/components/Spinner.tsx b/packages/greenbox-web/src/components/Spinner.tsx
index a5db046..227de29 100644
--- a/packages/greenbox-web/src/components/Spinner.tsx
+++ b/packages/greenbox-web/src/components/Spinner.tsx
@@ -1,4 +1,6 @@
-import { Box, Image, keyframes, useColorModeValue } from "@chakra-ui/react";
+import { Box, keyframes, useColorModeValue } from "@chakra-ui/react";
+
+import Image from "./Image";
 
 const spin = keyframes({
   "0%": {
diff --git a/packages/greenbox-web/src/components/SwitchButton.tsx b/packages/greenbox-web/src/components/SwitchButton.tsx
index 73a2be4..f046ed1 100644
--- a/packages/greenbox-web/src/components/SwitchButton.tsx
+++ b/packages/greenbox-web/src/components/SwitchButton.tsx
@@ -1,4 +1,4 @@
-import { Button, IconButton, Image, useColorMode, useColorModeValue } from "@chakra-ui/react";
+import { IconButton, Image, useColorMode, useColorModeValue } from "@chakra-ui/react";
 
 export default function SwitchButton() {
   const { toggleColorMode } = useColorMode();
diff --git a/packages/greenbox-web/src/theme.ts b/packages/greenbox-web/src/theme.ts
index bb19eb9..1a29d58 100644
--- a/packages/greenbox-web/src/theme.ts
+++ b/packages/greenbox-web/src/theme.ts
@@ -9,18 +9,18 @@ export const theme = extendTheme({
     colors: {
       "chakra-body-bg": {
         _light: "#f6f8fa",
-        _dark: "#010409",
+        _dark: "#2a292a",
       },
       accent: {
-        default: "#ffffff",
-        _dark: "#161b22",
+        _light: "#ffffff",
+        _dark: "#46454a",
       },
       complete: {
-        default: "#afa",
+        _light: "#afa",
         _dark: "green.800",
       },
       partial: {
-        default: "#eea",
+        _light: "#eea",
         _dark: "yellow.800",
       },
     },