chakra v1 upgrade

components/about/aboutUsSection.js

@@ -1,4 +1,4 @@
-import { Box, Text, List, ListItem } from '@chakra-ui/core'
+import { Box, Text, List, ListItem } from '@chakra-ui/react'
 
 import Section from '../common/section'
 import UnderlinedHeading from '../common/underlinedHeading'

components/about/contactForm.js

@@ -7,7 +7,7 @@ import {
   Textarea,
   Alert,
   AlertIcon
-} from '@chakra-ui/core'
+} from '@chakra-ui/react'
 
 import { useState } from 'react'
 import PropTypes from 'prop-types'

components/about/contactSection.js

@@ -1,4 +1,4 @@
-import { Box, Text } from '@chakra-ui/core'
+import { Box, Text } from '@chakra-ui/react'
 import { useState } from 'react'
 
 import Section from '../common/section'

components/common/authProcess.js

@@ -1,15 +1,14 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
 
 import {
   Box,
   Flex,
   Text,
-  Icon,
   Input,
   Heading,
   FormControl,
   FormLabel
-} from '@chakra-ui/core'
+} from '@chakra-ui/react'
 
 import { useForm } from 'react-hook-form'
 
@@ -23,6 +22,7 @@ import ErrorMessage from './errorMessage'
 import GitHubLoginButton from './githubButton'
 
 import styles from './authProcess.module.scss'
