diff --git a/components/about/aboutUsSection.js b/components/about/aboutUsSection.js index 7e58a9e..d351f36 100644 --- a/components/about/aboutUsSection.js +++ b/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' diff --git a/components/about/contactForm.js b/components/about/contactForm.js index 41d85a5..d8b2c04 100644 --- a/components/about/contactForm.js +++ b/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' diff --git a/components/about/contactSection.js b/components/about/contactSection.js index b45a4f4..e55b711 100644 --- a/components/about/contactSection.js +++ b/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} > - + {!formSubmit && ( { + if (!icon || !icons[icon]) { + return null + } + return React.createElement(createIcon(icons[icon]), props) +} + +export default CustomIconWrapper diff --git a/components/common/authProcess.js b/components/common/authProcess.js index 8cf7e70..1c4a83d 100644 --- a/components/common/authProcess.js +++ b/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' > - + { return ( router.back()}> - + Back diff --git a/components/common/banner.js b/components/common/banner.js index 8eb20e2..adf1276 100644 --- a/components/common/banner.js +++ b/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' > - diff --git a/components/common/button.js b/components/common/button.js index fbce102..f905cab 100644 --- a/components/common/button.js +++ b/components/common/button.js @@ -1,6 +1,6 @@ import { Button -} from '@chakra-ui/core' +} from '@chakra-ui/react' const FBButton = (props) => { return ( diff --git a/components/common/card.js b/components/common/card.js index 81a2cd9..1158c7f 100644 --- a/components/common/card.js +++ b/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 = { diff --git a/components/common/divider.js b/components/common/divider.js index 5e54a4d..d4ef345 100644 --- a/components/common/divider.js +++ b/components/common/divider.js @@ -1,4 +1,4 @@ -import { Box } from '@chakra-ui/core' +import { Box } from '@chakra-ui/react' const Divider = (props) => ( ( ( > diff --git a/components/common/faqHeading.js b/components/common/faqHeading.js index 52df05b..ce7d050 100644 --- a/components/common/faqHeading.js +++ b/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 }) => ( diff --git a/components/common/fbButton.js b/components/common/fbButton.js index e792024..34305b4 100644 --- a/components/common/fbButton.js +++ b/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' diff --git a/components/common/fbTextInput.js b/components/common/fbTextInput.js index 8c8dfb4..772817f 100644 --- a/components/common/fbTextInput.js +++ b/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 }) => ( ( diff --git a/components/common/githubButton.js b/components/common/githubButton.js index dc6f806..4598d23 100644 --- a/components/common/githubButton.js +++ b/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' diff --git a/components/common/header/authNav.js b/components/common/header/authNav.js index 8e85509..fffd84e 100644 --- a/components/common/header/authNav.js +++ b/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)} - + {isExpanded + ? + : } { - + Dashboard @@ -106,7 +112,7 @@ const AuthNav = ({ user, onLogout }) => { - + Search packages @@ -120,7 +126,7 @@ const AuthNav = ({ user, onLogout }) => { - + FAQ @@ -148,7 +154,7 @@ const AuthNav = ({ user, onLogout }) => { - + Settings @@ -162,7 +168,7 @@ const AuthNav = ({ user, onLogout }) => { - + Log out diff --git a/components/common/header/header.js b/components/common/header/header.js index 561babd..c1d0652 100644 --- a/components/common/header/header.js +++ b/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' diff --git a/components/common/header/logo.js b/components/common/header/logo.js index 8b2e80d..f979d43 100644 --- a/components/common/header/logo.js +++ b/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' diff --git a/components/common/header/logoLetters.js b/components/common/header/logoLetters.js index 70ef102..9e75f40 100644 --- a/components/common/header/logoLetters.js +++ b/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 }) => { diff --git a/components/common/icons.js b/components/common/icons.js new file mode 100644 index 0000000..66f0c1b --- /dev/null +++ b/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) diff --git a/components/common/linkBtn.js b/components/common/linkBtn.js index fe6ff7b..c7c0428 100644 --- a/components/common/linkBtn.js +++ b/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 }) => ( - + {children} - + ) LinkBtn.defaultProps = { ...defaultProps } diff --git a/components/common/pageWrapper.js b/components/common/pageWrapper.js index 9a688a8..1249c8d 100644 --- a/components/common/pageWrapper.js +++ b/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) => (
- ( }} > {props.children} - +