chakra ui rc.7

lib/useMyTheme.ts

@@ -1,6 +1,7 @@
 import { useColorMode } from "@chakra-ui/core";
 import { theme } from "theme";
 
+// This hook can be deprecated
 export const useMyTheme = () => {
   const { colorMode } = useColorMode();
 

package.json

@@ -18,15 +18,16 @@
   },
   "dependencies": {
     "@apollo/client": "^3.2.5",
-    "@chakra-ui/core": "^1.0.0-rc.5",
-    "@chakra-ui/theme-tools": "^1.0.0-rc.5",
+    "@chakra-ui/core": "^1.0.0-rc.7",
+    "@chakra-ui/theme-tools": "^1.0.0-rc.7",
     "@hookform/resolvers": "^1.0.0",
     "@nexus/schema": "^0.16.0",
     "@prisma/client": "^2.9.0",
     "@sendou/react-sketch": "^0.5.2",
     "apollo-server-micro": "^2.18.2",
     "countries-list": "^2.5.6",
-    "graphql": "^15.3.0",
+    "framer-motion": "^2.9.4",
+    "graphql": "^15.4.0",
     "next": "^9.5.5",
     "next-auth": "^3.1.0",
     "next-google-fonts": "^1.2.1",
@@ -36,23 +37,23 @@
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3",
     "react-hook-form": "^6.9.6",
-    "react-hotkeys-hook": "^2.3.1",
+    "react-hotkeys-hook": "^2.4.0",
     "react-icons": "^3.11.0",
     "react-markdown": "^5.0.2",
     "react-string-replace": "^0.4.4",
     "zod": "^1.11.9"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "1.18.0",
+    "@graphql-codegen/cli": "1.19.0",
     "@graphql-codegen/typescript": "1.17.11",
     "@graphql-codegen/typescript-operations": "1.17.8",
     "@graphql-codegen/typescript-react-apollo": "2.0.7",
     "@prisma/cli": "^2.9.0",
     "@types/next-auth": "^3.1.14",
     "@types/react": "^16.9.53",
-    "cypress": "^5.4.0",
+    "cypress": "^5.5.0",
     "prettier": "^2.1.2",
     "ts-node": "^9.0.0",
-    "typescript": "^4.0.3"
+    "typescript": "^4.0.5"
   }
 }

pages/_app.tsx

@@ -43,7 +43,17 @@ const extendedTheme = extendTheme({
     },
     Modal: {
       baseStyle: (props) => ({
-        content: {
+        dialog: {
+          bg: mode(
+            theme.light.secondaryBgColor,
+            theme.dark.secondaryBgColor
+          )(props),
+        },
+      }),
+    },
+    Menu: {
+      baseStyle: (props) => ({
+        list: {
           bg: mode(
             theme.light.secondaryBgColor,
             theme.dark.secondaryBgColor

scenes/Layout/components/TopNav.tsx

@@ -14,7 +14,6 @@ import {
 } from "@chakra-ui/core";
 import { DiscordIcon } from "assets/icons";
 import { useTranslation } from "lib/useMockT";
-import { useMyTheme } from "lib/useMyTheme";
 import useUser from "lib/useUser";
 import { signIn, signOut } from "next-auth/client";
 import Link from "next/link";
@@ -22,7 +21,6 @@ import { FiMoon, FiSun } from "react-icons/fi";
 import { LanguageSelector } from "./LanguageSelector";
 
 const TopNav = () => {
-  const { bgColor, secondaryBgColor } = useMyTheme();
   const { colorMode, toggleColorMode } = useColorMode();
 
   const UserItem = () => {
@@ -59,7 +57,7 @@ const TopNav = () => {
             cursor="pointer"
           />
         </MenuButton>
-        <MenuList bg={secondaryBgColor}>
+        <MenuList>
           <MenuGroup title={`${user.username}#${user.discriminator}`}>
             <Link href={`/u/${user.discordId}`}>
               <MenuItem>{t("navigation;Profile")}</MenuItem>
@@ -77,7 +75,6 @@ const TopNav = () => {
     <Grid
       as="header"
       templateColumns={["1fr 1fr", null, "1fr 1fr 1fr"]}
-      bg={bgColor}
       w="100%"
       alignItems="center"
       justifyContent="space-between"