- bumped version to 2.3.3

- fixed text alignment issues
- updated dependencies
- added ukranian language

src/components/builder/left/LeftSidebar.js

@@ -60,16 +60,14 @@ const SidebarSection = ({ id, event }) => {
   );
 };
 
-const LeftSidebar = () => {
-  return (
-    <div className="flex">
-      <LeftNavbar />
+const LeftSidebar = () => (
+  <div className="flex">
+    <LeftNavbar />
 
-      <div id="LeftSidebar" className={styles.container}>
-        {sections.map(SidebarSection)}
-      </div>
+    <div id="LeftSidebar" className={styles.container}>
+      {sections.map(SidebarSection)}
     </div>
-  );
-};
+  </div>
+);
 
 export default memo(LeftSidebar);

src/components/builder/right/RightNavbar.js

@@ -4,25 +4,23 @@ import SectionIcon from '../../shared/SectionIcon';
 import styles from './RightNavbar.module.css';
 import SyncIndicator from './SyncIndicator';
 
-const RightNavbar = () => {
-  return (
-    <div className={styles.container}>
-      <div className="grid grid-cols-1 gap-4 text-primary-500">
-        {sections.map((x) => (
-          <SectionIcon
-            key={x.id}
-            section={x}
-            containerId="RightSidebar"
-            tooltipPlacement="left"
-          />
-        ))}
-      </div>
-
-      <hr className="mt-auto my-6" />
-
-      <SyncIndicator />
+const RightNavbar = () => (
+  <div className={styles.container}>
+    <div className="grid grid-cols-1 gap-4 text-primary-500">
+      {sections.map((x) => (
+        <SectionIcon
+          key={x.id}
+          section={x}
+          containerId="RightSidebar"
+          tooltipPlacement="left"
+        />
+      ))}
     </div>
-  );
-};
+
+    <hr className="mt-auto my-6" />
+
+    <SyncIndicator />
+  </div>
+);
 
 export default memo(RightNavbar);

src/components/builder/right/RightSidebar.js

@@ -45,16 +45,14 @@ const SidebarSection = ({ id, event }) => {
   );
 };
 
-const RightSidebar = () => {
-  return (
-    <div className="flex">
-      <div id="RightSidebar" className={styles.container}>
-        {sections.map(SidebarSection)}
-      </div>
-
-      <RightNavbar />
+const RightSidebar = () => (
+  <div className="flex">
+    <div id="RightSidebar" className={styles.container}>
+      {sections.map(SidebarSection)}
     </div>
-  );
-};
+
+    <RightNavbar />
+  </div>
+);
 
 export default memo(RightSidebar);

src/components/dashboard/TopNavbar.js

@@ -4,18 +4,16 @@ import Avatar from '../shared/Avatar';
 import Logo from '../shared/Logo';
 import styles from './TopNavbar.module.css';
 
-const TopNavbar = () => {
-  return (
-    <div className={styles.navbar}>
-      <div className="container">
-        <Link to="/">
-          <Logo size="40px" />
-        </Link>
+const TopNavbar = () => (
+  <div className={styles.navbar}>
+    <div className="container">
+      <Link to="/">
+        <Logo size="40px" />
+      </Link>
 
-        <Avatar className="ml-8" />
-      </div>
+      <Avatar className="ml-8" />
     </div>
-  );
-};
+  </div>
+);
 
 export default memo(TopNavbar);

src/components/router/LoadingScreen.js

@@ -3,19 +3,17 @@ import React, { memo } from 'react';
 import { getRandomTip } from '../../data/tips';
 import Logo from '../shared/Logo';
 
-const LoadingScreen = () => {
-  return (
-    <Modal open hideBackdrop>
-      <Fade in>
-        <div className="w-screen h-screen flex justify-center items-center outline-none">
-          <div className="flex flex-col items-center">
-            <Logo size="48px" className="mb-4" />
-            <span className="font-medium opacity-75">{getRandomTip()}</span>
-          </div>
+const LoadingScreen = () => (
+  <Modal open hideBackdrop>
+    <Fade in>
+      <div className="w-screen h-screen flex justify-center items-center outline-none">
+        <div className="flex flex-col items-center">
+          <Logo size="48px" className="mb-4" />
+          <span className="font-medium opacity-75">{getRandomTip()}</span>
         </div>
-      </Fade>
-    </Modal>
-  );
-};
+      </div>
+    </Fade>
+  </Modal>
+);
 
 export default memo(LoadingScreen);

