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

@@ -0,0 +1,13 @@
+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/authProcess.js

@@ -4,12 +4,11 @@ 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,
@@ -196,7 +196,7 @@ 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/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

@@ -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/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

@@ -7,13 +7,21 @@ import {
   useTheme,
   Box,
   Button,
-  Icon,
   Menu,
   MenuButton,
   MenuList,
   MenuItem
-} from '@chakra-ui/core'
-import { AddIcon } from '@chakra-ui/icons'
+} from '@chakra-ui/react'
+import {
+  AddIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  SearchIcon,
+  QuestionIcon,
+  SettingsIcon,
+  UnlockIcon
+} from '@chakra-ui/icons'
+import CustomIconWrapper from '../CustomIconWrapper'
 
 const AuthNav = ({ user, onLogout }) => {
   const router = useRouter()
@@ -77,11 +85,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
@@ -92,7 +98,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>
@@ -106,7 +112,7 @@ const AuthNav = ({ user, onLogout }) => {
               <Link href='/find-packages'>
                 <a>
                   <Box as='span' display='flex' alignItems='center'>
-                    <Icon name='search' marginRight='.5rem' />
+                    <SearchIcon marginRight='.5rem' />
                     <span>Search packages</span>
                   </Box>
                 </a>
@@ -120,7 +126,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>
@@ -148,7 +154,7 @@ const AuthNav = ({ user, onLogout }) => {
               <Link href='/maintainer/settings'>
                 <a>
                   <Box as='span' display='flex' alignItems='center'>
-                    <Icon name='settings' marginRight='.5rem' />
+                    <SettingsIcon marginRight='.5rem' />
                     <span>Settings</span>
                   </Box>
                 </a>
@@ -162,7 +168,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/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