.yarnrc.yml

@@ -4,4 +4,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.1.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.1.cjs

package.json

@@ -16,33 +16,33 @@
     "pretty": "prettier --write ."
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.8.8",
+    "@chakra-ui/react": "^2.0.2",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@iconify/react": "^3.2.1",
     "date-fns": "^2.28.0",
     "formik": "^2.2.9",
     "framer-motion": "^6.3.3",
-    "next": "12.1.5",
+    "next": "12.1.6",
-    "react": "<=17.0.2",
+    "react": "^18.1.0",
-    "react-dom": "<=17.0.2",
+    "react-dom": "^18.1.0",
     "sharp": "^0.30.4"
   },
   "devDependencies": {
-    "@types/node": "^17.0.30",
+    "@types/node": "^17.0.35",
-    "@types/react": "<18.0.0",
+    "@types/react": "^18.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/eslint-plugin": "^5.25.0",
-    "eslint": "^8.14.0",
+    "eslint": "^8.16.0",
-    "eslint-config-next": "^12.1.5",
+    "eslint-config-next": "^12.1.6",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "<=4.3.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "prettier": "^2.6.2",
-    "typescript": "<4.6.0"
+    "typescript": "^4.6.4"
   },
   "resolutions": {
     "@types/react": "^17.0.38"
   },
-  "packageManager": "yarn@3.1.0"
+  "packageManager": "yarn@3.2.1"
 }

src/components/calender/index.tsx

@@ -58,7 +58,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
           {weekdays.map((weekDay) => {
             return (
               <Box
-                d="flex"
+                display="flex"
                 alignContent="center"
                 alignItems="center"
                 bg="transparent"

src/theme/layout/BackToTopButton.tsx

@@ -11,7 +11,7 @@ const BackToTopButton: FC<BackToTopButtonProps> = ({
 }: BackToTopButtonProps) => {
   return (
     <Flex
-      d={show ? "flex" : "none"}
+      display={show ? "flex" : "none"}
       pos="fixed"
       top="85vh"
       right={{

src/theme/layout/DesktopNav.tsx

@@ -6,7 +6,7 @@ const DesktopNav = (): JSX.Element => {
   return (
     <HStack
       as="nav"
-      d={{ base: "none", lg: "flex" }}
+      display={{ base: "none", lg: "flex" }}
       h="auto"
       w="auto"
       spacing={4}

src/theme/layout/Header.tsx

@@ -109,7 +109,7 @@ const Header = (): JSX.Element => {
         top={0}
         position="absolute"
         ml={4}
-        d={{ base: "flex", lg: "none" }}
+        display={{ base: "flex", lg: "none" }}
         spacing="5px"
         _hover={{
           cursor: "default"
@@ -139,8 +139,8 @@ const Header = (): JSX.Element => {
           alignItems="center"
           justifyContent="space-between"
         >
-          <Box w="auto" d={{ base: "flex", lg: "none " }}></Box>
+          <Box w="auto" display={{ base: "flex", lg: "none " }}></Box>
-          <Box w="100%" d={{ base: "none", lg: "flex" }} m="auto">
+          <Box w="100%" display={{ base: "none", lg: "flex" }} m="auto">
             <HStack
               width="100%"
               alignItems="center"
@@ -169,7 +169,7 @@ const Header = (): JSX.Element => {
             onClick={() => setOpen(!open)}
             onMouseEnter={() => setHover(true)}
             onMouseLeave={() => setHover(false)}
-            d={{
+            display={{
               base: "inline-flex",
               lg: "none"
             }}

src/theme/layout/MobileNav.tsx

@@ -16,7 +16,7 @@ const MobileNav: FC<MobileNavProps> = ({ updateOpen }: MobileNavProps) => {
   return (
     <MenuList
       as="nav"
-      d={{ base: "block", lg: "none" }}
+      display={{ base: "block", lg: "none" }}
       bg="brand.main"
       h="auto"
       w="100%"