From 131ff9d4c2883d7f8e40f3f7cfba0f73cde0876d Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 25 Dec 2020 09:20:18 -0800
Subject: [PATCH] upgrade to new Chakra extendTheme API

---
 package.json   |  1 +
 src/app/App.js | 40 ++++++++++++++++------------------------
 yarn.lock      |  2 +-
 3 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index 8b66caf..c399ec1 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@auth0/auth0-react": "^1.0.0",
     "@chakra-ui/icons": "^1.0.2",
     "@chakra-ui/react": "^1.0.4",
+    "@chakra-ui/theme-tools": "^1.0.2",
     "@emotion/css": "^11.1.3",
     "@emotion/react": "^11.1.4",
     "@emotion/styled": "^11.0.0",
diff --git a/src/app/App.js b/src/app/App.js
index de69ff7..1c3238b 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -1,8 +1,8 @@
 import React from "react";
 import { ApolloProvider } from "@apollo/client";
 import { Auth0Provider } from "@auth0/auth0-react";
-import { CSSReset, ChakraProvider } from "@chakra-ui/react";
-import defaultTheme from "@chakra-ui/theme";
+import { CSSReset, ChakraProvider, extendTheme } from "@chakra-ui/react";
+import { mode } from "@chakra-ui/theme-tools";
 import {
   BrowserRouter as Router,
   Switch,
@@ -31,30 +31,22 @@ const WardrobePage = loadable(() => import("./WardrobePage"), {
   fallback: <WardrobePageLayout />,
 });
 
-const theme = {
-  ...defaultTheme,
+const theme = extendTheme({
   styles: {
-    ...defaultTheme.styles,
-    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",
-        },
-      };
-    },
+    global: (props) => ({
+      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: {
+        color: mode("green.800", "green.50")(props),
+        transition: "all 0.25s",
+      },
+    }),
   },
-};
+});
 
 /**
  * App is the entry point of our application. There's not a ton of exciting
diff --git a/yarn.lock b/yarn.lock
index 2f9fdef..86e1735 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2441,7 +2441,7 @@
     "@chakra-ui/form-control" "1.1.0"
     "@chakra-ui/utils" "1.0.2"
 
-"@chakra-ui/theme-tools@1.0.2":
+"@chakra-ui/theme-tools@1.0.2", "@chakra-ui/theme-tools@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-1.0.2.tgz#d4c36f3f4e60295e9f98d418182a98c76ff15393"
   integrity sha512-wmjz5wPtjfslvvVMoHKyD8pnOQC0Facf93fKZupaxtXaol2eZZ/tYIiA6JUwe5mtk75WvLKAihpqaM8XxeXFWw==