Improve darkmode and fix some warnings in dev mode

loathers · Jul 13, 2023 · b758ea9 · b758ea9
1 parent 62e23e3
commit b758ea9
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",
       },
     },