- update dependencies

- upgrade gatsby v2 to v3
- update functions

src/components/shared/Avatar.js

@@ -1,11 +1,11 @@
-import cx from 'classnames';
-import { toUrl } from 'gatsby-source-gravatar';
-import React, { memo, useContext, useMemo, useState } from 'react';
 import { Menu, MenuItem } from '@material-ui/core';
+import { toUrl } from 'gatsby-source-gravatar';
 import { useTranslation } from 'react-i18next';
+import React, { memo, useContext, useMemo, useState } from 'react';
+import cx from 'classnames';
 import UserContext from '../../contexts/UserContext';
-import styles from './Avatar.module.css';
 import { handleKeyUp } from '../../utils';
+import * as styles from './Avatar.module.css';
 
 const Avatar = ({ className }) => {
   const { t } = useTranslation();
@@ -20,9 +20,10 @@ const Avatar = ({ className }) => {
     handleClose();
   };
 
-  const photoURL = useMemo(() => toUrl(user.email || '', 'size=128&d=retro'), [
-    user.email,
-  ]);
+  const photoURL = useMemo(
+    () => toUrl(user.email || '', 'size=128&d=retro'),
+    [user.email],
+  );
 
   return (
     <div>

src/components/shared/Button.js

@@ -1,8 +1,8 @@
-import cx from 'classnames';
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
+import cx from 'classnames';
 import { handleKeyUp } from '../../utils';
-import styles from './Button.module.css';
+import * as styles from './Button.module.css';
 
 const Button = ({
   icon,
@@ -22,7 +22,7 @@ const Button = ({
       onClick={isLoading ? undefined : onClick}
       className={cx(styles.container, className, {
         [styles.outline]: outline,
-        [styles.delete]: isDelete,
+        [styles.remove]: isDelete,
       })}
     >
       {icon && <Icon size="14" className="mr-3" />}

src/components/shared/Button.module.css

@@ -31,14 +31,14 @@
   @apply outline-none;
 }
 
-.container.delete {
+.container.remove {
   @apply bg-red-600 border-red-600 text-white;
 }
 
-.container.delete:hover {
+.container.remove:hover {
   @apply bg-red-700 border-red-700;
 }
 
-.container.delete:focus {
+.container.remove:focus {
   @apply outline-none;
 }

src/components/shared/Heading.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import { useSelector } from '../../contexts/ResumeContext';
 
 const Heading = ({ id }) => {

src/components/shared/Input.js

@@ -1,13 +1,13 @@
-import cx from 'classnames';
-import { isFunction } from 'lodash';
-import React, { memo, useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
 import { FaAngleDown } from 'react-icons/fa';
 import { MdOpenInNew } from 'react-icons/md';
+import { Trans, useTranslation } from 'react-i18next';
+import { isFunction } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
+import React, { memo, useEffect, useState } from 'react';
+import cx from 'classnames';
 import { useDispatch, useSelector } from '../../contexts/ResumeContext';
 import { handleKeyUp } from '../../utils';
-import styles from './Input.module.css';
+import * as styles from './Input.module.css';
 
 const Input = ({
   name,

src/components/shared/Logo.js

@@ -1,17 +1,15 @@
-import cx from 'classnames';
 import { graphql, useStaticQuery } from 'gatsby';
-import GatsbyImage from 'gatsby-image';
+import { GatsbyImage } from 'gatsby-plugin-image';
 import React, { memo } from 'react';
-import styles from './Logo.module.css';
+import cx from 'classnames';
+import * as styles from './Logo.module.css';
 
 const Logo = ({ size = '256px', className }) => {
   const { file } = useStaticQuery(graphql`
     query {
       file(relativePath: { eq: "logo.png" }) {
         childImageSharp {
-          fluid(maxWidth: 512) {
-            ...GatsbyImageSharpFluid
-          }
+          gatsbyImageData(layout: FIXED)
         }
       }
     }
@@ -20,9 +18,10 @@ const Logo = ({ size = '256px', className }) => {
   return (
     <GatsbyImage
       loading="eager"
+      alt="Reactive Resume"
       className={cx(styles.logo, className)}
       style={{ width: size, height: size }}
-      fluid={file.childImageSharp.fluid}
+      image={file.childImageSharp.gatsbyImageData}
     />
   );
 };

src/components/shared/PhotoUpload.js

@@ -1,11 +1,11 @@
-import { Tooltip } from '@material-ui/core';
-import React, { memo, useContext, useRef } from 'react';
 import { MdFileUpload } from 'react-icons/md';
+import { Tooltip } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
-import StorageContext from '../../contexts/StorageContext';
+import React, { memo, useContext, useRef } from 'react';
 import { handleKeyUp } from '../../utils';
 import Input from './Input';
-import styles from './PhotoUpload.module.css';
+import * as styles from './PhotoUpload.module.css';
+import StorageContext from '../../contexts/StorageContext';
 
 const PhotoUpload = () => {
   const fileInputRef = useRef(null);

src/components/shared/SectionIcon.js

@@ -1,8 +1,8 @@
-import { Tooltip } from '@material-ui/core';
-import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Link } from 'react-scroll';
-import styles from './SectionIcon.module.css';
+import { Tooltip } from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
+import * as styles from './SectionIcon.module.css';
 
 const SectionIcon = ({ section, containerId, tooltipPlacement }) => {
   const { t } = useTranslation();

src/components/shared/Wrapper.js

@@ -1,6 +1,6 @@
-import React, { memo, useEffect } from 'react';
-import { Slide, toast } from 'react-toastify';
 import { Helmet } from 'react-helmet';
+import { Slide, toast } from 'react-toastify';
+import React, { memo, useEffect } from 'react';
 import ModalRegistrar from '../../modals/ModalRegistrar';
 
 const Wrapper = ({ children }) => {