remove chakra factory

components/layout/HeaderBanner.tsx

@@ -1,6 +1,5 @@
 import Image from "next/image";
-import { Flex } from "@chakra-ui/layout";
-import { chakra } from "@chakra-ui/system";
+import { Box, Flex } from "@chakra-ui/layout";
 import { useMyTheme } from "hooks/common";
 
 const HeaderBanner = ({
@@ -24,7 +23,7 @@ const HeaderBanner = ({
       mb={2}
       h={12}
     >
-      <chakra.div mt={isTASL ? "-0.5rem" : "-1rem"}>
+      <Box mt={isTASL ? "-0.5rem" : "-1rem"}>
         <Image
           src={`/layout/${icon}.png`}
           height={isTASL ? 60 : 80}
@@ -32,13 +31,21 @@ const HeaderBanner = ({
           alt={`${icon} logo`}
           priority={true}
         />
-      </chakra.div>
-      <chakra.span fontSize="lg" mr={2} mb={6} mt={3} ml={2} fontWeight="bold">
+      </Box>
+      <Box
+        as="span"
+        fontSize="lg"
+        mr={2}
+        mb={6}
+        mt={3}
+        ml={2}
+        fontWeight="bold"
+      >
         {title}
-      </chakra.span>
-      <chakra.span mt="16px" fontSize="sm" color={gray}>
+      </Box>
+      <Box as="span" mt="16px" fontSize="sm" color={gray}>
         {subtitle}
-      </chakra.span>
+      </Box>
     </Flex>
   );
 };

components/plus/PlusHomePage.tsx

@@ -3,7 +3,6 @@ import {
   Alert,
   AlertDescription,
   AlertTitle,
-  chakra,
   Radio,
   RadioGroup,
 } from "@chakra-ui/react";
@@ -66,24 +65,24 @@ const PlusHomePage = ({ suggestions, statuses }: PlusHomePageProps) => {
                 Vouching status
               </AlertTitle>
               {plusStatusData?.canVouchAgainAfter && (
-                <chakra.div>
+                <Box>
                   Can vouch again after:{" "}
                   {new Date(
                     plusStatusData.canVouchAgainAfter
                   ).toLocaleDateString()}
-                </chakra.div>
+                </Box>
               )}
               {plusStatusData?.voucher && (
-                <chakra.div>
+                <Box>
                   Vouched for <b>+{plusStatusData.vouchTier}</b> by{" "}
                   {getFullUsername(plusStatusData.voucher)}
-                </chakra.div>
+                </Box>
               )}
               {vouchedPlusStatusData && (
-                <chakra.div>
+                <Box>
                   Vouched {getFullUsername(vouchedPlusStatusData.user)} to{" "}
                   <b>+{vouchedPlusStatusData.vouchTier}</b>
-                </chakra.div>
+                </Box>
               )}
             </AlertDescription>
           </Alert>

components/plus/PlusVotingHistoryPage.tsx

@@ -18,7 +18,6 @@ import {
 } from "../../services/plus";
 import { Select } from "@chakra-ui/select";
 import { useRouter } from "next/router";
-import { chakra } from "@chakra-ui/system";
 
 export interface PlusVotingHistoryPageProps {
   summaries: VotingSummariesByMonthAndTier;
@@ -97,13 +96,14 @@ const PlusVotingHistoryPage = ({
                 <TableCell>
                   {getCount("NA", summary.countsNA).map((count, i, arr) => (
                     <>
-                      <chakra.span
+                      <Box
+                        as="span"
                         color={
                           i + 1 <= arr.length / 2 ? "red.500" : "green.500"
                         }
                       >
                         {count}
-                      </chakra.span>
+                      </Box>
                       {i !== arr.length - 1 && <>/</>}
                     </>
                   ))}
@@ -111,13 +111,14 @@ const PlusVotingHistoryPage = ({
                 <TableCell>
                   {getCount("EU", summary.countsEU).map((count, i, arr) => (
                     <>
-                      <chakra.span
+                      <Box
+                        as="span"
                         color={
                           i + 1 <= arr.length / 2 ? "red.500" : "green.500"
                         }
                       >
                         {count}
-                      </chakra.span>
+                      </Box>
                       {i !== arr.length - 1 && <>/</>}
                     </>
                   ))}