update deps

components/builds/BuildCard.tsx

@@ -7,7 +7,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { Plural, t, Trans } from "@lingui/macro";
 import { Ability } from "@prisma/client";
 import UserAvatar from "components/common/UserAvatar";

components/builds/BuildFilters.tsx

@@ -9,7 +9,7 @@ import {
   NumberInputStepper,
   Radio,
   Select,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { Trans } from "@lingui/macro";
 import { Ability } from "@prisma/client";
 import AbilityIcon from "components/common/AbilityIcon";
@@ -44,7 +44,7 @@ const BuildFilters: React.FC<Props> = ({ filters, dispatch }) => {
           <>
             <Box mb="-1.2rem" />
             <Box mb="-1.2rem" />
-            <Box mb="-1.2rem" fontSize="sm" color={gray}>
+            <Box mb="-1.2rem" fontSize="sm" color={gray} pr={2}>
               {isMainAbility(filter.ability) ? (
                 <Trans>Included</Trans>
               ) : (
@@ -55,7 +55,7 @@ const BuildFilters: React.FC<Props> = ({ filters, dispatch }) => {
               {isMainAbility(filter.ability) ? (
                 <Trans>Excluded</Trans>
               ) : (
-                <Trans>Min AP</Trans>
+                <Trans>Max AP</Trans>
               )}
             </Box>
             <IconButton
@@ -65,6 +65,7 @@ const BuildFilters: React.FC<Props> = ({ filters, dispatch }) => {
               variant="ghost"
               isRound
             />
+            {/* FIXME: duplicate image bug */}
             <Box mx={2}>
               <AbilityIcon ability={filter.ability} size="TINY" />
             </Box>

components/builds/Gears.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex } from "@chakra-ui/core";
+import { Box, Flex } from "@chakra-ui/react";
 import GearImage from "components/common/GearImage";
 import { Unpacked } from "lib/types";
 import { GetBuildsByWeaponData } from "prisma/queries/getBuildsByWeapon";

components/builds/ViewAP.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex } from "@chakra-ui/core";
+import { Box, Flex } from "@chakra-ui/react";
 import { t } from "@lingui/macro";
 import { Ability } from "@prisma/client";
 import AbilityIcon from "components/common/AbilityIcon";

components/builds/ViewSlots.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps, Flex } from "@chakra-ui/core";
+import { Box, BoxProps, Flex } from "@chakra-ui/react";
 import AbilityIcon from "components/common/AbilityIcon";
 import { Unpacked } from "lib/types";
 import { GetBuildsByWeaponData } from "prisma/queries/getBuildsByWeapon";

components/common/AbilityIcon.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@chakra-ui/core";
+import { Box } from "@chakra-ui/react";
 import Image from "next/image";
 
 //https://github.com/loadout-ink/splat2-calc

components/common/Breadcrumbs.tsx

@@ -3,7 +3,7 @@ import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { Trans } from "@lingui/macro";
 import { useMyTheme } from "lib/useMyTheme";
 import NextLink from "next/link";

components/common/ColorPicker.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@chakra-ui/core";
+import { Box } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
 
 interface Props {

components/common/LimitProgress.tsx

@@ -1,4 +1,4 @@
-import { CircularProgress, CircularProgressProps } from "@chakra-ui/core";
+import { CircularProgress, CircularProgressProps } from "@chakra-ui/react";
 
 interface Props {
   currentLength: number;

components/common/Markdown.tsx

@@ -8,7 +8,7 @@ import {
   List,
   ListItem,
   Text,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import Emoji from "components/common/Emoji";
 import {
   Table,

components/common/MarkdownTextarea.tsx

@@ -5,7 +5,7 @@ import {
   FormHelperText,
   FormLabel,
   Textarea,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { Trans } from "@lingui/macro";
 import { FieldError } from "react-hook-form";
 import LimitProgress from "./LimitProgress";

components/common/MultiWeaponSelector.tsx

@@ -1,4 +1,4 @@
-import { Select, Tag, TagCloseButton, TagLabel } from "@chakra-ui/core";
+import { Select, Tag, TagCloseButton, TagLabel } from "@chakra-ui/react";
 import { useLingui } from "@lingui/react";
 import { weaponsWithHeroCategorizedLocalized } from "lib/lists/weaponsWithHero";
 import WeaponImage from "./WeaponImage";

components/common/Section.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps } from "@chakra-ui/core";
+import { Box, BoxProps } from "@chakra-ui/react";
 import { useMyTheme } from "lib/useMyTheme";
 
 const Section: React.FC<BoxProps> = (props) => {

components/common/Table.tsx

@@ -1,6 +1,6 @@
 // https://github.com/chakra-ui/chakra-ui/issues/135#issuecomment-644878591
 
-import { Box, BoxProps } from "@chakra-ui/core";
+import { Box, BoxProps } from "@chakra-ui/react";
 import { useMyTheme } from "lib/useMyTheme";
 
 /**

components/common/UserAvatar.tsx

@@ -1,4 +1,4 @@
-import { Avatar, AvatarProps } from "@chakra-ui/core";
+import { Avatar, AvatarProps } from "@chakra-ui/react";
 import { User } from "@prisma/client";
 import React from "react";
 

components/common/WeaponSelector.tsx

@@ -1,4 +1,4 @@
-import { Select } from "@chakra-ui/core";
+import { Select } from "@chakra-ui/react";
 import { useLingui } from "@lingui/react";
 import { weaponsWithHeroCategorizedLocalized } from "lib/lists/weaponsWithHero";
 

components/layout/Footer.tsx

@@ -1,4 +1,4 @@
-import { Box, Image, useColorModeValue } from "@chakra-ui/core";
+import { Box, Image, useColorModeValue } from "@chakra-ui/react";
 import { useMyTheme } from "lib/useMyTheme";
 import { useRouter } from "next/dist/client/router";
 import footerOctoDark from "public/layout/b8ing_dark.png";

components/layout/FooterContent.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex } from "@chakra-ui/core";
+import { Box, Flex } from "@chakra-ui/react";
 import { DiscordIcon } from "lib/assets/icons";
 import { useTranslation } from "lib/useMockT";
 import { useMyTheme } from "lib/useMyTheme";

components/layout/IconNavBar.tsx

@@ -6,7 +6,7 @@ import {
   MenuGroup,
   MenuItem,
   MenuList,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { useTranslation } from "lib/useMockT";
 import { useMyTheme } from "lib/useMyTheme";
 import { useRouter } from "next/dist/client/router";

components/layout/LanguageSelector.tsx

@@ -5,7 +5,7 @@ import {
   MenuItemOption,
   MenuList,
   MenuOptionGroup,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { useTranslation } from "lib/useMockT";
 import { useMyTheme } from "lib/useMyTheme";
 import React from "react";

components/layout/TopNav.tsx

@@ -11,7 +11,7 @@ import {
   MenuItem,
   MenuList,
   useColorMode,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { Trans } from "@lingui/macro";
 import { DiscordIcon } from "lib/assets/icons";
 import useUser from "lib/useUser";

components/layout/index.tsx

@@ -1,4 +1,4 @@
-import { Container, Flex, useToast } from "@chakra-ui/core";
+import { Container, Flex, useToast } from "@chakra-ui/react";
 import { t } from "@lingui/macro";
 import { getToastOptions } from "lib/getToastOptions";
 import { AppProps } from "next/app";

components/plans/DraggableImageAdder.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Image } from "@chakra-ui/core";
+import { Box, Flex, Image } from "@chakra-ui/react";
 import { Trans } from "@lingui/macro";
 import WeaponImage from "components/common/WeaponImage";
 import { weapons } from "lib/lists/weapons";

components/plans/DraggableToolsSelector.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, IconButton } from "@chakra-ui/core";
+import { Box, Flex, IconButton } from "@chakra-ui/react";
 import { Trans } from "@lingui/macro";
 import ColorPicker from "components/common/ColorPicker";
 import { useMyTheme } from "lib/useMyTheme";

components/plans/MapSketch.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@chakra-ui/core";
+import { Box } from "@chakra-ui/react";
 import { SketchField } from "@sendou/react-sketch";
 import { Tool } from ".";
 

components/plans/StageSelector.tsx

@@ -1,4 +1,11 @@
-import { Box, HStack, Image, Radio, RadioGroup, Select } from "@chakra-ui/core";
+import {
+  Box,
+  HStack,
+  Image,
+  Radio,
+  RadioGroup,
+  Select,
+} from "@chakra-ui/react";
 import { t, Trans } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 import salmonRunHighTide from "assets/SalmonRunHighTide.svg";

components/plans/index.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, Flex } from "@chakra-ui/core";
+import { Button, ButtonGroup, Flex } from "@chakra-ui/react";
 import { t, Trans } from "@lingui/macro";
 import Breadcrumbs from "components/common/Breadcrumbs";
 import { stages } from "lib/lists/stages";

components/player/PlayerTable.tsx

@@ -1,4 +1,4 @@
-import { Text } from "@chakra-ui/core";
+import { Text } from "@chakra-ui/react";
 import ModeImage from "components/common/ModeImage";
 import {
   Table,

components/top500/Top500Table.tsx

@@ -1,4 +1,4 @@
-import { Text } from "@chakra-ui/core";
+import { Text } from "@chakra-ui/react";
 import { Trans } from "@lingui/macro";
 import {
   Table,

components/u/AvatarWithInfo.tsx

@@ -5,7 +5,7 @@ import {
   Heading,
   IconButton,
   Link as ChakraLink,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { Trans } from "@lingui/macro";
 import { RankedMode } from "@prisma/client";
 import ModeImage from "components/common/ModeImage";

components/u/ProfileModal.tsx

@@ -16,7 +16,7 @@ import {
   ModalOverlay,
   Select,
   useToast,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t, Trans } from "@lingui/macro";
 import { useLingui } from "@lingui/react";

lib/getToastOptions.ts

@@ -1,4 +1,4 @@
-import { UseToastOptions } from "@chakra-ui/core";
+import { UseToastOptions } from "@chakra-ui/react";
 
 export const getToastOptions = (
   description: NonNullable<UseToastOptions["description"]>,

lib/useMyTheme.ts

@@ -1,4 +1,4 @@
-import { useColorMode } from "@chakra-ui/core";
+import { useColorMode } from "@chakra-ui/react";
 import { theme } from "theme";
 
 // This hook can be deprecated

old/frontend-react/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.3.0-beta.6",
-    "@chakra-ui/core": "^1.0.0-rc.5",
+    "@chakra-ui/react": "^1.0.0-rc.5",
     "@reach/router": "^1.3.4",
     "@rehooks/local-storage": "^2.4.0",
     "@sendou/react-sketch": "^0.5.2",

old/frontend-react/src/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { Box, Flex, Heading, Image } from "@chakra-ui/core";
+import { Box, Flex, Heading, Image } from "@chakra-ui/react";
 import React from "react";
 import { AiOutlineReload } from "react-icons/ai";
 import errorGirl from "./assets/error_girl.png";

old/frontend-react/src/components/admin/AdminPage.tsx

@@ -1,10 +1,10 @@
 import { useQuery } from "@apollo/client";
-import { Box, Button, Flex, useToast } from "@chakra-ui/core";
+import { Box, Button, Flex, useToast } from "@chakra-ui/react";
 import { Redirect, RouteComponentProps } from "@reach/router";
 import React, { useState } from "react";
 import {
-  MutationUpdatePlayerIdArgs,
-  useUpdatePlayerIdMutation,
+    MutationUpdatePlayerIdArgs,
+    useUpdatePlayerIdMutation
 } from "../../generated/graphql";
 import { USER } from "../../graphql/queries/user";
 import { UserData } from "../../types";

old/frontend-react/src/components/admin/VotingManager.tsx

@@ -1,10 +1,10 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Box, Button, useToast } from "@chakra-ui/core";
+import { Box, Button, useToast } from "@chakra-ui/react";
 import React, { useState } from "react";
 import { END_VOTING } from "../../graphql/mutations/endVoting";
 import {
-  StartVotingVars,
-  START_VOTING,
+    StartVotingVars,
+    START_VOTING
 } from "../../graphql/mutations/startVoting";
 import { PlusInfoData, PLUS_INFO } from "../../graphql/queries/plusInfo";
 import Error from "../common/Error";

old/frontend-react/src/components/analyzer/BuildAnalyzerPage.tsx

@@ -1,12 +1,12 @@
 import {
-  Badge,
-  Box,
-  Button,
-  Flex,
-  FormLabel,
-  Switch,
-  Wrap,
-} from "@chakra-ui/core";
+    Badge,
+    Box,
+    Button,
+    Flex,
+    FormLabel,
+    Switch,
+    Wrap
+} from "@chakra-ui/react";
 import { RouteComponentProps, useLocation } from "@reach/router";
 import React, { useContext, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";

old/frontend-react/src/components/analyzer/BuildStats.tsx

@@ -1,12 +1,12 @@
 import {
-  Box,
-  Flex,
-  IconButton,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  Progress,
-} from "@chakra-ui/core";
+    Box,
+    Flex,
+    IconButton,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+    Progress
+} from "@chakra-ui/react";
 import React, { useContext, useState } from "react";
 import { FaChartLine, FaQuestion } from "react-icons/fa";
 import { Explanation } from "../../hooks/useAbilityEffects";

old/frontend-react/src/components/analyzer/EditableBuilds.tsx

@@ -1,19 +1,19 @@
-import { Box, Button, Flex, IconButton } from "@chakra-ui/core";
+import { Box, Button, Flex, IconButton } from "@chakra-ui/react";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { FiCopy, FiEdit, FiSquare } from "react-icons/fi";
 import {
-  Ability,
-  AnalyzerBuild,
-  ClothingOnlyAbility,
-  HeadOnlyAbility,
-  ShoesOnlyAbility,
-  StackableAbility,
+    Ability,
+    AnalyzerBuild,
+    ClothingOnlyAbility,
+    HeadOnlyAbility,
+    ShoesOnlyAbility,
+    StackableAbility
 } from "../../types";
 import {
-  clothingOnlyAbilities,
-  headOnlyAbilities,
-  shoesOnlyAbilities,
+    clothingOnlyAbilities,
+    headOnlyAbilities,
+    shoesOnlyAbilities
 } from "../../utils/lists";
 import ViewSlots from "../builds/ViewSlots";
 import AbilityButtons from "../user/AbilityButtons";

old/frontend-react/src/components/analyzer/HeadOnlyToggle.tsx

@@ -1,8 +1,8 @@
+import { Box, Flex, FormLabel, Switch } from "@chakra-ui/react";
 import React, { useContext } from "react";
-import { Box, Switch, FormLabel, Flex } from "@chakra-ui/core";
+import { useTranslation } from "react-i18next";
 import MyThemeContext from "../../themeContext";
 import AbilityIcon from "../builds/AbilityIcon";
-import { useTranslation } from "react-i18next";
 
 interface HeadOnlyToggleProps {
   ability: "OG" | "CB";

old/frontend-react/src/components/analyzer/LdeSlider.tsx

@@ -1,13 +1,13 @@
 import {
-  Box,
-  Flex,
-  NumberDecrementStepper,
-  NumberIncrementStepper,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-  Text,
-} from "@chakra-ui/core";
+    Box,
+    Flex,
+    NumberDecrementStepper,
+    NumberIncrementStepper,
+    NumberInput,
+    NumberInputField,
+    NumberInputStepper,
+    Text
+} from "@chakra-ui/react";
 import React, { useContext } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import MyThemeContext from "../../themeContext";

old/frontend-react/src/components/builds/AbilitySelector.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Flex } from "@chakra-ui/core";
+import { Box, Button, Flex } from "@chakra-ui/react";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaFilter } from "react-icons/fa";

old/frontend-react/src/components/builds/BuildCard.tsx

@@ -1,14 +1,14 @@
 import {
-  Box,
-  BoxProps,
-  Flex,
-  IconButton,
-  Image,
-  Popover,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
-} from "@chakra-ui/core";
+    Box,
+    BoxProps,
+    Flex,
+    IconButton,
+    Image,
+    Popover,
+    PopoverBody,
+    PopoverContent,
+    PopoverTrigger
+} from "@chakra-ui/react";
 import { Link } from "@reach/router";
 import React, { useContext, useEffect, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";

old/frontend-react/src/components/builds/BuildCardStats.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@chakra-ui/core";
+import { Button } from "@chakra-ui/react";
 import { Link } from "@reach/router";
 import React from "react";
 import { RiTShirtAirLine } from "react-icons/ri";

old/frontend-react/src/components/builds/BuildsPage.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Box, Button, Flex, FormLabel, Heading, Switch } from "@chakra-ui/core";
+import { Box, Button, Flex, FormLabel, Heading, Switch } from "@chakra-ui/react";
 import { RouteComponentProps } from "@reach/router";
 import useLocalStorage from "@rehooks/local-storage";
 import React, { useContext, useState } from "react";
@@ -13,7 +13,7 @@ import {
   Build,
   SearchForBuildsData,
   SearchForBuildsVars,
-  Weapon,
+  Weapon
 } from "../../types";
 import Error from "../common/Error";
 import Loading from "../common/Loading";

old/frontend-react/src/components/builds/GearImage.tsx

@@ -1,8 +1,8 @@
+import { Box } from "@chakra-ui/react";
 import React from "react";
-import { HeadGear, ClothingGear, ShoesGear } from "../../types";
-import english_internal from "../../utils/english_internal.json";
-import { Box } from "@chakra-ui/core";
 import { useTranslation } from "react-i18next";
+import { ClothingGear, HeadGear, ShoesGear } from "../../types";
+import english_internal from "../../utils/english_internal.json";
 
 interface GearImageProps {
   englishName?: HeadGear | ClothingGear | ShoesGear;

old/frontend-react/src/components/builds/Gears.tsx

@@ -1,7 +1,7 @@
+import { Box, Flex } from "@chakra-ui/react";
 import React from "react";
 import { Build } from "../../types";
 import GearImage from "./GearImage";
-import { Flex, Box } from "@chakra-ui/core";
 
 interface GearsProps {
   build: Build;

old/frontend-react/src/components/builds/ViewAP.tsx

@@ -1,13 +1,13 @@
 // This while is bit of a mess from TS PoV - might be worth while to do it better later
 
+import { Box, Flex } from "@chakra-ui/react";
 import React, { useContext } from "react";
-import { Build, Ability } from "../../types";
-import { Box, Flex } from "@chakra-ui/core";
+import { useTranslation } from "react-i18next";
+import MyThemeContext from "../../themeContext";
+import { Ability, Build } from "../../types";
+import { mainOnlyAbilities } from "../../utils/lists";
 import DividingBox from "../common/DividingBox";
 import AbilityIcon from "./AbilityIcon";
-import MyThemeContext from "../../themeContext";
-import { mainOnlyAbilities } from "../../utils/lists";
-import { useTranslation } from "react-i18next";
 
 interface ViewAPProps {
   build: Build;

old/frontend-react/src/components/builds/ViewSlots.tsx

@@ -1,7 +1,7 @@
+import { Box, BoxProps, Flex } from "@chakra-ui/react";
 import React from "react";
-import { Build, Ability } from "../../types";
+import { Ability, Build } from "../../types";
 import AbilityIcon from "./AbilityIcon";
-import { Flex, Box, BoxProps } from "@chakra-ui/core";
 
 interface ViewSlotsProps {
   build: Partial<Build>;

old/frontend-react/src/components/calendar/CalendarPage.tsx

@@ -1,12 +1,12 @@
 import { useQuery } from "@apollo/client";
-import { Box } from "@chakra-ui/core";
+import { Box } from "@chakra-ui/react";
 import { RouteComponentProps, useLocation } from "@reach/router";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { Trans, useTranslation } from "react-i18next";
 import {
-  UpcomingEventsData,
-  UPCOMING_EVENTS,
+    UpcomingEventsData,
+    UPCOMING_EVENTS
 } from "../../graphql/queries/upcomingEvents";
 import MyThemeContext from "../../themeContext";
 import { getWeek } from "../../utils/helperFunctions";

old/frontend-react/src/components/calendar/TournamentInfo.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Box, Flex, Heading, Image } from "@chakra-ui/core";
+import { Box, Flex, Heading, Image } from "@chakra-ui/react";
 import { Link } from "@reach/router";
 import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";

old/frontend-react/src/components/calendar/TournamentModal.tsx

@@ -1,26 +1,26 @@
 import { useMutation } from "@apollo/client";
 import {
-  Box,
-  Button,
-  Flex,
-  FormControl,
-  FormErrorMessage,
-  FormHelperText,
-  Image,
-  useToast,
-} from "@chakra-ui/core";
+    Box,
+    Button,
+    Flex,
+    FormControl,
+    FormErrorMessage,
+    FormHelperText,
+    Image,
+    useToast
+} from "@chakra-ui/react";
 import React, { useState } from "react";
 import {
-  DeleteCompetitiveFeedEventVars,
-  DELETE_COMPETITIVE_FEED_EVENT,
+    DeleteCompetitiveFeedEventVars,
+    DELETE_COMPETITIVE_FEED_EVENT
 } from "../../graphql/mutations/deleteCompetitiveFeedEvent";
 import {
-  UpdateCompetitiveFeedEventVars,
-  UPDATE_COMPETITIVE_FEED_EVENT,
+    UpdateCompetitiveFeedEventVars,
+    UPDATE_COMPETITIVE_FEED_EVENT
 } from "../../graphql/mutations/updateCompetitiveFeedEvent";
 import {
-  CompetitiveFeedEvent,
-  UPCOMING_EVENTS,
+    CompetitiveFeedEvent,
+    UPCOMING_EVENTS
 } from "../../graphql/queries/upcomingEvents";
 import DatePicker from "../elements/DatePicker";
 import Input from "../elements/Input";

old/frontend-react/src/components/common/DividingBox.tsx

@@ -1,5 +1,5 @@
+import { Box } from "@chakra-ui/react";
 import React, { useContext } from "react";
-import { Box } from "@chakra-ui/core";
 import MyThemeContext from "../../themeContext";
 
 interface DividingBoxProps {

old/frontend-react/src/components/common/FieldsetWithLegend.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@chakra-ui/core";
+import { Box } from "@chakra-ui/react";
 import React, { useContext } from "react";
 import MyThemeContext from "../../themeContext";
 

old/frontend-react/src/components/common/Loading.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useContext } from "react";
-import { Spinner, Box } from "@chakra-ui/core";
+import { Box, Spinner } from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
 import MyThemeContext from "../../themeContext";
 
 const Loading: React.FC = () => {

old/frontend-react/src/components/common/PageHeader.tsx

@@ -1,6 +1,5 @@
-import React from "react";
-import { Heading } from "@chakra-ui/core";
-import { useContext } from "react";
+import { Heading } from "@chakra-ui/react";
+import React, { useContext } from "react";
 import MyThemeContext from "../../themeContext";
 
 interface PageHeaderProps {

old/frontend-react/src/components/common/Pagination.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@chakra-ui/core";
+import { Button } from "@chakra-ui/react";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import ReactPaginate from "react-paginate";

old/frontend-react/src/components/common/Section.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps } from "@chakra-ui/core";
+import { Box, BoxProps } from "@chakra-ui/react";
 import React, { useContext } from "react";
 import MyThemeContext from "../../themeContext";
 

old/frontend-react/src/components/common/Table.tsx

@@ -1,6 +1,6 @@
 // https://github.com/chakra-ui/chakra-ui/issues/135#issuecomment-644878591
 
-import { Box, BoxProps } from "@chakra-ui/core";
+import { Box, BoxProps } from "@chakra-ui/react";
 import React, { useContext } from "react";
 import MyThemeContext from "../../themeContext";
 

old/frontend-react/src/components/common/UserAvatar.tsx

@@ -1,4 +1,4 @@
-import { Avatar, AvatarProps } from "@chakra-ui/core";
+import { Avatar, AvatarProps } from "@chakra-ui/react";
 import React, { useState } from "react";
 
 interface UserAvatarProps {

old/frontend-react/src/components/common/WeaponSelector.tsx

@@ -1,11 +1,11 @@
-import { Box, Flex } from "@chakra-ui/core";
+import { Box, Flex } from "@chakra-ui/react";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { components } from "react-select";
 import { Weapon } from "../../types";
 import {
-  weaponSelectOptions,
-  weaponSelectOptionsWithAlts,
+    weaponSelectOptions,
+    weaponSelectOptionsWithAlts
 } from "../../utils/lists";
 import Select from "../elements/Select";
 import WeaponImage from "./WeaponImage";

old/frontend-react/src/components/elements/Alert.tsx

@@ -1,9 +1,9 @@
 import {
-  Alert as ChakraAlert,
-  AlertIcon,
-  AlertProps as ChakraAlertProps,
-  CloseButton,
-} from "@chakra-ui/core";
+    Alert as ChakraAlert,
+    AlertIcon,
+    AlertProps as ChakraAlertProps,
+    CloseButton
+} from "@chakra-ui/react";
 import React from "react";
 
 interface AlertProps {

old/frontend-react/src/components/elements/DatePicker.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@chakra-ui/core";
+import { Button } from "@chakra-ui/react";
 import React, { forwardRef } from "react";
 import HackerOneDatePicker from "react-datepicker";
 import "react-datepicker/src/stylesheets/datepicker.scss";

old/frontend-react/src/components/elements/Emoji.tsx

@@ -1,14 +1,14 @@
+import { Image } from "@chakra-ui/react";
 import React from "react";
-import WeaponImage from "../common/WeaponImage";
-import { weaponCodes, abilityCodes, gearCodes } from "../../utils/lists";
-import AbilityIcon from "../builds/AbilityIcon";
-import GearImage from "../builds/GearImage";
+import cb from "../../assets/cb.png";
+import rm from "../../assets/rm.png";
 import sz from "../../assets/sz.png";
 import tc from "../../assets/tc.png";
-import rm from "../../assets/rm.png";
-import cb from "../../assets/cb.png";
 import tw from "../../assets/tw.png";
-import { Image } from "@chakra-ui/core";
+import { abilityCodes, gearCodes, weaponCodes } from "../../utils/lists";
+import AbilityIcon from "../builds/AbilityIcon";
+import GearImage from "../builds/GearImage";
+import WeaponImage from "../common/WeaponImage";
 
 const modeCodes: Record<string, string> = {
   turf_war: tw,

old/frontend-react/src/components/elements/IconButton.tsx

@@ -1,9 +1,8 @@
-import React from "react";
 import {
-  IconButton as ChakraIconButton,
-  IconButtonProps as ChakraIconButtonProps,
-} from "@chakra-ui/core";
-import { useContext } from "react";
+    IconButton as ChakraIconButton,
+    IconButtonProps as ChakraIconButtonProps
+} from "@chakra-ui/react";
+import React, { useContext } from "react";
 import MyThemeContext from "../../themeContext";
 
 interface IconButtonProps {

old/frontend-react/src/components/elements/Input.tsx

@@ -1,11 +1,11 @@
 import {
-  Box,
-  BoxProps,
-  Input as ChakraInput,
-  InputGroup,
-  InputLeftAddon,
-  InputLeftElement,
-} from "@chakra-ui/core";
+    Box,
+    BoxProps,
+    Input as ChakraInput,
+    InputGroup,
+    InputLeftAddon,
+    InputLeftElement
+} from "@chakra-ui/react";
 import React, { useContext } from "react";
 import { IconType } from "react-icons/lib/cjs";
 import MyThemeContext from "../../themeContext";

old/frontend-react/src/components/elements/Label.tsx

@@ -1,5 +1,5 @@
+import { Box } from "@chakra-ui/react";
 import React from "react";
-import { Box } from "@chakra-ui/core";
 
 interface LabelProps {
   required?: boolean;

old/frontend-react/src/components/elements/Markdown.tsx

@@ -1,25 +1,25 @@
 import {
-  Checkbox,
-  Code,
-  Divider,
-  Heading,
-  Image,
-  Link,
-  List,
-  ListItem,
-  Text,
-} from "@chakra-ui/core";
+    Checkbox,
+    Code,
+    Divider,
+    Heading,
+    Image,
+    Link,
+    List,
+    ListItem,
+    Text
+} from "@chakra-ui/react";
 import React, { useContext } from "react";
 import ReactMarkdown from "react-markdown";
 import reactStringReplace from "react-string-replace";
 import MyThemeContext from "../../themeContext";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
 } from "../common/Table";
 import Emoji from "./Emoji";
 

old/frontend-react/src/components/elements/Modal.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex } from "@chakra-ui/core";
+import { Box, Flex } from "@chakra-ui/react";
 import React, { useContext, useEffect } from "react";
 import { MdClose } from "react-icons/md";
 import useOnClickOutside from "use-onclickoutside";

old/frontend-react/src/components/elements/RadioGroup.tsx

@@ -1,10 +1,10 @@
-import React, { useContext } from "react";
 import {
-  RadioGroup as ChakraRadioGroup,
-  Radio,
-  Box,
-  Stack,
-} from "@chakra-ui/core";
+    Box, Radio, RadioGroup as ChakraRadioGroup,
+
+
+    Stack
+} from "@chakra-ui/react";
+import React, { useContext } from "react";
 import MyThemeContext from "../../themeContext";
 
 interface RadioGroupProps {

old/frontend-react/src/components/elements/Select.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@chakra-ui/core";
+import { Box } from "@chakra-ui/react";
 import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import ReactSelect, { GroupedOptionsType, OptionsType } from "react-select";

old/frontend-react/src/components/elements/TextArea.tsx

@@ -1,4 +1,4 @@
-import { Box, Textarea } from "@chakra-ui/core";
+import { Box, Textarea } from "@chakra-ui/react";
 import React, { useContext } from "react";
 import MyThemeContext from "../../themeContext";
 import Label from "./Label";

old/frontend-react/src/components/events/EventsPage.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Heading } from "@chakra-ui/core";
+import { Box, Button, Flex, Heading } from "@chakra-ui/react";
 import { RouteComponentProps } from "@reach/router";
 import React, { useState } from "react";
 import InTheZoneBanner from "./InTheZoneBanner";

old/frontend-react/src/components/events/InTheZoneBanner.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex } from "@chakra-ui/core";
+import { Box, Flex } from "@chakra-ui/react";
 import React from "react";
 
 //https://stackoverflow.com/a/19303725

old/frontend-react/src/components/freeagents/FAPostModal.tsx

@@ -1,23 +1,23 @@
 import { useMutation } from "@apollo/client";
 import {
-  Box,
-  Button,
-  Checkbox,
-  CheckboxGroup,
-  Flex,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Radio,
-  RadioGroup,
-  Stack,
-  useToast,
-} from "@chakra-ui/core";
+    Box,
+    Button,
+    Checkbox,
+    CheckboxGroup,
+    Flex,
+    FormControl,
+    FormErrorMessage,
+    FormLabel,
+    Radio,
+    RadioGroup,
+    Stack,
+    useToast
+} from "@chakra-ui/react";
 import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
-  AddFreeAgentPostVars,
-  ADD_FREE_AGENT_POST,
+    AddFreeAgentPostVars,
+    ADD_FREE_AGENT_POST
 } from "../../graphql/mutations/addFreeAgentPost";
 import { HIDE_FREE_AGENT_POST } from "../../graphql/mutations/hideFreeAgentPost";
 import { UPDATE_FREE_AGENT_POST } from "../../graphql/mutations/updateFreeAgentPost";

old/frontend-react/src/components/freeagents/FreeAgentCard.tsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Box, Flex, Heading, IconButton, Image } from "@chakra-ui/core";
+import { Box, Flex, Heading, IconButton, Image } from "@chakra-ui/react";
 import { Link } from "@reach/router";
 import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";

old/frontend-react/src/components/freeagents/FreeAgentsPage.tsx

@@ -1,21 +1,21 @@
 import { useQuery } from "@apollo/client";
-import { Box, Button, Collapse, Flex } from "@chakra-ui/core";
+import { Box, Button, Collapse, Flex } from "@chakra-ui/react";
 import { RouteComponentProps } from "@reach/router";
 import React, { useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import { FaFilter } from "react-icons/fa";
 import {
-  FreeAgentMatchesData,
-  FREE_AGENT_MATCHES,
+    FreeAgentMatchesData,
+    FREE_AGENT_MATCHES
 } from "../../graphql/queries/freeAgentMatches";
 import { FREE_AGENT_POSTS } from "../../graphql/queries/freeAgentPosts";
 import { USER } from "../../graphql/queries/user";
 import {
-  FreeAgentPost,
-  FreeAgentPostsData,
-  UserData,
-  Weapon,
+    FreeAgentPost,
+    FreeAgentPostsData,
+    UserData,
+    Weapon
 } from "../../types";
 import { continents } from "../../utils/lists";
 import Error from "../common/Error";

old/frontend-react/src/components/freeagents/Heart.tsx

@@ -1,8 +1,8 @@
+import { Flex, Popover, PopoverContent, PopoverTrigger } from "@chakra-ui/react";
 import React, { useContext } from "react";
-import IconButton from "../elements/IconButton";
-import { FaRegHeart, FaHeart } from "react-icons/fa";
-import { Popover, PopoverTrigger, PopoverContent, Flex } from "@chakra-ui/core";
+import { FaHeart, FaRegHeart } from "react-icons/fa";
 import MyThemeContext from "../../themeContext";
+import IconButton from "../elements/IconButton";
 
 interface HeartProps {
   disabled: boolean;

old/frontend-react/src/components/freeagents/Matches.tsx

@@ -1,18 +1,16 @@
-import React, { useContext } from "react";
-import FieldsetWithLegend from "../common/FieldsetWithLegend";
 import {
-  Flex,
-  Box,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverArrow,
-  AvatarGroup,
-  Avatar,
-} from "@chakra-ui/core";
-import UserAvatar from "../common/UserAvatar";
+    Avatar, AvatarGroup, Box, Flex,
+
+    Popover,
+
+
+    PopoverArrow, PopoverContent, PopoverTrigger
+} from "@chakra-ui/react";
+import React, { useContext } from "react";
+import { Trans, useTranslation } from "react-i18next";
 import MyThemeContext from "../../themeContext";
-import { useTranslation, Trans } from "react-i18next";
+import FieldsetWithLegend from "../common/FieldsetWithLegend";
+import UserAvatar from "../common/UserAvatar";
 
 interface MatchesProps {
   matches: {

old/frontend-react/src/components/freeagents/Posts.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Grid, Heading } from "@chakra-ui/core";
+import { Box, Button, Grid, Heading } from "@chakra-ui/react";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import InfiniteScroll from "react-infinite-scroller";

old/frontend-react/src/components/freeagents/RoleIcons.tsx

@@ -1,7 +1,7 @@
+import { Box, Flex } from "@chakra-ui/react";
 import React from "react";
-import { Flex, Box } from "@chakra-ui/core";
-import { FaCrosshairs, FaBriefcaseMedical, FaAnchor } from "react-icons/fa";
 import { useTranslation } from "react-i18next";
+import { FaAnchor, FaBriefcaseMedical, FaCrosshairs } from "react-icons/fa";
 
 interface RoleIconsProps {
   playstyles: ("FRONTLINE" | "MIDLINE" | "BACKLINE")[];

old/frontend-react/src/components/freeagents/VCIcon.tsx

@@ -1,7 +1,7 @@
+import { Box } from "@chakra-ui/react";
 import React from "react";
-import { Box } from "@chakra-ui/core";
-import { FaMicrophone } from "react-icons/fa";
 import { useTranslation } from "react-i18next";
+import { FaMicrophone } from "react-icons/fa";
 
 interface VCIconProps {
   canVC: "YES" | "USUALLY" | "SOMETIMES" | "NO";

old/frontend-react/src/components/home/HomePage.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Heading, Image } from "@chakra-ui/core";
+import { Box, Button, Flex, Heading, Image } from "@chakra-ui/react";
 import { RouteComponentProps } from "@reach/router";
 import React, { useContext } from "react";
 import { Helmet } from "react-helmet-async";

old/frontend-react/src/components/home/Stats.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Box, Flex, Skeleton } from "@chakra-ui/core";
+import { Box, Flex, Skeleton } from "@chakra-ui/react";
 import { Link } from "@reach/router";
 import React, { useContext } from "react";
 import { Trans, useTranslation } from "react-i18next";

old/frontend-react/src/components/home/WeeksTournaments.tsx

@@ -1,12 +1,12 @@
 import { useQuery } from "@apollo/client";
-import { Box, Button, Flex, Heading } from "@chakra-ui/core";
+import { Box, Button, Flex, Heading } from "@chakra-ui/react";
 import { Link } from "@reach/router";
 import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { FiClock, FiInfo } from "react-icons/fi";
 import {
-  UpcomingEventsData,
-  UPCOMING_EVENTS,
+    UpcomingEventsData,
+    UPCOMING_EVENTS
 } from "../../graphql/queries/upcomingEvents";
 import MyThemeContext from "../../themeContext";
 import { getWeek } from "../../utils/helperFunctions";

old/frontend-react/src/components/markdown/MarkdownHelpPage.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Collapse, Flex, Link } from "@chakra-ui/core";
+import { Box, Button, Collapse, Flex, Link } from "@chakra-ui/react";
 import { RouteComponentProps } from "@reach/router";
 import React, { useContext, useState } from "react";
 import MyThemeContext from "../../themeContext";

old/frontend-react/src/components/plans/DraggableToolsSelector.tsx

@@ -1,30 +1,34 @@
-import React, { useState, useContext } from "react";
-import Draggable from "react-draggable";
+import {
+    Box,
+    Flex,
+    IconButton,
+    Popover,
+
+
+    PopoverBody, PopoverContent, PopoverTrigger
+} from "@chakra-ui/react";
 import { Tools } from "@sendou/react-sketch";
-import { useHotkeys } from "react-hotkeys-hook";
-import {
-  Box,
-  Flex,
-  IconButton,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
-} from "@chakra-ui/core";
-import {
-  FaPencilAlt,
-  FaRegSquare,
-  FaRegCircle,
-  FaRegObjectGroup,
-  FaTrashAlt,
-  FaRedo,
-  FaUndo,
-  FaFont,
-} from "react-icons/fa";
-import { AiOutlineLine } from "react-icons/ai";
-import MyThemeContext from "../../themeContext";
+import React, { useContext, useState } from "react";
 import { CirclePicker, ColorResult } from "react-color";
+import Draggable from "react-draggable";
+import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
+import { AiOutlineLine } from "react-icons/ai";
+import {
+    FaFont, FaPencilAlt,
+
+
+
+
+    FaRedo, FaRegCircle,
+    FaRegObjectGroup, FaRegSquare,
+
+
+    FaTrashAlt,
+
+    FaUndo
+} from "react-icons/fa";
+import MyThemeContext from "../../themeContext";
 
 interface PlannerColorPickerProps {
   color: string;

old/frontend-react/src/components/plans/DraggableWeaponSelector.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex } from "@chakra-ui/core";
+import { Box, Flex } from "@chakra-ui/react";
 import React, { useContext, useState } from "react";
 import Draggable from "react-draggable";
 import { useTranslation } from "react-i18next";

old/frontend-react/src/components/plans/MapPlannerPage.tsx

@@ -1,14 +1,14 @@
-import { Box, Button, Flex } from "@chakra-ui/core";
+import { Box, Button, Flex } from "@chakra-ui/react";
 import { RouteComponentProps } from "@reach/router";
 import { SketchField, Tools } from "@sendou/react-sketch";
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import {
-  FaBomb,
-  FaFileDownload,
-  FaFileImage,
-  FaFileUpload,
+    FaBomb,
+    FaFileDownload,
+    FaFileImage,
+    FaFileUpload
 } from "react-icons/fa";
 import useBreakPoints from "../../hooks/useBreakPoints";
 import { Stage, Weapon } from "../../types";

old/frontend-react/src/components/plans/MapSelect.tsx

@@ -1,10 +1,10 @@
-import { Flex, FormLabel, Switch } from "@chakra-ui/core";
+import { Flex, FormLabel, Switch } from "@chakra-ui/react";
 import React, { useContext } from "react";
+import { useTranslation } from "react-i18next";
 import MyThemeContext from "../../themeContext";
 import Select from "../elements/Select";
 import ModeButtons from "../xtrends/ModeButtons";
 import { PlannerMapBg } from "./MapPlannerPage";
-import { useTranslation } from "react-i18next";
 
 interface MapSelectProps {
   bg: PlannerMapBg;

old/frontend-react/src/components/plus/PersonForVoting.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Grid } from "@chakra-ui/core";
+import { Box, Button, Flex, Grid } from "@chakra-ui/react";
 import React, { useContext, useState } from "react";
 import MyThemeContext from "../../themeContext";
 import { months } from "../../utils/lists";

old/frontend-react/src/components/plus/PlusFAQPage.tsx

@@ -1,12 +1,12 @@
 import {
-  Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Box,
-  Link,
-} from "@chakra-ui/core";
+    Accordion,
+    AccordionButton,
+    AccordionIcon,
+    AccordionItem,
+    AccordionPanel,
+    Box,
+    Link
+} from "@chakra-ui/react";
 import { RouteComponentProps } from "@reach/router";
 import React, { useContext } from "react";
 import { Helmet } from "react-helmet-async";

old/frontend-react/src/components/plus/SuggestionVouchModal.tsx

@@ -1,17 +1,17 @@
 import { useMutation } from "@apollo/client";
 import {
-  Box,
-  Button,
-  Flex,
-  FormControl,
-  FormErrorMessage,
-  FormHelperText,
-  FormLabel,
-  Radio,
-  RadioGroup,
-  Stack,
-  useToast,
-} from "@chakra-ui/core";
+    Box,
+    Button,
+    Flex,
+    FormControl,
+    FormErrorMessage,
+    FormHelperText,
+    FormLabel,
+    Radio,
+    RadioGroup,
+    Stack,
+    useToast
+} from "@chakra-ui/react";
 import React, { useContext, useState } from "react";
 import { ADD_SUGGESTION } from "../../graphql/mutations/addSuggestion";
 import { ADD_VOUCH } from "../../graphql/mutations/addVouch";

old/frontend-react/src/components/plus/Suggestions.tsx

@@ -1,12 +1,12 @@
 import { useQuery } from "@apollo/client";
-import { Badge, Box, Button, Divider, Flex, Grid } from "@chakra-ui/core";
+import { Badge, Box, Button, Divider, Flex, Grid } from "@chakra-ui/react";
 import { Link } from "@reach/router";
 import React, { useContext, useState } from "react";
 import { PlusInfoData, PLUS_INFO } from "../../graphql/queries/plusInfo";
 import {
-  Suggestion,
-  SUGGESTIONS,
-  SuggestionsData,
+    Suggestion,
+    SUGGESTIONS,
+    SuggestionsData
 } from "../../graphql/queries/suggestions";
 import { USER } from "../../graphql/queries/user";
 import { VOUCHES } from "../../graphql/queries/vouches";

old/frontend-react/src/components/plus/Summaries.tsx

@@ -1,21 +1,25 @@
+import {
+    Box,
+
+    Flex, Grid, Heading,
+
+
+
+
+
+    IconButton, Popover,
+
+
+
+    PopoverArrow,
+    PopoverBody, PopoverContent, PopoverTrigger
+} from "@chakra-ui/react";
+import { Link } from "@reach/router";
 import React, { useContext } from "react";
+import { FaBolt } from "react-icons/fa";
+import MyThemeContext from "../../themeContext";
 import UserAvatar from "../common/UserAvatar";
 import { Summary } from "./VotingHistoryPage";
-import {
-  Heading,
-  Box,
-  Grid,
-  Flex,
-  Popover,
-  PopoverTrigger,
-  IconButton,
-  PopoverContent,
-  PopoverArrow,
-  PopoverBody,
-} from "@chakra-ui/core";
-import { Link } from "@reach/router";
-import MyThemeContext from "../../themeContext";
-import { FaBolt } from "react-icons/fa";
 
 const getColor = (score: number) =>
   score < 50 ? { color: "red" } : { color: "green" };

old/frontend-react/src/components/plus/VotingHistoryPage.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Box, Flex } from "@chakra-ui/core";
+import { Box, Flex } from "@chakra-ui/react";
 import { RouteComponentProps } from "@reach/router";
 import React, { useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";

old/frontend-react/src/components/plus/VotingPage.tsx

@@ -1,14 +1,14 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Box, Button, Flex, Progress, useToast } from "@chakra-ui/core";
+import { Box, Button, Flex, Progress, useToast } from "@chakra-ui/react";
 import { Redirect, RouteComponentProps } from "@reach/router";
 import React, { useContext, useEffect, useState } from "react";
 import { AddVotesVars, ADD_VOTES } from "../../graphql/mutations/addVotes";
 import { PlusInfoData, PLUS_INFO } from "../../graphql/queries/plusInfo";
 import { USER } from "../../graphql/queries/user";
 import {
-  UsersForVotingData,
-  USERS_FOR_VOTING,
-  VotingSuggested,
+    UsersForVotingData,
+    USERS_FOR_VOTING,
+    VotingSuggested
 } from "../../graphql/queries/usersForVoting";
 import MyThemeContext from "../../themeContext";
 import { UserData } from "../../types";

old/frontend-react/src/components/plusdraftcup/DraftCupDetails.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Avatar, Box, Button, Flex, Grid } from "@chakra-ui/core";
+import { Avatar, Box, Button, Flex, Grid } from "@chakra-ui/react";
 import { Link, RouteComponentProps } from "@reach/router";
 import React, { useContext, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
@@ -8,17 +8,17 @@ import { FaExternalLinkAlt, FaLongArrowAltLeft } from "react-icons/fa";
 import { modeIconMap } from "../../assets/icons";
 import { mapIcons } from "../../assets/imageImports";
 import {
-  SearchForDraftCupData,
-  SearchForDraftCupVars,
-  SEARCH_FOR_DRAFT_CUP,
+    SearchForDraftCupData,
+    SearchForDraftCupVars,
+    SEARCH_FOR_DRAFT_CUP
 } from "../../graphql/queries/searchForDraftCup";
 import MyThemeContext from "../../themeContext";
 import {
-  Ability,
-  ClothingGear,
-  DetailedTeamInfo,
-  HeadGear,
-  ShoesGear,
+    Ability,
+    ClothingGear,
+    DetailedTeamInfo,
+    HeadGear,
+    ShoesGear
 } from "../../types";
 import AbilityIcon from "../builds/AbilityIcon";
 import GearImage from "../builds/GearImage";

old/frontend-react/src/components/plusdraftcup/DraftCupPage.tsx

@@ -1,12 +1,12 @@
 import { useQuery } from "@apollo/client";
-import { Box } from "@chakra-ui/core";
+import { Box } from "@chakra-ui/react";
 import { RouteComponentProps } from "@reach/router";
 import React, { useContext } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import {
-  PlusDraftCupsData,
-  PLUS_DRAFT_CUPS,
+    PlusDraftCupsData,
+    PLUS_DRAFT_CUPS
 } from "../../graphql/queries/plusDraftCups";
 import MyThemeContext from "../../themeContext";
 import Error from "../common/Error";