+import CustomIconWrapper from './customIconWrapper'
 
 const AuthProcess = ({
   process,
@@ -192,7 +192,11 @@ const AuthProcess = ({
           justify='space-between'
           aria-live='polite'
         >
-          <Icon name={icon} size='6rem' marginBottom='1.5rem' />
+          <CustomIconWrapper
+            icon={icon}
+            boxSize='6rem'
+            marginBottom='1.5rem'
+          />
           <Heading
             as='h1'
             fontSize='2rem'

components/common/banner.js

@@ -1,8 +1,8 @@
 import {
   Flex,
-  Icon,
   CloseButton
-} from '@chakra-ui/core'
+} from '@chakra-ui/react'
+import CustomIconWrapper from './customIconWrapper'
 
 const Banner = ({ icon, children, onCloseClick }) => {
   return (
@@ -20,9 +20,9 @@ const Banner = ({ icon, children, onCloseClick }) => {
       borderColor='ocean'
       borderBottom='1px'
     >
-      <Icon
-        name={icon}
-        size={{ base: '2rem', md: '3rem' }}
+      <CustomIconWrapper
+        icon={icon}
+        boxSize={{ base: '2rem', md: '3rem' }}
         marginRight={{ base: 0, md: '1.5rem' }}
         marginBottom={{ base: '1.5rem', md: 0 }}
       />

components/common/button.js

@@ -1,6 +1,6 @@
 import {
   Button
-} from '@chakra-ui/core'
+} from '@chakra-ui/react'
 
 const FBButton = (props) => {
   return (

components/common/card.js

@@ -1,5 +1,5 @@
 // White card with a box shadow used for forms, select plans, install instuctions, etc.
-import { Box } from '@chakra-ui/core'
+import { Box } from '@chakra-ui/react'
 import PropTypes from 'prop-types'
 
 const shadowSizes = {

components/common/customIconWrapper.js

@@ -0,0 +1,17 @@
+import { createIcon } from '@chakra-ui/icons'
+import React from 'react'
+
+import icons from '../../public/icons'
+
+const CustomIconWrapper = ({ icon, ...props }) => {
+  if (!icon || !icons[icon]) {
+    return null
+  }
+
+  return React.createElement(
+    createIcon(icons[icon]),
+    props
+  )
+}
+
+export default CustomIconWrapper

components/common/divider.js

@@ -1,4 +1,4 @@
-import { Box } from '@chakra-ui/core'
+import { Box } from '@chakra-ui/react'
 
 const Divider = (props) => (
   <Box

components/common/errorMessage.js

@@ -1,4 +1,4 @@
-import { Alert, AlertIcon } from '@chakra-ui/core'
+import { Alert, AlertIcon } from '@chakra-ui/react'
 
 const ErrorMessage = ({ msg, iconSize, children, ...props }) => (
   <Alert
@@ -15,7 +15,7 @@ const ErrorMessage = ({ msg, iconSize, children, ...props }) => (
   >
     <AlertIcon
       color='#b9423a'
-      size={iconSize || '1.5rem'}
+      boxSize={iconSize || '1.5rem'}
       marginBottom={{ base: '1rem', md: 0 }}
     />
     <span>

components/common/faqHeading.js

@@ -1,4 +1,4 @@
-import { Heading } from '@chakra-ui/core'
+import { Heading } from '@chakra-ui/react'
 
 // used for FAQ and How it Works page
 const FAQHeading = ({ children, ...props }) => (

components/common/fbButton.js

@@ -1,4 +1,4 @@
-import { Button } from '@chakra-ui/core'
+import { Button } from '@chakra-ui/react'
 import { defaultProps } from '../../utils/defaultBtnProps'
 import PropTypes from 'prop-types'
 

components/common/fbTextInput.js

@@ -1,4 +1,4 @@
-import { Input } from '@chakra-ui/core'
+import { Input } from '@chakra-ui/react'
 
 const FBTextInput = ({ id, type, register, ...props }) => (
   <Input

components/common/footer.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useAuth } from '../../utils/useAuth'
 
-import { Flex, List, ListItem, Text, Box } from '@chakra-ui/core'
+import { Flex, List, ListItem, Text, Box } from '@chakra-ui/react'
 
 import TextLink from './textLink'
 import styles from './footer.module.scss'

components/common/githubButton.js

@@ -1,4 +1,4 @@
-import { Button, Image, Link } from '@chakra-ui/core'
+import { Button, Image, Link } from '@chakra-ui/react'
 import { defaultProps } from '../../utils/defaultBtnProps'
 import { useLocalStorage } from '../../utils/useLocalStorage'
 import { localStorageGHStateKey } from '../../utils/constants'

components/common/header/authNav.js

@@ -7,12 +7,20 @@ import {
   useTheme,
   Box,
   Button,
-  Icon,
   Menu,
   MenuButton,
   MenuList,
   MenuItem
-} from '@chakra-ui/core'
+} from '@chakra-ui/react'
+import CustomIconWrapper from '../customIconWrapper'
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  QuestionIcon,
+  InfoIcon,
+  SettingsIcon,
+  UnlockIcon
+} from '@chakra-ui/icons'
 
 const AuthNav = ({ user, onLogout }) => {
   const router = useRouter()
@@ -76,11 +84,9 @@ const AuthNav = ({ user, onLogout }) => {
             >
               {user.email.charAt(0)}
             </Box>
-            <Icon
-              name={isExpanded ? 'chevron-up' : 'chevron-down'}
-              marginLeft='.5rem'
-              size='1.5rem'
-            />
+            {isExpanded
+              ? <ChevronUpIcon marginLeft='0.5rem' boxSize='1.5rem' />
+              : <ChevronDownIcon marginLeft='0.5rem' boxSize='1.5rem' />}
           </MenuButton>
           <MenuList backgroundColor='lightRock'>
             <MenuItem
@@ -91,7 +97,7 @@ const AuthNav = ({ user, onLogout }) => {
               <Link href='/dashboard'>
                 <a>
                   <Box as='span' display='flex' alignItems='center'>
-                    <Icon name='home' marginRight='.5rem' />
+                    <CustomIconWrapper icon='home' marginRight='.5rem' />
                     <span>Dashboard</span>
                   </Box>
                 </a>
@@ -105,7 +111,7 @@ const AuthNav = ({ user, onLogout }) => {
               <Link href='/faq'>
                 <a>
                   <Box as='span' display='flex' alignItems='center'>
-                    <Icon name='question' marginRight='.5rem' />
+                    <QuestionIcon marginRight='.5rem' />
                     <span>FAQ</span>
                   </Box>
                 </a>
@@ -119,7 +125,7 @@ const AuthNav = ({ user, onLogout }) => {
               <Link href='/how-it-works'>
                 <a>
                   <Box as='span' display='flex' alignItems='center'>
-                    <Icon name='info' marginRight='.5rem' />
+                    <InfoIcon marginRight='.5rem' />
                     <span>How it works</span>
                   </Box>
                 </a>
@@ -133,7 +139,7 @@ const AuthNav = ({ user, onLogout }) => {
               <Link href='/user/settings'>
                 <a>
                   <Box as='span' display='flex' alignItems='center'>
-                    <Icon name='settings' marginRight='.5rem' />
+                    <SettingsIcon marginRight='.5rem' />
                     <span>Settings</span>
                   </Box>
                 </a>
@@ -147,7 +153,7 @@ const AuthNav = ({ user, onLogout }) => {
               <Link href='/'>
                 <a>
                   <Box as='span' display='flex' alignItems='center'>
-                    <Icon name='unlock' marginRight='.5rem' />
+                    <UnlockIcon marginRight='.5rem' />
                     <span>Log out</span>
                   </Box>
                 </a>

components/common/header/header.js

@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router'
 import { useAuth } from '../../../utils/useAuth'
 
-import { Box, Flex } from '@chakra-ui/core'
+import { Box, Flex } from '@chakra-ui/react'
 
 import LinkBtn from '../linkBtn'
 import TextLink from '../textLink'

components/common/header/logo.js

@@ -1,4 +1,4 @@
-import { Link as ChakraLink, Box } from '@chakra-ui/core'
+import { Link as ChakraLink, Box } from '@chakra-ui/react'
 import Link from 'next/link'
 import FullLogo from './fullLogo'
 import FBLogoLetters from './logoLetters'

components/common/header/logoLetters.js

@@ -1,4 +1,4 @@
-import { Flex } from '@chakra-ui/core'
+import { Flex } from '@chakra-ui/react'
 import PropTypes from 'prop-types'
 
 const FBLogoLetters = ({ id, ...props }) => {

components/common/linkBtn.js

@@ -1,17 +1,17 @@
-import { PseudoBox } from '@chakra-ui/core'
+import { Box } from '@chakra-ui/react'
 import { defaultProps } from '../../utils/defaultBtnProps'
 import PropTypes from 'prop-types'
 
 const LinkBtn = ({ children, external, ...props }) => (
   <>
     {!external ? (
-      <PseudoBox as='a' display='inline-block' {...props}>
+      <Box as='a' display='inline-block' {...props}>
         {children}
-      </PseudoBox>
+      </Box>
     ) : (
-      <PseudoBox as='a' target='_blank' display='inline-block' {...props}>
+      <Box as='a' target='_blank' display='inline-block' {...props}>
         {children}
-      </PseudoBox>
+      </Box>
     )}
   </>
 )

components/common/pageWrapper.js

@@ -1,4 +1,4 @@
-import { PseudoBox, Flex } from '@chakra-ui/core'
+import { Box, Flex } from '@chakra-ui/react'
 
 import PropTypes from 'prop-types'
 import FBHead from './head'
@@ -21,7 +21,7 @@ const PageWrapper = (props) => (
     <SkipLink />
     <Flex direction='column' minH='100vh'>
       <Header />
-      <PseudoBox
+      <Box
         as='main'
         id='main-content'
         tabIndex='-1'
@@ -34,7 +34,7 @@ const PageWrapper = (props) => (
         }}
       >
         {props.children}
-      </PseudoBox>
+      </Box>
       <Footer />
     </Flex>
   </>

components/common/section.js

@@ -1,4 +1,4 @@
-import { Box } from '@chakra-ui/core'
+import { Box } from '@chakra-ui/react'
 
 const Section = ({ backgroundColor, children, ...props }) => (
   <Box

components/common/stepper.js

@@ -1,5 +1,6 @@
-import { Box, Text, PseudoBox, List, ListItem, Icon } from '@chakra-ui/core'
+import { Box, Text, List, ListItem } from '@chakra-ui/react'
 import PropTypes from 'prop-types'
+import CustomIconWrapper from './customIconWrapper'
 
 const iconHeight = 2
 const bgHeight = 0.25
@@ -20,9 +21,9 @@ const barBg = {
 const Step = ({ step, i, currentStep }) => (
   <ListItem textAlign='center' fontSize='0.875rem'>
     <>
-      <Icon
-        name={step.iconName}
-        size={`${iconHeight}rem`}
+      <CustomIconWrapper
+        icon={step.iconName}
+        boxSize={`${iconHeight}rem`}
         marginBottom='1rem'
       />
       <Text aria-current={i + 1 === currentStep ? 'step' : 'false'}>
@@ -41,7 +42,7 @@ const Step = ({ step, i, currentStep }) => (
 )
 
 const Stepper = ({ steps, currentStep = 2 }) => (
-  <PseudoBox
+  <Box
     display='flex'
     justifyItems='center'
     position='relative'
@@ -71,7 +72,7 @@ const Stepper = ({ steps, currentStep = 2 }) => (
         <Step key={i} step={stepData} i={i} currentStep={currentStep} />
       ))}
     </List>
-  </PseudoBox>
+  </Box>
 )
 
 Stepper.propTypes = {

components/common/stepperSection.js

@@ -1,4 +1,4 @@
-import { Flex } from '@chakra-ui/core'
+import { Flex } from '@chakra-ui/react'
 import PropTypes from 'prop-types'
 
 import Stepper from '../common/stepper'

components/common/subheading.js

@@ -1,4 +1,4 @@
-import { Text } from '@chakra-ui/core'
+import { Text } from '@chakra-ui/react'
 
 // This is the large text in each section that sits below the underlined section title
 const Subheading = ({ align, children, ...props }) => (

components/common/textLink.js

@@ -1,4 +1,4 @@
-import { Link as ChakraLink } from '@chakra-ui/core'
+import { Link as ChakraLink } from '@chakra-ui/react'
 import Link from 'next/link'
 import PropTypes from 'prop-types'