- update dependencies

- upgrade gatsby v2 to v3
- update functions

src/components/builder/center/Artboard.js

@@ -1,6 +1,7 @@
-import React, { memo } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
+import * as styles from './Artboard.module.css';
 import { useSelector } from '../../../contexts/ResumeContext';
 import Castform from '../../../templates/Castform';
 import Celebi from '../../../templates/Celebi';
@@ -8,7 +9,6 @@ import Gengar from '../../../templates/Gengar';
 import Glalie from '../../../templates/Glalie';
 import Onyx from '../../../templates/Onyx';
 import Pikachu from '../../../templates/Pikachu';
-import styles from './Artboard.module.css';
 
 const Artboard = () => {
   const state = useSelector();

src/components/builder/left/LeftNavbar.js

@@ -1,12 +1,12 @@
 import { Link } from 'gatsby';
-import React, { memo } from 'react';
 import { Tooltip } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
-import sections from '../../../data/leftSections';
+import React, { memo } from 'react';
 import Avatar from '../../shared/Avatar';
 import Logo from '../../shared/Logo';
+import * as styles from './LeftNavbar.module.css';
 import SectionIcon from '../../shared/SectionIcon';
-import styles from './LeftNavbar.module.css';
+import sections from '../../../data/leftSections';
 
 const LeftNavbar = () => {
   const { t } = useTranslation();

src/components/builder/left/LeftSidebar.js

@@ -1,13 +1,12 @@
-import React, { Fragment, memo } from 'react';
 import { Element } from 'react-scroll';
-import sections from '../../../data/leftSections';
-import LeftNavbar from './LeftNavbar';
-import styles from './LeftSidebar.module.css';
+import React, { Fragment, memo } from 'react';
+import * as styles from './LeftSidebar.module.css';
 import Awards from './sections/Awards';
 import Certifications from './sections/Certifications';
 import Education from './sections/Education';
 import Hobbies from './sections/Hobbies';
 import Languages from './sections/Languages';
+import LeftNavbar from './LeftNavbar';
 import Objective from './sections/Objective';
 import Profile from './sections/Profile';
 import Projects from './sections/Projects';
@@ -15,6 +14,7 @@ import References from './sections/References';
 import Skills from './sections/Skills';
 import Social from './sections/Social';
 import Work from './sections/Work';
+import sections from '../../../data/leftSections';
 
 const getComponent = (id) => {
   switch (id) {

src/components/builder/left/sections/Awards.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Certifications.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Education.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Hobbies.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Languages.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Objective.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 

src/components/builder/left/sections/Profile.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import PhotoUpload from '../../../shared/PhotoUpload';

src/components/builder/left/sections/Projects.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/References.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Skills.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Social.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Work.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/lists/EmptyList.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 
 const EmptyList = () => {
   const { t } = useTranslation();

src/components/builder/lists/List.js

@@ -1,15 +1,15 @@
-import { get, isEmpty } from 'lodash';
-import React, { memo, useContext } from 'react';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-import { useTranslation } from 'react-i18next';
 import { MdAdd } from 'react-icons/md';
-import ModalContext from '../../../contexts/ModalContext';
-import { useDispatch, useSelector } from '../../../contexts/ResumeContext';
+import { get, isEmpty } from 'lodash';
+import { useTranslation } from 'react-i18next';
+import React, { memo, useContext } from 'react';
+import * as styles from './List.module.css';
 import { formatDateRange, reorder } from '../../../utils';
+import { useDispatch, useSelector } from '../../../contexts/ResumeContext';
 import Button from '../../shared/Button';
 import EmptyList from './EmptyList';
-import styles from './List.module.css';
 import ListItem from './ListItem';
+import ModalContext from '../../../contexts/ModalContext';
 
 const List = ({
   path,

src/components/builder/lists/ListItem.js

@@ -1,12 +1,12 @@
-import { Menu, MenuItem } from '@material-ui/core';
-import React, { memo, useState } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
-import { useTranslation } from 'react-i18next';
 import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
 import { MdMoreVert } from 'react-icons/md';
+import { Menu, MenuItem } from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
+import React, { memo, useState } from 'react';
 import Switch from '@material-ui/core/Switch';
 import { useDispatch } from '../../../contexts/ResumeContext';
-import styles from './ListItem.module.css';
+import * as styles from './ListItem.module.css';
 
 const dataTestIdPrefix = 'list-item-';
 

src/components/builder/right/RightNavbar.js

@@ -1,8 +1,8 @@
 import React, { memo } from 'react';
-import sections from '../../../data/rightSections';
+import * as styles from './RightNavbar.module.css';
 import SectionIcon from '../../shared/SectionIcon';
-import styles from './RightNavbar.module.css';
 import SyncIndicator from './SyncIndicator';
+import sections from '../../../data/rightSections';
 
 const RightNavbar = () => (
   <div className={styles.container}>

src/components/builder/right/RightSidebar.js

@@ -1,16 +1,16 @@
-import React, { Fragment, memo } from 'react';
 import { Element } from 'react-scroll';
-import sections from '../../../data/rightSections';
-import RightNavbar from './RightNavbar';
-import styles from './RightSidebar.module.css';
+import React, { Fragment, memo } from 'react';
+import * as styles from './RightSidebar.module.css';
 import About from './sections/About';
 import Actions from './sections/Actions';
 import Colors from './sections/Colors';
+import FontSize from './sections/FontSize';
 import Fonts from './sections/Fonts';
 import Layout from './sections/Layout';
+import RightNavbar from './RightNavbar';
 import Settings from './sections/Settings';
 import Templates from './sections/Templates';
-import FontSize from './sections/FontSize';
+import sections from '../../../data/rightSections';
 
 const getComponent = (id) => {
   switch (id) {

src/components/builder/right/SyncIndicator.js

@@ -1,6 +1,6 @@
-import cx from 'classnames';
-import React, { memo, useContext } from 'react';
 import { MdSync } from 'react-icons/md';
+import React, { memo, useContext } from 'react';
+import cx from 'classnames';
 import DatabaseContext from '../../../contexts/DatabaseContext';
 
 const SyncIndicator = () => {

src/components/builder/right/sections/About.js

@@ -1,11 +1,11 @@
-import React, { memo } from 'react';
-import { FaCoffee, FaBug, FaExternalLinkAlt } from 'react-icons/fa';
+import { FaBug, FaCoffee, FaExternalLinkAlt } from 'react-icons/fa';
 import { MdCode } from 'react-icons/md';
 import { Trans, useTranslation } from 'react-i18next';
-import { useStaticQuery, graphql } from 'gatsby';
+import { graphql, useStaticQuery } from 'gatsby';
+import React, { memo } from 'react';
 import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
-import styles from './About.module.css';
+import * as styles from './About.module.css';
 
 const About = ({ id }) => {
   const { t } = useTranslation();

src/components/builder/right/sections/Actions.js

@@ -1,12 +1,12 @@
-import React, { memo, useContext, useState } from 'react';
 import { FaFileExport, FaFileImport } from 'react-icons/fa';
 import { useTranslation } from 'react-i18next';
-import ModalContext from '../../../../contexts/ModalContext';
+import React, { memo, useContext, useState } from 'react';
+import * as styles from './Actions.module.css';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
-import styles from './Actions.module.css';
+import ModalContext from '../../../../contexts/ModalContext';
 
 const Actions = ({ id }) => {
   const { t } = useTranslation();

src/components/builder/right/sections/Colors.js

@@ -1,12 +1,12 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from '../../../../contexts/ResumeContext';
-import colorOptions from '../../../../data/colorOptions';
+import React, { memo } from 'react';
+import * as styles from './Colors.module.css';
 import { handleKeyUp } from '../../../../utils';
+import { useDispatch } from '../../../../contexts/ResumeContext';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
-import styles from './Colors.module.css';
+import colorOptions from '../../../../data/colorOptions';
 
 const Colors = ({ id }) => {
   const dispatch = useDispatch();

src/components/builder/right/sections/FontSize.js

@@ -1,9 +1,9 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React, { memo, useEffect, useState } from 'react';
-import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
-import fontSizeOptions from '../../../../data/fontSizeOptions';
 import { scaler } from '../../../../utils';
+import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import Heading from '../../../shared/Heading';
+import fontSizeOptions from '../../../../data/fontSizeOptions';
 
 const FontSizes = ({ id }) => {
   const steps = 20;

src/components/builder/right/sections/Fonts.js

@@ -1,10 +1,10 @@
-import cx from 'classnames';
 import React, { memo } from 'react';
-import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
-import fontOptions from '../../../../data/fontOptions';
+import cx from 'classnames';
+import * as styles from './Fonts.module.css';
 import { handleKeyUp } from '../../../../utils';
+import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import Heading from '../../../shared/Heading';
-import styles from './Fonts.module.css';
+import fontOptions from '../../../../data/fontOptions';
 
 const Fonts = ({ id }) => {
   const dispatch = useDispatch();

src/components/builder/right/sections/Layout.js

@@ -1,11 +1,11 @@
-import React, { memo, useState } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
+import React, { memo, useState } from 'react';
+import * as styles from './Layout.module.css';
 import { move, reorder } from '../../../../utils';
+import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
-import styles from './Layout.module.css';
 
 const Layout = ({ id }) => {
   const { t } = useTranslation();

src/components/builder/right/sections/Settings.js

@@ -1,16 +1,16 @@
-import React, { memo, useContext, useState } from 'react';
 import { FaAngleDown } from 'react-icons/fa';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
-import UserContext from '../../../../contexts/UserContext';
-import Button from '../../../shared/Button';
-import Heading from '../../../shared/Heading';
-import styles from './Settings.module.css';
-import Input from '../../../shared/Input';
-import SettingsContext from '../../../../contexts/SettingsContext';
-import themeConfig from '../../../../data/themeConfig';
+import React, { memo, useContext, useState } from 'react';
+import * as styles from './Settings.module.css';
 import { languages } from '../../../../i18n';
 import { useDispatch } from '../../../../contexts/ResumeContext';
+import Button from '../../../shared/Button';
+import Heading from '../../../shared/Heading';
+import Input from '../../../shared/Input';
+import SettingsContext from '../../../../contexts/SettingsContext';
+import UserContext from '../../../../contexts/UserContext';
+import themeConfig from '../../../../data/themeConfig';
 
 const Settings = ({ id }) => {
   const { t } = useTranslation();
@@ -18,15 +18,13 @@ const Settings = ({ id }) => {
   const [deleteText, setDeleteText] = useState(
     t('builder.settings.dangerZone.button'),
   );
-  const [isDeleteAccountInProgress, setDeleteAccountInProgress] = useState(
-    false,
-  );
+  const [isDeleteAccountInProgress, setDeleteAccountInProgress] =
+    useState(false);
 
   const dispatch = useDispatch();
   const { deleteAccount } = useContext(UserContext);
-  const { theme, setTheme, language, setLanguage } = useContext(
-    SettingsContext,
-  );
+  const { theme, setTheme, language, setLanguage } =
+    useContext(SettingsContext);
 
   const handleChangeTheme = (e) => {
     setTheme(e.target.value);

src/components/builder/right/sections/Templates.js

@@ -1,12 +1,12 @@
-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 { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
-import templateOptions from '../../../../data/templateOptions';
+import cx from 'classnames';
+import * as styles from './Templates.module.css';
 import { handleKeyUp } from '../../../../utils';
+import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import Heading from '../../../shared/Heading';
-import styles from './Templates.module.css';
+import templateOptions from '../../../../data/templateOptions';
 
 const Templates = ({ id }) => {
   const dispatch = useDispatch();
@@ -16,44 +16,32 @@ const Templates = ({ id }) => {
     query {
       onyx: file(relativePath: { eq: "templates/onyx.png" }) {
         childImageSharp {
-          fluid(maxHeight: 400) {
-            ...GatsbyImageSharpFluid
-          }
+          gatsbyImageData(layout: FIXED, height: 240)
         }
       }
       pikachu: file(relativePath: { eq: "templates/pikachu.png" }) {
         childImageSharp {
-          fluid(maxHeight: 400) {
-            ...GatsbyImageSharpFluid
-          }
+          gatsbyImageData(layout: FIXED, height: 240)
         }
       }
       gengar: file(relativePath: { eq: "templates/gengar.png" }) {
         childImageSharp {
-          fluid(maxHeight: 400) {
-            ...GatsbyImageSharpFluid
-          }
+          gatsbyImageData(layout: FIXED, height: 240)
         }
       }
       castform: file(relativePath: { eq: "templates/castform.png" }) {
         childImageSharp {
-          fluid(maxHeight: 400) {
-            ...GatsbyImageSharpFluid
-          }
+          gatsbyImageData(layout: FIXED, height: 240)
         }
       }
       glalie: file(relativePath: { eq: "templates/glalie.png" }) {
         childImageSharp {
-          fluid(maxHeight: 400) {
-            ...GatsbyImageSharpFluid
-          }
+          gatsbyImageData(layout: FIXED, height: 240)
         }
       }
       celebi: file(relativePath: { eq: "templates/celebi.png" }) {
         childImageSharp {
-          fluid(maxHeight: 400) {
-            ...GatsbyImageSharpFluid
-          }
+          gatsbyImageData(layout: FIXED, height: 240)
         }
       }
     }
@@ -87,10 +75,7 @@ const Templates = ({ id }) => {
           >
             <GatsbyImage
               alt={x.name}
-              loading="eager"
-              className="w-full"
-              style={{ height: '230px' }}
-              fluid={previews[x.id].childImageSharp.fluid}
+              image={previews[x.id].childImageSharp.gatsbyImageData}
             />
             <span>{x.name}</span>
           </div>