Feature/5 chakra v1

components/about/aboutUsSection.js

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

components/about/contactForm.js

@@ -5,7 +5,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'
@@ -25,7 +25,7 @@ const ContactSection = ({ contactPage, hideHeading, ...props }) => {
       {...props}
     >
       <UnderlinedHeading as={contactPage ? 'h1' : 'h2'} className={hideHeading ? 'sr-only' : ''} text='Contact Us' align='center' />
-      <Card shadowSz='lg' w='100%' maxW='45rem'>
+      <Card shadowSz='lg' boxSize='100%' maxW='45rem'>
         {!formSubmit && (
           <Text
             textTransform='uppercase'

components/common/authProcess.js

@@ -9,7 +9,7 @@ import {
   Heading,
   FormControl,
   FormLabel
-} from '@chakra-ui/core'
+} from '@chakra-ui/react'
 
 import { useForm } from 'react-hook-form'
 
@@ -196,7 +196,7 @@ const AuthProcess = ({
           justify='space-between'
           aria-live='polite'
         >
-          <Icon name={icon} size='6rem' marginBottom='1.5rem' />
+          <Icon name={icon} boxSize='6rem' marginBottom='1.5rem' />
           <Heading
             as='h1'
             fontSize='2rem'

components/common/backButton.js

@@ -2,7 +2,7 @@ import {
   Flex,
   Text,
   Link
-} from '@chakra-ui/core'
+} from '@chakra-ui/react'
 import { ArrowBackIcon } from '@chakra-ui/icons'
 import { useRouter } from 'next/router'
 
@@ -12,7 +12,7 @@ const BackButton = () => {
   return (
     <Link onClick={() => router.back()}>
       <Flex flexDirection='row' position='absolute' zIndex={1000} top='10rem' left='5rem' padding='1rem' cursor='pointer'>
-        <ArrowBackIcon w='1.5rem' h='1.5rem' />
+        <ArrowBackIcon boxSize='1.5rem' />
         <Text paddingLeft='1rem'>Back</Text>
       </Flex>
     </Link>

components/common/banner.js

@@ -2,7 +2,7 @@ import {
   Flex,
   Icon,
   CloseButton
-} from '@chakra-ui/core'
+} from '@chakra-ui/react'
 
 const Banner = ({ icon, children, onCloseClick }) => {
   return (
@@ -22,7 +22,7 @@ const Banner = ({ icon, children, onCloseClick }) => {
     >
       <Icon
         name={icon}
-        size={{ base: '2rem', md: '3rem' }}
+        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/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/formControl.js

@@ -1,7 +1,7 @@
 import {
   FormControl,
   FormLabel
-} from '@chakra-ui/core'
+} from '@chakra-ui/react'
 
 const FBFormControl = ({ labelText, id, required, children, ...props }) => (
   <FormControl marginBottom='1.5rem' isRequired={required} {...props}>

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

@@ -12,7 +12,7 @@ import {
   MenuButton,
   MenuList,
   MenuItem
-} from '@chakra-ui/core'
+} from '@chakra-ui/react'
 import { AddIcon } from '@chakra-ui/icons'
 
 const AuthNav = ({ user, onLogout }) => {
@@ -80,7 +80,7 @@ const AuthNav = ({ user, onLogout }) => {
             <Icon
               name={isExpanded ? 'chevron-up' : 'chevron-down'}
               marginLeft='.5rem'
-              size='1.5rem'
+              boxSize='1.5rem'
             />
           </MenuButton>
           <MenuList backgroundColor='lightRock'>

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/icons.js

@@ -0,0 +1,9 @@
+import { createIcon } from '@chakra-ui/react'
+
+import icons from '../../public/icons'
+
+export const DuotoneStarIcon = createIcon(icons.duotoneStar)
+export const SmileIcon = createIcon(icons.smile)
+export const StackIcon = createIcon(icons.stack)
+export const EquitableIcon = createIcon(icons.equitable)
+export const GivingHandIcon = createIcon(icons.givingHand)

components/common/linkBtn.js

@@ -1,11 +1,11 @@
-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, ...props }) => (
-  <PseudoBox as='a' display='inline-block' {...props}>
+  <Box as='a' display='inline-block' {...props}>
     {children}
-  </PseudoBox>
+  </Box>
 )
 
 LinkBtn.defaultProps = { ...defaultProps }

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/percentInput.js

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Flex, Input } from '@chakra-ui/core'
+import { Flex, Input } from '@chakra-ui/react'
 import PropTypes from 'prop-types'
 
 const PercentInput = ({ onChange, initialValue, id, ...props }) => {

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,4 +1,4 @@
-import { Box, Text, PseudoBox, List, ListItem, Icon } from '@chakra-ui/core'
+import { Box, Text, List, ListItem, Icon } from '@chakra-ui/react'
 import PropTypes from 'prop-types'
 
 const iconHeight = 2
@@ -22,7 +22,7 @@ const Step = ({ step, i, currentStep }) => (
     <>
       <Icon
         name={step.iconName}
-        size={`${iconHeight}rem`}
+        boxSize={`${iconHeight}rem`}
         marginBottom='1rem'
       />
       <Text aria-current={i + 1 === currentStep ? 'step' : 'false'}>
@@ -41,7 +41,7 @@ const Step = ({ step, i, currentStep }) => (
 )
 
 const Stepper = ({ steps, currentStep = 2 }) => (
-  <PseudoBox
+  <Box
     display='flex'
     justifyItems='center'
     position='relative'
@@ -71,7 +71,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'
 

components/common/underlinedHeading.js

@@ -1,4 +1,4 @@
-import { PseudoBox, Box } from '@chakra-ui/core'
+import { Box } from '@chakra-ui/react'
 import PropTypes from 'prop-types'
 
 /*
@@ -9,7 +9,7 @@ The default is an h2 since that is how it is used mostly in the design, but to c
 
 const UnderlinedHeading = ({ text, align, lineGap, lineColor, ...props }) => {
   return (
-    <PseudoBox textAlign={align} {...props} lineHeight={lineGap}>
+    <Box textAlign={align} {...props} lineHeight={lineGap}>
       <Box as='span' display='block' letterSpacing='1px'>
         {props.children}
         {text}
@@ -22,7 +22,7 @@ const UnderlinedHeading = ({ text, align, lineGap, lineColor, ...props }) => {
         h='0.1875rem'
         backgroundColor={lineColor}
       />
-    </PseudoBox>
+    </Box>
   )
 }
 

components/common/updateIlpModal.js

@@ -6,7 +6,7 @@ import {
   ModalContent,
   Box,
   ModalHeader
-} from '@chakra-ui/core'
+} from '@chakra-ui/react'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 

components/dashboard/usernameModal.js

@@ -6,7 +6,7 @@ import {
   ModalContent,
   Box,
   ModalHeader
-} from '@chakra-ui/core'
+} from '@chakra-ui/react'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 

components/maintainer/settings/billingInformationSection.js

@@ -5,7 +5,7 @@ import {
   Button,
   Box,
   useDisclosure
-} from '@chakra-ui/core'
+} from '@chakra-ui/react'
 
 import TextLink from '../../common/textLink'
 import SettingsCard from './settingsCard'

components/maintainer/settings/manageRevenueSection.js

@@ -3,7 +3,7 @@ import {
   Flex,
   Box,
   useToast
-} from '@chakra-ui/core'
+} from '@chakra-ui/react'
 import { useState } from 'react'
 
 import SettingsCard from './settingsCard'

components/maintainer/settings/settingsCard.js

@@ -1,6 +1,6 @@
 import Card from '../../common/card'
 
-import { Heading } from '@chakra-ui/core'
+import { Heading } from '@chakra-ui/react'
 
 const SettingsCard = ({ headingText, children }) => (
   <Card shadowSz='lg' w='100%' maxW='50rem' marginBottom='3rem'>

components/maintainer/settings/usernameSection.js

@@ -5,7 +5,7 @@ import {
   Button,
   Box,
   useDisclosure
-} from '@chakra-ui/core'
+} from '@chakra-ui/react'
 
 import SettingsCard from './settingsCard'
 import UpdateUsernameModal from '../../dashboard/usernameModal'

components/signup/verify_recaptcha.js

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import Head from 'next/head'
 import { decode } from 'b36'
 import Recaptcha from 'react-recaptcha'
-import { Flex, Text } from '@chakra-ui/core'
+import { Flex, Text } from '@chakra-ui/react'
 
 import { useLocalStorage } from '../../utils/useLocalStorage'
 import { localStorageGHStateKey } from '../../utils/constants'