Merge remote-tracking branch 'upstream/develop' into develop

src/components/Blog.js

@@ -1,10 +1,10 @@
 /* eslint-disable react/no-danger */
+import { Helmet } from 'react-helmet';
 import { graphql } from 'gatsby';
 import React from 'react';
-import { Helmet } from 'react-helmet';
-import styles from './Blog.module.css';
-import Wrapper from './shared/Wrapper';
 import Hero from './landing/Hero';
+import * as styles from './Blog.module.css';
+import Wrapper from './shared/Wrapper';
 
 export default function Template({ data }) {
   const { markdownRemark } = data;
@@ -34,7 +34,7 @@ export default function Template({ data }) {
 }
 
 export const pageQuery = graphql`
-  query($slug: String!) {
+  query ($slug: String!) {
     markdownRemark(frontmatter: { slug: { eq: $slug } }) {
       html
       frontmatter {

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>

src/components/dashboard/CreateResume.js

@@ -1,9 +1,9 @@
-import React, { memo, useContext } from 'react';
 import { MdAdd } from 'react-icons/md';
 import { useTranslation } from 'react-i18next';
-import ModalContext from '../../contexts/ModalContext';
+import React, { memo, useContext } from 'react';
+import * as styles from './CreateResume.module.css';
 import { handleKeyUp } from '../../utils';
-import styles from './CreateResume.module.css';
+import ModalContext from '../../contexts/ModalContext';
 
 const createResumeButtonDataTestId = 'create-resume-button';
 

src/components/dashboard/ResumePreview.js

@@ -1,13 +1,13 @@
+import { MdMoreHoriz, MdOpenInNew } from 'react-icons/md';
 import { Menu, MenuItem } from '@material-ui/core';
 import { navigate } from 'gatsby';
-import React, { useContext, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { MdMoreHoriz, MdOpenInNew } from 'react-icons/md';
 import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+import React, { useContext, useState } from 'react';
 import dayjs from 'dayjs';
 import DatabaseContext from '../../contexts/DatabaseContext';
 import ModalContext from '../../contexts/ModalContext';
-import styles from './ResumePreview.module.css';
+import * as styles from './ResumePreview.module.css';
 
 const menuToggleDataTestIdPrefix = 'resume-preview-menu-toggle-';
 

src/components/dashboard/TopNavbar.js

@@ -1,8 +1,8 @@
 import { Link } from 'gatsby';
 import React, { memo } from 'react';
+import * as styles from './TopNavbar.module.css';
 import Avatar from '../shared/Avatar';
 import Logo from '../shared/Logo';
-import styles from './TopNavbar.module.css';
 
 const TopNavbar = () => (
   <div className={styles.navbar}>

src/components/landing/Hero.js

@@ -1,11 +1,11 @@
 import { Link } from '@reach/router';
 import { navigate } from 'gatsby';
-import React, { memo, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import ModalContext from '../../contexts/ModalContext';
-import UserContext from '../../contexts/UserContext';
+import React, { memo, useContext } from 'react';
 import Button from '../shared/Button';
 import Logo from '../shared/Logo';
+import ModalContext from '../../contexts/ModalContext';
+import UserContext from '../../contexts/UserContext';
 
 const Hero = () => {
   const { t } = useTranslation();

src/components/landing/Screenshots.js

@@ -1,7 +1,7 @@
+import { graphql, useStaticQuery } from 'gatsby';
+import { GatsbyImage } from 'gatsby-plugin-image';
 import React from 'react';
-import { useStaticQuery, graphql } from 'gatsby';
-import GatsbyImage from 'gatsby-image';
-import styles from './Screenshots.module.css';
+import * as styles from './Screenshots.module.css';
 
 const Screenshots = () => {
   const screenshots = useStaticQuery(graphql`
@@ -11,9 +11,7 @@ const Screenshots = () => {
           original {
             src
           }
-          fixed(width: 320) {
-            ...GatsbyImageSharpFixed
-          }
+          gatsbyImageData(layout: FIXED, width: 400)
         }
       }
       screen2: file(relativePath: { eq: "screenshots/screen-2.png" }) {
@@ -21,9 +19,7 @@ const Screenshots = () => {
           original {
             src
           }
-          fixed(width: 320) {
-            ...GatsbyImageSharpFixed
-          }
+          gatsbyImageData(layout: FIXED, width: 400)
         }
       }
       screen3: file(relativePath: { eq: "screenshots/screen-3.png" }) {
@@ -31,9 +27,7 @@ const Screenshots = () => {
           original {
             src
           }
-          fixed(width: 320) {
-            ...GatsbyImageSharpFixed
-          }
+          gatsbyImageData(layout: FIXED, width: 400)
         }
       }
       screen4: file(relativePath: { eq: "screenshots/screen-4.png" }) {
@@ -41,9 +35,7 @@ const Screenshots = () => {
           original {
             src
           }
-          fixed(width: 320) {
-            ...GatsbyImageSharpFixed
-          }
+          gatsbyImageData(layout: FIXED, width: 400)
         }
       }
       screen5: file(relativePath: { eq: "screenshots/screen-5.png" }) {
@@ -51,9 +43,7 @@ const Screenshots = () => {
           original {
             src
           }
-          fixed(width: 320) {
-            ...GatsbyImageSharpFixed
-          }
+          gatsbyImageData(layout: FIXED, width: 400)
         }
       }
     }