src/contexts/ModalContext.js

@@ -8,13 +8,9 @@ const defaultState = { events: ModalEvents, emitter };
 
 const ModalContext = createContext(defaultState);
 
-const ModalProvider = ({ children }) => {
-  return (
-    <ModalContext.Provider value={defaultState}>
-      {children}
-    </ModalContext.Provider>
-  );
-};
+const ModalProvider = ({ children }) => (
+  <ModalContext.Provider value={defaultState}>{children}</ModalContext.Provider>
+);
 
 export default ModalContext;
 

src/i18n/index.js

@@ -83,6 +83,10 @@ const languages = [
     code: 'tr',
     name: 'Turkish (Türkçe)',
   },
+  {
+    code: 'uk',
+    name: 'Ukrainian (Українська)',
+  },
 ];
 
 i18n.use(initReactI18next).init({

src/i18n/locales/index.js

@@ -17,6 +17,7 @@ import ptPt from './pt-pt.json';
 import ru from './ru.json';
 import sv from './sv.json';
 import tr from './tr.json';
+import uk from './uk.json';
 import zh from './zh.json';
 
 export default {
@@ -39,5 +40,6 @@ export default {
   ru: { translation: ru },
   sv: { translation: sv },
   tr: { translation: tr },
+  uk: { translation: uk },
   zh: { translation: zh },
 };

src/modals/ModalRegistrar.js

@@ -14,25 +14,23 @@ import SkillModal from './sections/SkillModal';
 import SocialModal from './sections/SocialModal';
 import WorkModal from './sections/WorkModal';
 
-const ModalRegistrar = () => {
-  return (
-    <>
-      <AuthModal />
-      <ResumeModal />
-      <SocialModal />
-      <WorkModal />
-      <EducationModal />
-      <ProjectModal />
-      <AwardModal />
-      <CertificateModal />
-      <SkillModal />
-      <HobbyModal />
-      <LanguageModal />
-      <ReferenceModal />
-      <ImportModal />
-      <ExportModal />
-    </>
-  );
-};
+const ModalRegistrar = () => (
+  <>
+    <AuthModal />
+    <ResumeModal />
+    <SocialModal />
+    <WorkModal />
+    <EducationModal />
+    <ProjectModal />
+    <AwardModal />
+    <CertificateModal />
+    <SkillModal />
+    <HobbyModal />
+    <LanguageModal />
+    <ReferenceModal />
+    <ImportModal />
+    <ExportModal />
+  </>
+);
 
 export default memo(ModalRegistrar);

src/pages/faq.js

@@ -4,112 +4,110 @@ import { Helmet } from 'react-helmet';
 import { MdKeyboardArrowLeft } from 'react-icons/md';
 import Wrapper from '../components/shared/Wrapper';
 
-const FrequentlyAskedQuestions = () => {
-  return (
-    <Wrapper>
-      <Helmet>
-        <title>Frequently Asked Questions | Reactive Resume</title>
-        <link rel="canonical" href="https://rxresu.me/app/dashboard" />
-      </Helmet>
+const FrequentlyAskedQuestions = () => (
+  <Wrapper>
+    <Helmet>
+      <title>Frequently Asked Questions | Reactive Resume</title>
+      <link rel="canonical" href="https://rxresu.me/app/dashboard" />
+    </Helmet>
 
-      <div className="md:w-1/2 container px-8 md:px-0 py-16 grid gap-12">
-        <div className="flex items-center">
-          <Link to="/">
-            <MdKeyboardArrowLeft size="32px" />
-          </Link>
-          <h1 className="ml-6 text-4xl font-semibold">
-            Frequently Asked Questions
-          </h1>
-        </div>
-
-        <div>
-          <p className="leading-loose">
-            This is aimed to be the world&apos;s simplest privacy policy. This
-            document should explain to you why the app collects some
-            information, what happens when your account is deleted and some
-            other frequently asked questions answered regarding your privacy.
-          </p>
-
-          <p className="mt-6 leading-loose">
-            If you have any more questions, please raise an issue regarding the
-            same on GitHub and I&apos;ll answer as honest and quickly as
-            possible :)
-          </p>
-        </div>
-
-        <hr />
-
-        <div>
-          <h4 className="text-xl font-medium mb-4">
-            What identifiable information is stored about me?
-          </h4>
-          <p className="leading-loose">
-            Your name and your email address is stored along with your user
-            information, if you signed in with Google, and of course, all the
-            information you input in your resume is also stored in the database.
-            You won&apos;t even get any marketing emails, feature updates,
-            newsletters, notification emails, nothing.
-          </p>
-        </div>
-
-        <hr />
-
-        <div>
-          <h4 className="text-xl font-medium mb-4">
-            Why are you using a database, why not keep everything local like in
-            the first version of Reactive Resume?
-          </h4>
-          <p className="leading-loose">
-            Not having a centralized database cause a lot more problems than I
-            could solve, mainly having a large chunk of the users of the app
-            having an outdated schema as the app evolved. This was a problem I
-            could not solve without having at least some control.
-          </p>
-
-          <p className="mt-6 leading-loose">
-            Also, a lot of users were having trouble printing their resumes on
-            their browsers, so with the help of Cloud Functions from Firebase,
-            you can now print your resumes remotely. None of the resumes are
-            stored, and they are sent to you immediately after generation, which
-            can be verified by looking through the source code.
-          </p>
-        </div>
-
-        <hr />
-
-        <div>
-          <h4 className="text-xl font-medium mb-4">
-            How is this all free? There must be a catch!
-          </h4>
-          <p className="leading-loose">
-            <strong>Absolutely no catch to this freebie.</strong> This project
-            is just my way of giving back to the community that I&apos;ve
-            learned so much from. If you&apos;d like to show your appreciation
-            however, you can follow me on my social media and let me know how
-            much it helped you, or donate to help pay the cloud bills, or if you
-            are a fellow developer, you can head to GitHub and contribute to the
-            code and raising a PR.
-          </p>
-        </div>
-
-        <hr />
-
-        <div>
-          <h4 className="text-xl font-medium mb-4">
-            Is there a mobile app for Reactive Resume?
-          </h4>
-          <p className="leading-loose">
-            <strong>Not yet. But soon, maybe?</strong> One of the main
-            motivations for me to shift to a centralized database approach was
-            that I could one day build a mobile app as well that could let users
-            jump from editing on their desktops to editing on their phones. It
-            requires a lot of time, so I would not expect it any time soon, but
-            it&apos;s definitely in the pipeline.
-          </p>
-        </div>
+    <div className="md:w-1/2 container px-8 md:px-0 py-16 grid gap-12">
+      <div className="flex items-center">
+        <Link to="/">
+          <MdKeyboardArrowLeft size="32px" />
+        </Link>
+        <h1 className="ml-6 text-4xl font-semibold">
+          Frequently Asked Questions
+        </h1>
       </div>
-    </Wrapper>
-  );
-};
+
+      <div>
+        <p className="leading-loose">
+          This is aimed to be the world&apos;s simplest privacy policy. This
+          document should explain to you why the app collects some information,
+          what happens when your account is deleted and some other frequently
+          asked questions answered regarding your privacy.
+        </p>
+
+        <p className="mt-6 leading-loose">
+          If you have any more questions, please raise an issue regarding the
+          same on GitHub and I&apos;ll answer as honest and quickly as possible
+          :)
+        </p>
+      </div>
+
+      <hr />
+
+      <div>
+        <h4 className="text-xl font-medium mb-4">
+          What identifiable information is stored about me?
+        </h4>
+        <p className="leading-loose">
+          Your name and your email address is stored along with your user
+          information, if you signed in with Google, and of course, all the
+          information you input in your resume is also stored in the database.
+          You won&apos;t even get any marketing emails, feature updates,
+          newsletters, notification emails, nothing.
+        </p>
+      </div>
+
+      <hr />
+
+      <div>
+        <h4 className="text-xl font-medium mb-4">
+          Why are you using a database, why not keep everything local like in
+          the first version of Reactive Resume?
+        </h4>
+        <p className="leading-loose">
+          Not having a centralized database cause a lot more problems than I
+          could solve, mainly having a large chunk of the users of the app
+          having an outdated schema as the app evolved. This was a problem I
+          could not solve without having at least some control.
+        </p>
+
+        <p className="mt-6 leading-loose">
+          Also, a lot of users were having trouble printing their resumes on
+          their browsers, so with the help of Cloud Functions from Firebase, you
+          can now print your resumes remotely. None of the resumes are stored,
+          and they are sent to you immediately after generation, which can be
+          verified by looking through the source code.
+        </p>
+      </div>
+
+      <hr />
+
+      <div>
+        <h4 className="text-xl font-medium mb-4">
+          How is this all free? There must be a catch!
+        </h4>
+        <p className="leading-loose">
+          <strong>Absolutely no catch to this freebie.</strong> This project is
+          just my way of giving back to the community that I&apos;ve learned so
+          much from. If you&apos;d like to show your appreciation however, you
+          can follow me on my social media and let me know how much it helped
+          you, or donate to help pay the cloud bills, or if you are a fellow
+          developer, you can head to GitHub and contribute to the code and
+          raising a PR.
+        </p>
+      </div>
+
+      <hr />
+
+      <div>
+        <h4 className="text-xl font-medium mb-4">
+          Is there a mobile app for Reactive Resume?
+        </h4>
+        <p className="leading-loose">
+          <strong>Not yet. But soon, maybe?</strong> One of the main motivations
+          for me to shift to a centralized database approach was that I could
+          one day build a mobile app as well that could let users jump from
+          editing on their desktops to editing on their phones. It requires a
+          lot of time, so I would not expect it any time soon, but it&apos;s
+          definitely in the pipeline.
+        </p>
+      </div>
+    </div>
+  </Wrapper>
+);
 
 export default FrequentlyAskedQuestions;

src/pages/index.js

@@ -127,16 +127,14 @@ const Home = () => {
   );
 };
 
