oops, fix bug in Chakra globals

ahh, right, I was overriding their html/body styles! stop doing that 😅

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 }),
+    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: {
-        background: colorMode === "light" ? "white" : "gray.800",
+          ...defaultGlobals.body,
           color: colorMode === "light" ? "green.800" : "green.50",
           transition: "all 0.25s",
         },
-    }),
+      };
+    },
   },
 };