@@ -74,7 +64,7 @@ const Screenshots = () => {
           >
             <span className="sr-only">Reactive Resume Screenshot</span>
             <GatsbyImage
-              fixed={screenshots[x].childImageSharp.fixed}
+              image={screenshots[x].childImageSharp.gatsbyImageData}
               alt="Reactive Resume Screenshot"
             />
           </a>

src/components/router/PrivateRoute.js

@@ -1,7 +1,7 @@
 import { navigate } from 'gatsby';
 import React, { memo, useContext } from 'react';
-import UserContext from '../../contexts/UserContext';
 import LoadingScreen from './LoadingScreen';
+import UserContext from '../../contexts/UserContext';
 
 const PrivateRoute = ({ component: Component, ...props }) => {
   const { user, loading } = useContext(UserContext);

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 }) => {

src/contexts/DatabaseContext.js

@@ -1,10 +1,10 @@
-import firebase from 'gatsby-plugin-firebase';
 import { debounce } from 'lodash';
-import ShortUniqueId from 'short-unique-id';
 import React, { createContext, memo, useContext, useState } from 'react';
+import ShortUniqueId from 'short-unique-id';
+import firebase from 'gatsby-plugin-firebase';
 import UserContext from './UserContext';
-import initialState from '../data/initialState.json';
 import { getUnsplashPhoto } from '../utils';
+import initialState from '../data/initialState.json';
 
 const DEBOUNCE_WAIT_TIME = 4000;
 

src/contexts/ResumeContext.js

@@ -1,15 +1,14 @@
-import arrayMove from 'array-move';
-import { v4 as uuidv4 } from 'uuid';
 import {
   clone,
   findIndex,
   get,
+  has,
   isUndefined,
   merge,
-  setWith,
   set,
-  has,
+  setWith,
 } from 'lodash';
+import { v4 as uuidv4 } from 'uuid';
 import React, {
   createContext,
   memo,
@@ -17,10 +16,11 @@ import React, {
   useContext,
   useReducer,
 } from 'react';
+import arrayMove from 'array-move';
 import i18next from 'i18next';
 import demoState from '../data/demoState.json';
-import initialState from '../data/initialState.json';
 import DatabaseContext from './DatabaseContext';
+import initialState from '../data/initialState.json';
 
 const ResumeContext = createContext({});
 

src/contexts/SettingsContext.js

@@ -1,5 +1,5 @@
-import i18next from 'i18next';
 import React, { createContext, memo, useEffect, useState } from 'react';
+import i18next from 'i18next';
 import themeConfig from '../data/themeConfig';
 
 const languageStorageItemKey = 'language';

src/contexts/StorageContext.js

@@ -1,6 +1,6 @@
-import firebase from 'gatsby-plugin-firebase';
-import React, { createContext, memo, useContext, useRef } from 'react';
 import { toast } from 'react-toastify';
+import React, { createContext, memo, useContext, useRef } from 'react';
+import firebase from 'gatsby-plugin-firebase';
 import { isFileImage } from '../utils';
 import { useDispatch, useSelector } from './ResumeContext';
 import UserContext from './UserContext';

src/contexts/UserContext.js

@@ -1,8 +1,8 @@
 import { navigate } from '@reach/router';
-import firebase from 'gatsby-plugin-firebase';
 import { pick } from 'lodash';
-import React, { createContext, memo, useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
+import React, { createContext, memo, useEffect, useState } from 'react';
+import firebase from 'gatsby-plugin-firebase';
 import useAuthState from '../hooks/useAuthState';
 
 const defaultUser = {

src/data/rightSections.js

@@ -2,11 +2,11 @@ import {
   MdColorLens,
   MdDashboard,
   MdFontDownload,
+  MdFormatSize,
   MdImportExport,
   MdInfo,
   MdSettings,
   MdStyle,
-  MdFormatSize,
 } from 'react-icons/md';
 
 export default [

src/i18n/index.js

@@ -1,5 +1,5 @@
-import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
+import i18n from 'i18next';
 import resources from './locales';
 
 const languages = [

src/i18n/locales/index.js

@@ -14,8 +14,8 @@ import it from './it.json';
 import ja from './ja.json';
 import kn from './kn.json';
 import lt from './lt.json';
-import nl from './nl.json';
 import nb from './nb.json';
+import nl from './nl.json';
 import pl from './pl.json';
 import ptBr from './pt-br.json';
 import ptPt from './pt-pt.json';

src/modals/AuthModal.js

@@ -1,10 +1,10 @@
 import { navigate } from 'gatsby';
-import React, { memo, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo, useContext, useEffect, useState } from 'react';
+import BaseModal from './BaseModal';
 import Button from '../components/shared/Button';
 import ModalContext from '../contexts/ModalContext';
 import UserContext from '../contexts/UserContext';
-import BaseModal from './BaseModal';
 
 const AuthModal = () => {
   const { t } = useTranslation();
@@ -13,9 +13,8 @@ const AuthModal = () => {
   const [isLoadingAnonymous, setLoadingAnonymous] = useState(false);
 
   const { emitter, events } = useContext(ModalContext);
-  const { user, loginWithGoogle, loginAnonymously, logout } = useContext(
-    UserContext,
-  );
+  const { user, loginWithGoogle, loginAnonymously, logout } =
+    useContext(UserContext);
 
   useEffect(() => {
     const unbind = emitter.on(events.AUTH_MODAL, () => setOpen(true));

src/modals/BaseModal.js

@@ -1,11 +1,11 @@
 import { Backdrop, Fade, Modal } from '@material-ui/core';
-import { isFunction } from 'lodash';
-import React, { forwardRef, memo, useImperativeHandle } from 'react';
-import { useTranslation } from 'react-i18next';
 import { MdClose } from 'react-icons/md';
+import { isFunction } from 'lodash';
+import { useTranslation } from 'react-i18next';
+import React, { forwardRef, memo, useImperativeHandle } from 'react';
 import Button from '../components/shared/Button';
 import { handleKeyUp } from '../utils';
-import styles from './BaseModal.module.css';
+import * as styles from './BaseModal.module.css';
 
 const BaseModal = forwardRef(
   ({ title, state, children, action, hideActions = false, onDestroy }, ref) => {

src/modals/DataModal.js

@@ -1,14 +1,14 @@
-import { useFormikContext } from 'formik';
 import { isEmpty, isFunction } from 'lodash';
-import React, { memo, useContext, useEffect, useRef, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
+import { useFormikContext } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { v4 as uuidv4 } from 'uuid';
+import React, { memo, useContext, useEffect, useRef, useState } from 'react';
+import { useDispatch } from '../contexts/ResumeContext';
+import BaseModal from './BaseModal';
 import Button from '../components/shared/Button';
 import ModalContext from '../contexts/ModalContext';
-import { useDispatch } from '../contexts/ResumeContext';
 import { getModalText } from '../utils';
-import BaseModal from './BaseModal';
 
 const DataModal = ({
   name,

src/modals/ModalRegistrar.js

@@ -1,6 +1,5 @@
 import React, { memo } from 'react';
 import AuthModal from './AuthModal';
-import ResumeModal from './ResumeModal';
 import AwardModal from './sections/AwardModal';
 import CertificateModal from './sections/CertificateModal';
 import EducationModal from './sections/EducationModal';
@@ -10,6 +9,7 @@ import ImportModal from './sections/ImportModal';
 import LanguageModal from './sections/LanguageModal';
 import ProjectModal from './sections/ProjectModal';
 import ReferenceModal from './sections/ReferenceModal';
+import ResumeModal from './ResumeModal';
 import SkillModal from './sections/SkillModal';
 import SocialModal from './sections/SocialModal';
 import WorkModal from './sections/WorkModal';

src/modals/ResumeModal.js

@@ -1,12 +1,12 @@
-import { Formik } from 'formik';
-import React, { memo, useContext } from 'react';
 import * as Yup from 'yup';
+import { Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
-import Input from '../components/shared/Input';
-import ModalEvents from '../constants/ModalEvents';
-import DatabaseContext from '../contexts/DatabaseContext';
+import React, { memo, useContext } from 'react';
 import { getFieldProps } from '../utils';
 import DataModal from './DataModal';
+import DatabaseContext from '../contexts/DatabaseContext';
+import Input from '../components/shared/Input';
+import ModalEvents from '../constants/ModalEvents';
 
 const initialValues = {
   name: '',

src/modals/sections/AwardModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
-import Input from '../../components/shared/Input';
-import ModalEvents from '../../constants/ModalEvents';
+import { Formik } from 'formik';
+import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   title: '',

src/modals/sections/CertificateModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
-import Input from '../../components/shared/Input';
-import ModalEvents from '../../constants/ModalEvents';
+import { Formik } from 'formik';
+import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   title: '',

src/modals/sections/EducationModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
 import * as Yup from 'yup';
+import { Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
-import Input from '../../components/shared/Input';
-import ModalEvents from '../../constants/ModalEvents';
+import React, { memo } from 'react';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   institution: '',

src/modals/sections/ExportModal.js

@@ -1,15 +1,15 @@
+import { FaPrint } from 'react-icons/fa';
+import { clone } from 'lodash';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+import React, { memo, useContext, useEffect, useState } from 'react';
 import download from 'downloadjs';
 import firebase from 'gatsby-plugin-firebase';
-import { clone } from 'lodash';
-import React, { memo, useContext, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { FaPrint } from 'react-icons/fa';
-import { toast } from 'react-toastify';
+import { useSelector } from '../../contexts/ResumeContext';
+import BaseModal from '../BaseModal';
 import Button from '../../components/shared/Button';
 import ModalContext from '../../contexts/ModalContext';
-import { useSelector } from '../../contexts/ResumeContext';
 import { b64toBlob } from '../../utils';
-import BaseModal from '../BaseModal';
 
 const ExportModal = () => {
   const state = useSelector();

src/modals/sections/HobbyModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
 import * as Yup from 'yup';
+import { Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
-import Input from '../../components/shared/Input';
-import ModalEvents from '../../constants/ModalEvents';
+import React, { memo } from 'react';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   name: '',

src/modals/sections/ImportModal.js

@@ -1,10 +1,10 @@
 import { Tooltip } from '@material-ui/core';
-import React, { memo, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import Button from '../../components/shared/Button';
-import ModalContext from '../../contexts/ModalContext';
+import React, { memo, useContext, useEffect, useRef, useState } from 'react';
 import { useDispatch } from '../../contexts/ResumeContext';
 import BaseModal from '../BaseModal';
+import Button from '../../components/shared/Button';
+import ModalContext from '../../contexts/ModalContext';
 
 const ImportModal = () => {
   const { t } = useTranslation();

src/modals/sections/LanguageModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
-import Input from '../../components/shared/Input';
-import ModalEvents from '../../constants/ModalEvents';
+import { Formik } from 'formik';
+import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   name: '',

src/modals/sections/ProjectModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
 import * as Yup from 'yup';
+import { Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
-import Input from '../../components/shared/Input';
-import ModalEvents from '../../constants/ModalEvents';
+import React, { memo } from 'react';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   title: '',

src/modals/sections/ReferenceModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
 import * as Yup from 'yup';
+import { Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
-import Input from '../../components/shared/Input';
-import ModalEvents from '../../constants/ModalEvents';
+import React, { memo } from 'react';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   name: '',

src/modals/sections/SkillModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
-import Input from '../../components/shared/Input';
-import ModalEvents from '../../constants/ModalEvents';
+import { Formik } from 'formik';
+import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   name: '',

src/modals/sections/SocialModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
-import Input from '../../components/shared/Input';
-import ModalEvents from '../../constants/ModalEvents';
+import { Formik } from 'formik';
+import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   url: '',

src/modals/sections/WorkModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
 import * as Yup from 'yup';
+import { Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
-import Input from '../../components/shared/Input';
-import ModalEvents from '../../constants/ModalEvents';
+import React, { memo } from 'react';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   company: '',

src/pages/404.js

@@ -1,5 +1,5 @@
-import { navigate } from 'gatsby';
 import { memo, useEffect } from 'react';
+import { navigate } from 'gatsby';
 
 const NotFound = () => {
   useEffect(() => {

src/pages/app.js

@@ -1,10 +1,10 @@
 import { Redirect, Router } from '@reach/router';
 import React, { memo } from 'react';
-import PrivateRoute from '../components/router/PrivateRoute';
-import Wrapper from '../components/shared/Wrapper';
-import NotFound from './404';
 import Builder from './app/builder';
 import Dashboard from './app/dashboard';
+import NotFound from './404';
+import PrivateRoute from '../components/router/PrivateRoute';
+import Wrapper from '../components/shared/Wrapper';
 
 const App = () => (
   <Wrapper>

src/pages/app/__tests__/builder.dataPersistence.test.js

@@ -3,8 +3,8 @@ import { fireEvent, screen } from '@testing-library/react';
 import { DatabaseConstants } from 'gatsby-plugin-firebase';
 
 import {
-  setupAndWait,
   expectDatabaseUpdateToHaveCompleted,
+  setupAndWait,
 } from './helpers/builder';
 
 const testTimeoutInMilliseconds = 30000;

src/pages/app/__tests__/builder.errorHandling.test.js

@@ -1,5 +1,5 @@
-import { navigate as mockNavigateFunction } from 'gatsby';
 import { fireEvent, getByText, screen, waitFor } from '@testing-library/react';
+import { navigate as mockNavigateFunction } from 'gatsby';
 
 import setup from './helpers/builder';
 

src/pages/app/__tests__/builder.settings.test.js

@@ -5,8 +5,8 @@ import { DatabaseConstants } from 'gatsby-plugin-firebase';
 import { languageStorageItemKey } from '../../../contexts/SettingsContext';
 
 import {
-  setupAndWait,
   expectDatabaseUpdateToHaveCompleted,
+  setupAndWait,
 } from './helpers/builder';
 
 const testTimeoutInMilliseconds = 20000;

src/pages/app/__tests__/builder.skills.test.js

@@ -6,10 +6,10 @@ import { DatabaseConstants } from 'gatsby-plugin-firebase';
 import { dataTestIdPrefix as listItemDataTestIdPrefix } from '../../../components/builder/lists/ListItem';
 
 import {
-  setupAndWait,
-  expectDatabaseUpdateToHaveCompleted,
   dragAndDropDirectionDown,
   dragAndDropListItem,
+  expectDatabaseUpdateToHaveCompleted,
+  setupAndWait,
 } from './helpers/builder';
 
 const testTimeoutInMilliseconds = 20000;

src/pages/app/__tests__/dashboard.createResume.test.js

@@ -10,12 +10,12 @@ import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 
 import { createResumeButtonDataTestId } from '../../../components/dashboard/CreateResume';
 import {
-  waitForResumeToBeRenderedInPreview,
-  expectResumeToBeRenderedInPreview,
-  waitForModalWindowToHaveBeenClosed,
   dismissNotification,
-  unsplashPhotoResponseUrl,
+  expectResumeToBeRenderedInPreview,
   setupWithFetchMockAndWait,
+  unsplashPhotoResponseUrl,
+  waitForModalWindowToHaveBeenClosed,
+  waitForResumeToBeRenderedInPreview,
 } from './helpers/dashboard';
 
 const tooShortResumeName = 'CV 1';

src/pages/app/__tests__/dashboard.deleteResume.test.js

@@ -8,14 +8,14 @@ import {
 
 import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 
-import { menuToggleDataTestIdPrefix as resumePreviewMenuToggleDataTestIdPrefix } from '../../../components/dashboard/ResumePreview';
 import {
+  dismissNotification,
+  expectResumeToBeRenderedInPreview,
+  findAndDismissNotification,
   setupAndWait,
   waitForResumeToDisappearFromPreview,
-  expectResumeToBeRenderedInPreview,
-  dismissNotification,
-  findAndDismissNotification,
 } from './helpers/dashboard';
+import { menuToggleDataTestIdPrefix as resumePreviewMenuToggleDataTestIdPrefix } from '../../../components/dashboard/ResumePreview';
 
 const waitForDatabaseRemoveToHaveCompleted = async (
   mockDatabaseRemoveFunction,
@@ -73,11 +73,8 @@ async function setup() {
 }
 
 it('removes resume from database and preview', async () => {
-  const {
-    resumeToDelete,
-    undeletedResume,
-    mockDatabaseRemoveFunction,
-  } = await setup();
+  const { resumeToDelete, undeletedResume, mockDatabaseRemoveFunction } =
+    await setup();
 
   await findAndDismissNotification();
 

src/pages/app/__tests__/dashboard.duplicateResume.test.js

@@ -7,13 +7,13 @@ import {
 
 import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 
-import { menuToggleDataTestIdPrefix as resumePreviewMenuToggleDataTestIdPrefix } from '../../../components/dashboard/ResumePreview';
 import {
-  setupWithFetchMockAndWait,
-  waitForResumeToBeRenderedInPreview,
   expectResumeToBeRenderedInPreview,
+  setupWithFetchMockAndWait,
   unsplashPhotoResponseUrl,
+  waitForResumeToBeRenderedInPreview,
 } from './helpers/dashboard';
+import { menuToggleDataTestIdPrefix as resumePreviewMenuToggleDataTestIdPrefix } from '../../../components/dashboard/ResumePreview';
 
 async function setup() {
   const user = DatabaseConstants.user1;

src/pages/app/__tests__/dashboard.rendering.test.js

@@ -4,9 +4,9 @@ import { DatabaseConstants } from 'gatsby-plugin-firebase';
 
 import { createResumeButtonDataTestId } from '../../../components/dashboard/CreateResume';
 import setup, {
-  setupAndWait,
-  expectResumeToBeRenderedInPreview,
   expectLoadingScreenToBeRendered,
+  expectResumeToBeRenderedInPreview,
+  setupAndWait,
   waitForLoadingScreenToDisappear,
 } from './helpers/dashboard';
 

src/pages/app/__tests__/helpers/builder.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   fireEvent,
   render,
@@ -6,21 +5,22 @@ import {
   waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react';
+import React from 'react';
 
 import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 
-import { dataTestId as loadingScreenTestId } from '../../../../components/router/LoadingScreen';
-import { SettingsProvider } from '../../../../contexts/SettingsContext';
-import { ModalProvider } from '../../../../contexts/ModalContext';
-import { UserProvider } from '../../../../contexts/UserContext';
 import {
   DatabaseProvider,
   DebounceWaitTime,
 } from '../../../../contexts/DatabaseContext';
+import { ModalProvider } from '../../../../contexts/ModalContext';
 import { ResumeProvider } from '../../../../contexts/ResumeContext';
+import { SettingsProvider } from '../../../../contexts/SettingsContext';
 import { StorageProvider } from '../../../../contexts/StorageContext';
-import Wrapper from '../../../../components/shared/Wrapper';
+import { UserProvider } from '../../../../contexts/UserContext';
+import { dataTestId as loadingScreenTestId } from '../../../../components/router/LoadingScreen';
 import Builder from '../../builder';
+import Wrapper from '../../../../components/shared/Wrapper';
 
 const waitForDatabaseUpdateToHaveCompletedFn = async (
   mockDatabaseUpdateFunction,

src/pages/app/__tests__/helpers/dashboard.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   fireEvent,
   render,
@@ -6,6 +5,7 @@ import {
   waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react';
+import React from 'react';
 
 import fetchMock from 'jest-fetch-mock';
 
@@ -13,16 +13,16 @@ import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 
 import '../../../../i18n/index';
 import '../../../../utils/dayjs';
-import { dataTestId as loadingScreenTestId } from '../../../../components/router/LoadingScreen';
-import { unsplashPhotoRequestUrl, delay } from '../../../../utils/index';
-import { SettingsProvider } from '../../../../contexts/SettingsContext';
-import { ModalProvider } from '../../../../contexts/ModalContext';
-import { UserProvider } from '../../../../contexts/UserContext';
 import { DatabaseProvider } from '../../../../contexts/DatabaseContext';
+import { ModalProvider } from '../../../../contexts/ModalContext';
 import { ResumeProvider } from '../../../../contexts/ResumeContext';
+import { SettingsProvider } from '../../../../contexts/SettingsContext';
 import { StorageProvider } from '../../../../contexts/StorageContext';
-import Wrapper from '../../../../components/shared/Wrapper';
+import { UserProvider } from '../../../../contexts/UserContext';
+import { delay, unsplashPhotoRequestUrl } from '../../../../utils/index';
+import { dataTestId as loadingScreenTestId } from '../../../../components/router/LoadingScreen';
 import Dashboard from '../../dashboard';
+import Wrapper from '../../../../components/shared/Wrapper';
 
 const waitForResumeToBeRenderedInPreview = async (resumeName) => {
   await screen.findByText(resumeName);

src/pages/app/builder.js

@@ -1,15 +1,15 @@
 import { navigate } from 'gatsby';
-import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
-import Artboard from '../../components/builder/center/Artboard';
-import LeftSidebar from '../../components/builder/left/LeftSidebar';
-import RightSidebar from '../../components/builder/right/RightSidebar';
-import LoadingScreen from '../../components/router/LoadingScreen';
-import DatabaseContext from '../../contexts/DatabaseContext';
+import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
+import * as styles from './builder.module.css';
 import { useDispatch } from '../../contexts/ResumeContext';
+import Artboard from '../../components/builder/center/Artboard';
 import Button from '../../components/shared/Button';
-import styles from './builder.module.css';
+import DatabaseContext from '../../contexts/DatabaseContext';
+import LeftSidebar from '../../components/builder/left/LeftSidebar';
+import LoadingScreen from '../../components/router/LoadingScreen';
+import RightSidebar from '../../components/builder/right/RightSidebar';
 
 const Builder = ({ id }) => {
   const dispatch = useDispatch();

src/pages/app/dashboard.js

@@ -1,11 +1,11 @@
-import firebase from 'gatsby-plugin-firebase';
-import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import React, { useEffect, useState } from 'react';
+import firebase from 'gatsby-plugin-firebase';
 import CreateResume from '../../components/dashboard/CreateResume';
+import LoadingScreen from '../../components/router/LoadingScreen';
 import ResumePreview from '../../components/dashboard/ResumePreview';
 import TopNavbar from '../../components/dashboard/TopNavbar';
-import LoadingScreen from '../../components/router/LoadingScreen';
 
 const Dashboard = ({ user }) => {
   const { t } = useTranslation();

src/pages/faq.js

@@ -1,7 +1,7 @@
-import { Link } from '@reach/router';
-import React from 'react';
 import { Helmet } from 'react-helmet';
+import { Link } from '@reach/router';
 import { MdKeyboardArrowLeft } from 'react-icons/md';
+import React from 'react';
 import Wrapper from '../components/shared/Wrapper';
 
 const FrequentlyAskedQuestions = () => (

src/pages/index.js

@@ -1,10 +1,10 @@
-import { Link } from '@reach/router';
-import React, { memo } from 'react';
-import { Helmet } from 'react-helmet';
-import { useTranslation } from 'react-i18next';
 import { FaUserSecret, FaWalking } from 'react-icons/fa';
+import { Helmet } from 'react-helmet';
 import { IoIosRocket } from 'react-icons/io';
+import { Link } from '@reach/router';
 import { RiRefreshLine } from 'react-icons/ri';
+import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Hero from '../components/landing/Hero';
 import Screenshots from '../components/landing/Screenshots';
 import Wrapper from '../components/shared/Wrapper';

src/pages/r.js

@@ -1,8 +1,8 @@
 import { Redirect, Router } from '@reach/router';
 import React, { memo } from 'react';
-import Wrapper from '../components/shared/Wrapper';
-import ResumeViewer from './r/view';
 import NotFound from './404';
+import ResumeViewer from './r/view';
+import Wrapper from '../components/shared/Wrapper';
 
 const ResumeRouter = () => (
   <Wrapper>

src/pages/r/view.js

@@ -1,19 +1,19 @@
-import { Link, navigate } from '@reach/router';
-import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { Helmet } from 'react-helmet';
+import { Link, navigate } from '@reach/router';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
-import LoadingScreen from '../../components/router/LoadingScreen';
-import DatabaseContext from '../../contexts/DatabaseContext';
+import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
+import * as styles from './view.module.css';
+import { scaler } from '../../utils';
 import Castform from '../../templates/Castform';
+import Celebi from '../../templates/Celebi';
+import DatabaseContext from '../../contexts/DatabaseContext';
 import Gengar from '../../templates/Gengar';
 import Glalie from '../../templates/Glalie';
+import LoadingScreen from '../../components/router/LoadingScreen';
 import Onyx from '../../templates/Onyx';
 import Pikachu from '../../templates/Pikachu';
-import styles from './view.module.css';
-import Celebi from '../../templates/Celebi';
 import fontSizeOptions from '../../data/fontSizeOptions';
-import { scaler } from '../../utils';
 
 const ResumeViewer = ({ id }) => {
   const { t, i18n } = useTranslation();

src/styles/global.css

@@ -46,7 +46,7 @@ section {
 }
 
 .markdown {
-  @apply leading-relaxed whitespace-pre-wrap;
+  @apply leading-relaxed;
 }
 
 .markdown ul {

src/templates/Castform.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PageContext from '../contexts/PageContext';
 import AwardsA from './blocks/Awards/AwardsA';
 import CertificationsA from './blocks/Certifications/CertificationsA';
 import ContactC from './blocks/Contact/ContactC';
@@ -8,6 +7,7 @@ import HeadingD from './blocks/Heading/HeadingD';
 import HobbiesA from './blocks/Hobbies/HobbiesA';
 import LanguagesA from './blocks/Languages/LanguagesA';
 import ObjectiveA from './blocks/Objective/ObjectiveA';
+import PageContext from '../contexts/PageContext';
 import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';

src/templates/Celebi.js

@@ -1,6 +1,5 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
-import PageContext from '../contexts/PageContext';
+import React from 'react';
 import { hexToRgb } from '../utils';
 import AwardsA from './blocks/Awards/AwardsA';
 import CertificationsA from './blocks/Certifications/CertificationsA';
@@ -10,6 +9,7 @@ import HeadingE from './blocks/Heading/HeadingE';
 import HobbiesA from './blocks/Hobbies/HobbiesA';
 import LanguagesB from './blocks/Languages/LanguagesB';
 import ObjectiveA from './blocks/Objective/ObjectiveA';
+import PageContext from '../contexts/PageContext';
 import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';

src/templates/Gengar.js

@@ -1,6 +1,5 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
-import PageContext from '../contexts/PageContext';
+import React from 'react';
 import { hasAddress, hexToRgb } from '../utils';
 import AwardsA from './blocks/Awards/AwardsA';
 import CertificationsA from './blocks/Certifications/CertificationsA';
@@ -10,6 +9,7 @@ import HeadingC from './blocks/Heading/HeadingC';
 import HobbiesA from './blocks/Hobbies/HobbiesA';
 import LanguagesA from './blocks/Languages/LanguagesA';
 import ObjectiveA from './blocks/Objective/ObjectiveA';
+import PageContext from '../contexts/PageContext';
 import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesB from './blocks/References/ReferencesB';
 import SkillsA from './blocks/Skills/SkillsA';

src/templates/Glalie.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PageContext from '../contexts/PageContext';
 import { hexToRgb } from '../utils';
 import AwardsA from './blocks/Awards/AwardsA';
 import CertificationsA from './blocks/Certifications/CertificationsA';
@@ -9,6 +8,7 @@ import HeadingB from './blocks/Heading/HeadingB';
 import HobbiesA from './blocks/Hobbies/HobbiesA';
 import LanguagesA from './blocks/Languages/LanguagesA';
 import ObjectiveA from './blocks/Objective/ObjectiveA';
+import PageContext from '../contexts/PageContext';
 import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';

src/templates/Onyx.js

@@ -1,6 +1,6 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import PageContext from '../contexts/PageContext';
+import React, { memo } from 'react';
+import { hasAddress } from '../utils';
 import AwardsA from './blocks/Awards/AwardsA';
 import CertificationsA from './blocks/Certifications/CertificationsA';
 import Contact from './blocks/Contact/ContactA';
@@ -9,11 +9,11 @@ import HeadingA from './blocks/Heading/HeadingA';
 import HobbiesA from './blocks/Hobbies/HobbiesA';
 import LanguagesA from './blocks/Languages/LanguagesA';
 import ObjectiveA from './blocks/Objective/ObjectiveA';
+import PageContext from '../contexts/PageContext';
 import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
-import { hasAddress } from '../utils';
 
 const Blocks = {
   objective: ObjectiveA,

src/templates/Pikachu.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-import PageContext from '../contexts/PageContext';
-import ContactA from './blocks/Contact/ContactA';
-import HeadingB from './blocks/Heading/HeadingB';
 import AwardsA from './blocks/Awards/AwardsA';
 import CertificationsA from './blocks/Certifications/CertificationsA';
+import ContactA from './blocks/Contact/ContactA';
 import EducationA from './blocks/Education/EducationA';
+import HeadingB from './blocks/Heading/HeadingB';
 import HobbiesA from './blocks/Hobbies/HobbiesA';
 import LanguagesA from './blocks/Languages/LanguagesA';
+import PageContext from '../contexts/PageContext';
 import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
@@ -77,10 +77,9 @@ const Pikachu = ({ data }) => {
                       style={{ borderColor: data.metadata.colors.background }}
                     />
 
-                    <ReactMarkdown
-                      className="text-sm"
-                      source={data.objective.body}
-                    />
+                    <ReactMarkdown className="text-sm">
+                      {data.objective.body}
+                    </ReactMarkdown>
                   </div>
                 )}
               </div>

src/templates/__tests__/Castform.test.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
+import React from 'react';
 
 import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 

src/templates/blocks/Awards/AwardsA.js

@@ -1,7 +1,7 @@
 import React, { memo, useContext } from 'react';
 import ReactMarkdown from 'react-markdown';
+import { formatDate, isItemVisible, safetyCheck } from '../../../utils';
 import PageContext from '../../../contexts/PageContext';
-import { formatDate, safetyCheck, isItemVisible } from '../../../utils';
 
 const AwardItem = ({ item, language }) => (
   <div>
@@ -17,7 +17,9 @@ const AwardItem = ({ item, language }) => (
       )}
     </div>
     {item.summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
+      <ReactMarkdown className="markdown mt-2 text-sm">
+        {item.summary}
+      </ReactMarkdown>
     )}
   </div>
 );

src/templates/blocks/BirthDate/BirthDateA.js

@@ -1,7 +1,7 @@
-import React, { memo, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import PageContext from '../../../contexts/PageContext';
+import React, { memo, useContext } from 'react';
 import { formatDate } from '../../../utils';
+import PageContext from '../../../contexts/PageContext';
 
 const BirthDateA = () => {
   const { t } = useTranslation();

src/templates/blocks/BirthDate/BirthDateB.js

@@ -1,8 +1,8 @@
-import React, { memo, useContext } from 'react';
 import { get } from 'lodash';
-import PageContext from '../../../contexts/PageContext';
-import Icons from '../Icons';
+import React, { memo, useContext } from 'react';
 import { formatDate } from '../../../utils';
+import Icons from '../Icons';
+import PageContext from '../../../contexts/PageContext';
 
 const BirthDateB = () => {
   const { data } = useContext(PageContext);

src/templates/blocks/BirthDate/BirthDateC.js

@@ -1,8 +1,8 @@
-import React, { memo, useContext } from 'react';
 import { get } from 'lodash';
-import PageContext from '../../../contexts/PageContext';
-import Icons from '../Icons';
+import React, { memo, useContext } from 'react';
 import { formatDate } from '../../../utils';
+import Icons from '../Icons';
+import PageContext from '../../../contexts/PageContext';
 
 const BirthDateC = () => {
   const { data } = useContext(PageContext);