-const Feature = ({ icon: Icon, title, children }) => {
-  return (
-    <div className="mt-16">
-      <div className="flex items-center">
-        <Icon size="18px" className="text-primary-900 mr-4" />
-        <div className="text-3xl">{title}</div>
-      </div>
-      <p className="mt-6 text-lg leading-loose">{children}</p>
+const Feature = ({ icon: Icon, title, children }) => (
+  <div className="mt-16">
+    <div className="flex items-center">
+      <Icon size="18px" className="text-primary-900 mr-4" />
+      <div className="text-3xl">{title}</div>
     </div>
-  );
-};
+    <p className="mt-6 text-lg leading-loose">{children}</p>
+  </div>
+);
 
 export default memo(Home);

src/pages/r/view.js

@@ -52,7 +52,6 @@ const ResumeViewer = ({ id }) => {
         </Helmet>
 
         <div
-          id="page"
           className={styles.page}
           style={{ backgroundColor: resume.metadata.colors.background }}
         >

src/styles/global.css

@@ -76,6 +76,7 @@ section {
   #page {
     width: 21cm;
     position: absolute;
+    text-align: start;
     top: 0;
     left: 0;
     right: 0;

src/templates/Castform.js

@@ -55,6 +55,7 @@ const Castform = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingD }}>
       <div
