From 75ffd813e93aec6410df7c27f5f424f831b5fd8e Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 7 Sep 2020 21:11:10 -0700
Subject: [PATCH] oops, fix bug in Chakra globals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ahh, right, I was overriding their html/body styles! stop doing that 😅
---
 src/app/App.js | 34 +++++++++++++++++++---------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/app/App.js b/src/app/App.js
index 36646c71..1ad52ea1 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { ApolloProvider } from "@apollo/client";
 import { Auth0Provider } from "@auth0/auth0-react";
-import { CSSReset, ChakraProvider, useColorMode } from "@chakra-ui/core";
+import { CSSReset, ChakraProvider } from "@chakra-ui/core";
 import defaultTheme from "@chakra-ui/theme";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import loadable from "@loadable/component";
@@ -19,20 +19,24 @@ const theme = {
   ...defaultTheme,
   styles: {
     ...defaultTheme.styles,
-    global: ({ colorMode, ...rest }) => ({
-      ...defaultTheme.styles.global({ colorMode, ...rest }),
-      html: {
-        // HACK: Chakra sets body as the relative position element, which is
-        //       fine, except its `min-height: 100%` doesn't actually work
-        //       unless paired with height on the root element too!
-        height: "100%",
-      },
-      body: {
-        background: colorMode === "light" ? "white" : "gray.800",
-        color: colorMode === "light" ? "green.800" : "green.50",
-        transition: "all 0.25s",
-      },
-    }),
+    global: ({ colorMode, ...rest }) => {
+      const defaultGlobals = defaultTheme.styles.global({ colorMode, ...rest });
+      return {
+        ...defaultGlobals,
+        html: {
+          ...defaultGlobals.html,
+          // HACK: Chakra sets body as the relative position element, which is
+          //       fine, except its `min-height: 100%` doesn't actually work
+          //       unless paired with height on the root element too!
+          height: "100%",
+        },
+        body: {
+          ...defaultGlobals.body,
+          color: colorMode === "light" ? "green.800" : "green.50",
+          transition: "all 0.25s",
+        },
+      };
+    },
   },
 };