From 94b3b8baad13f788e6ecd212ce93bf12b5ad83ce Mon Sep 17 00:00:00 2001 From: korlando7 Date: Fri, 29 Oct 2021 20:58:42 -0700 Subject: [PATCH 1/5] chakra v1 upgrade --- components/about/aboutUsSection.js | 2 +- components/about/contactForm.js | 2 +- components/about/contactSection.js | 2 +- components/common/authProcess.js | 12 +- components/common/banner.js | 10 +- components/common/button.js | 2 +- components/common/card.js | 2 +- components/common/customIconWrapper.js | 13 + components/common/divider.js | 2 +- components/common/errorMessage.js | 4 +- components/common/faqHeading.js | 2 +- components/common/fbButton.js | 2 +- components/common/fbTextInput.js | 2 +- components/common/footer.js | 2 +- components/common/githubButton.js | 2 +- components/common/header/authNav.js | 30 +- components/common/header/header.js | 2 +- components/common/header/logo.js | 2 +- components/common/header/logoLetters.js | 2 +- components/common/linkBtn.js | 10 +- components/common/pageWrapper.js | 6 +- components/common/section.js | 2 +- components/common/stepper.js | 13 +- components/common/stepperSection.js | 2 +- components/common/subheading.js | 2 +- components/common/textLink.js | 2 +- components/common/underlinedHeading.js | 6 +- components/common/uninstallCommandBlock.js | 5 +- components/dashboard/adsRadio.js | 2 +- components/dashboard/billingForm.js | 2 +- .../donation/donationInfoModalBody.js | 7 +- .../donation/editDonationModalBody.js | 17 +- .../donation/removeDonationModalBody.js | 7 +- components/dashboard/donationCard.js | 13 +- components/dashboard/topTenPackagesView.js | 5 +- components/install/installCommands.js | 8 +- components/install/installSection.js | 7 +- components/select/donateForm.js | 2 +- components/select/donateSection.js | 2 +- components/select/selectTierCards.js | 19 +- components/select/selectTierSection.js | 4 +- components/splash/cards/businessCards.js | 9 +- components/splash/cards/forDevelopersCards.js | 9 +- components/splash/cards/whatIsFBCards.js | 5 +- components/splash/rocketSection.js | 2 +- components/splash/splash_for_businesses.js | 2 +- components/splash/splash_for_developers.js | 2 +- components/splash/splash_hero.js | 2 +- components/splash/splash_what_is_flossbank.js | 2 +- components/update/updateSection.js | 2 +- .../settings/accountInformationSection.js | 10 +- .../settings/billingInformationSection.js | 4 +- components/user/settings/settingsCard.js | 2 +- components/user/settings/updateBilling.js | 7 +- components/verify/verify_humanity.js | 2 +- package-lock.json | 2297 +++-------------- package.json | 10 +- pages/_app.js | 15 +- pages/complete-login.js | 8 +- pages/dashboard.js | 8 +- pages/faq.js | 2 +- pages/how-it-works.js | 2 +- pages/privacy.js | 3 +- public/theme.js | 27 +- test/_setup.js | 2 +- utils/useAuth.js | 2 +- 66 files changed, 504 insertions(+), 2172 deletions(-) create mode 100644 components/common/customIconWrapper.js diff --git a/components/about/aboutUsSection.js b/components/about/aboutUsSection.js index bae60b9..610b6e5 100644 --- a/components/about/aboutUsSection.js +++ b/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' diff --git a/components/about/contactForm.js b/components/about/contactForm.js index c00508d..1cb81ed 100644 --- a/components/about/contactForm.js +++ b/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' diff --git a/components/about/contactSection.js b/components/about/contactSection.js index b45a4f4..ae86eb2 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' diff --git a/components/common/authProcess.js b/components/common/authProcess.js index 4715700..0c4db8c 100644 --- a/components/common/authProcess.js +++ b/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' > - + { 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/customIconWrapper.js b/components/common/customIconWrapper.js new file mode 100644 index 0000000..fc75590 --- /dev/null +++ b/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 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 }) => ( { const router = useRouter() @@ -76,11 +84,9 @@ const AuthNav = ({ user, onLogout }) => { > {user.email.charAt(0)} - + {isExpanded + ? + : } { - + Dashboard @@ -105,7 +111,7 @@ const AuthNav = ({ user, onLogout }) => { - + FAQ @@ -119,7 +125,7 @@ const AuthNav = ({ user, onLogout }) => { - + How it works @@ -133,7 +139,7 @@ const AuthNav = ({ user, onLogout }) => { - + Settings @@ -147,7 +153,7 @@ const AuthNav = ({ user, onLogout }) => { - + Log out diff --git a/components/common/header/header.js b/components/common/header/header.js index 9943824..8b0a7f0 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 0607139..530b8e8 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/linkBtn.js b/components/common/linkBtn.js index a492f08..345d370 100644 --- a/components/common/linkBtn.js +++ b/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 ? ( - + {children} - + ) : ( - + {children} - + )} ) 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} - +