+        id="page"
         className="rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/Celebi.js

@@ -86,6 +86,7 @@ const Celebi = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingE }}>
       <div
+        id="page"
         className="relative rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/Gengar.js

@@ -59,6 +59,7 @@ const Gengar = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingC }}>
       <div
+        id="page"
         className="rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/Glalie.js

@@ -54,6 +54,7 @@ const Glalie = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingB }}>
       <div
+        id="page"
         className="rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/Onyx.js

@@ -33,6 +33,7 @@ const Onyx = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingA }}>
       <div
+        id="page"
         className="p-8 rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/Pikachu.js

@@ -32,6 +32,7 @@ const Pikachu = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingB }}>
       <div
+        id="page"
         className="p-8 rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/blocks/Contact/ContactC.js

@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next';
 import PageContext from '../../../contexts/PageContext';
 import { safetyCheck } from '../../../utils';
 
-const ContactItem = ({ value, label, link }) => {
-  return value ? (
+const ContactItem = ({ value, label, link }) =>
+  value ? (
     <div className="flex flex-col">
       <h6 className="capitalize font-semibold">{label}</h6>
       {link ? (
@@ -16,7 +16,6 @@ const ContactItem = ({ value, label, link }) => {
       )}
     </div>
   ) : null;
-};
 
 const ContactC = () => {
   const { t } = useTranslation();

src/templates/blocks/Contact/ContactD.js

@@ -4,8 +4,8 @@ import { MdFlare } from 'react-icons/md';
 import PageContext from '../../../contexts/PageContext';
 import { safetyCheck } from '../../../utils';
 
-const ContactItem = ({ value, label, link }) => {
-  return value ? (
+const ContactItem = ({ value, label, link }) =>
+  value ? (
     <div className="flex flex-col">
       <h6 className="capitalize font-semibold">{label}</h6>
       {link ? (
@@ -17,7 +17,6 @@ const ContactItem = ({ value, label, link }) => {
       )}
     </div>
   ) : null;
-};
 
 const ContactD = () => {
   const { t } = useTranslation();

src/templates/blocks/Heading/HeadingC.js

@@ -1,11 +1,7 @@
 import React, { memo } from 'react';
 
-const HeadingC = ({ children }) => {
-  return (
-    <h6 className="font-bold text-xs uppercase tracking-wide mb-1">
-      {children}
-    </h6>
-  );
-};
+const HeadingC = ({ children }) => (
+  <h6 className="font-bold text-xs uppercase tracking-wide mb-1">{children}</h6>
+);
 
 export default memo(HeadingC);

src/templates/blocks/Heading/HeadingE.js

@@ -1,11 +1,9 @@
 import React, { memo } from 'react';
 
-const HeadingC = ({ children }) => {
-  return (
-    <h6 className="my-2 text-md uppercase font-semibold tracking-wider pb-1 border-b-2 border-gray-800">
-      {children}
-    </h6>
-  );
-};
+const HeadingC = ({ children }) => (
+  <h6 className="my-2 text-md uppercase font-semibold tracking-wider pb-1 border-b-2 border-gray-800">
+    {children}
+  </h6>
+);
 
 export default memo(HeadingC);

src/utils/dayjs.js

@@ -15,6 +15,7 @@ import 'dayjs/locale/nl';
 import 'dayjs/locale/pl';
 import 'dayjs/locale/pt';
 import 'dayjs/locale/tr';
+import 'dayjs/locale/uk';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
 dayjs.extend(relativeTime);

src/utils/index.js

@@ -1,15 +1,13 @@
 import dayjs from 'dayjs';
 import { get, isEmpty } from 'lodash';
 
-export const getModalText = (isEditMode, type, t) => {
-  return isEditMode
+export const getModalText = (isEditMode, type, t) =>
+  isEditMode
     ? `${t('shared.buttons.edit')} ${type}`
     : `${t('shared.buttons.add')} ${type}`;
-};
 
-export const safetyCheck = (section, path = 'items') => {
-  return !!(section && section.visible === true && !isEmpty(section[path]));
-};
+export const safetyCheck = (section, path = 'items') =>
+  !!(section && section.visible === true && !isEmpty(section[path]));
 
 export const handleKeyUp = (event, action) => {
   (event.which === 13 || event.which === 32) && action();