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..4ef952e
--- /dev/null
+++ b/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
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
+ ?
+ : }
{isLoading && }
{verified && (
- {
const { user, resume } = useAuth()
@@ -290,7 +290,7 @@ const Dashboard = () => {
downloadData(JSON.stringify(userInstallData), 'flossbank_user_data.json')}
>
Download data
-
+
diff --git a/pages/faq.js b/pages/faq.js
index 377bab0..6133d90 100644
--- a/pages/faq.js
+++ b/pages/faq.js
@@ -1,4 +1,4 @@
-import { Text, Box, Image } from '@chakra-ui/core'
+import { Text, Box, Image } from '@chakra-ui/react'
import PageWrapper from '../components/common/pageWrapper'
import Section from '../components/common/section'
diff --git a/pages/how-it-works.js b/pages/how-it-works.js
index f94b196..59cf682 100644
--- a/pages/how-it-works.js
+++ b/pages/how-it-works.js
@@ -1,4 +1,4 @@
-import { Text, Box, Image } from '@chakra-ui/core'
+import { Text, Box, Image } from '@chakra-ui/react'
import PageWrapper from '../components/common/pageWrapper'
import Section from '../components/common/section'
diff --git a/pages/privacy.js b/pages/privacy.js
index 0b592a7..1c42054 100644
--- a/pages/privacy.js
+++ b/pages/privacy.js
@@ -1,5 +1,4 @@
-import { Text, ListItem } from '@chakra-ui/core'
-import { UnorderedList } from '@chakra-ui/react'
+import { Text, ListItem, UnorderedList } from '@chakra-ui/react'
import PageWrapper from '../components/common/pageWrapper'
import Section from '../components/common/section'
diff --git a/public/theme.js b/public/theme.js
index 261c801..d242937 100644
--- a/public/theme.js
+++ b/public/theme.js
@@ -1,28 +1,27 @@
// From https://chakra-ui.com/theme. we want to extend default theme but add colors + icons
-import { theme } from '@chakra-ui/core'
-import CustomIcons from './icons'
+import { extendTheme } from '@chakra-ui/react'
+import { createBreakpoints } from '@chakra-ui/theme-tools'
const fontStack = `"Helvetica Neue", Helvetica, Frutiger, "Frutiger Linotype",
Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad,
"DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva,
Arial, sans-serif`
-const breakpoints = ['30em', '48em', '62em', '80em']
-// aliases
-breakpoints.sm = breakpoints[0]
-breakpoints.md = breakpoints[1]
-breakpoints.lg = breakpoints[2]
-breakpoints.xl = breakpoints[3]
+const breakpoints = createBreakpoints({
+ sm: '30em',
+ md: '48em',
+ lg: '62em',
+ xl: '80em'
+})
-export default {
- ...theme,
+export default extendTheme({
+ breakpoints,
fonts: {
body: fontStack,
heading: fontStack,
mono: 'Menlo, monospace'
},
colors: {
- ...theme.colors,
ocean: '#2b67af',
lake: '#529ed6',
puddle: '#d7e6f6',
@@ -30,9 +29,5 @@ export default {
rock: '#5f6771',
boulder: '#404042',
lightRock: '#f2f2f2'
- },
- icons: {
- ...theme.icons,
- ...CustomIcons
}
-}
+})
diff --git a/test/_setup.js b/test/_setup.js
index 29154e2..b38fcf6 100644
--- a/test/_setup.js
+++ b/test/_setup.js
@@ -1,7 +1,7 @@
/* global jest */
import React from 'react'
import { render } from '@testing-library/react'
-import { ThemeProvider, CSSReset, ColorModeProvider } from '@chakra-ui/core'
+import { ThemeProvider, CSSReset, ColorModeProvider } from '@chakra-ui/react'
import CustomTheme from '../public/theme'
import '@testing-library/jest-dom/extend-expect'
diff --git a/utils/useAuth.js b/utils/useAuth.js
index e9543bd..3315cd1 100644
--- a/utils/useAuth.js
+++ b/utils/useAuth.js
@@ -4,7 +4,7 @@ import { useLocalStorage } from './useLocalStorage'
import { allowedEndpoints } from './constants'
import * as api from '../client/index'
-import { Flex, Text } from '@chakra-ui/core'
+import { Flex, Text } from '@chakra-ui/react'
import BouncyLoader from '../components/common/bouncyLoader'