updates to translations

src/assets/demo/data.json

@@ -268,4 +268,4 @@
       "accent": "#f44336"
     }
   }
-}
+}

src/components/App/App.js

@@ -32,8 +32,8 @@ const App = () => {
       <div className="h-screen overflow-hidden grid grid-cols-5 items-center">
         <LeftSidebar />
 
-        <div className="z-0 h-screen col-span-3 flex justify-center items-center overflow-scroll">
-          <div id="page" ref={pageRef} className="my-auto shadow-2xl">
+        <div className="z-0 h-screen col-span-3 overflow-scroll flex justify-center items-center">
+          <div id="page" ref={pageRef} className="shadow-2xl">
             {templates.find(x => theme.layout.toLowerCase() === x.key).component()}
           </div>
         </div>

src/components/RightSidebar/tabs/Actions.js

@@ -28,13 +28,15 @@ const ActionsTab = ({ data, theme, dispatch }) => {
     pageElement.current.style.maxHeight = 'fit-content';
     pageElement.current.style.overflow = 'visible';
     html2canvas(pageElement.current, {
+      scale: 6,
       useCORS: true,
       allowTaint: true,
     }).then(canvas => {
       pageElement.current.style.maxHeight = '29.7cm';
       pageElement.current.style.overflow = 'scroll';
+
       const image = canvas.toDataURL('image/jpeg', 1.0);
-      const doc = new jsPDF('p', 'px', 'a4');
+      const doc = new jsPDF('p', 'mm', 'a4');
       const pageWidth = doc.internal.pageSize.getWidth();
       const pageHeight = doc.internal.pageSize.getHeight();
 
@@ -48,8 +50,8 @@ const ActionsTab = ({ data, theme, dispatch }) => {
       const marginX = (pageWidth - canvasWidth) / 2;
       const marginY = (pageHeight - canvasHeight) / 2;
 
-      doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight);
-      doc.output('dataurlnewwindow');
+      doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight, null, 'SLOW');
+      doc.save(`RxResume_${Date.now()}.pdf`);
     });
   };
 
@@ -62,8 +64,8 @@ const ActionsTab = ({ data, theme, dispatch }) => {
     dlAnchor.click();
   };
 
-  const loadDummyData = () => {
-    dispatch({ type: 'load_dummy_data' });
+  const loadDemoData = () => {
+    dispatch({ type: 'load_demo_data' });
     dispatch({ type: 'save_data' });
   };
 
@@ -118,39 +120,52 @@ const ActionsTab = ({ data, theme, dispatch }) => {
 
         <div className="text-sm">
           <Trans t={t} i18nKey="actions.printResume.body">
-            You can simply press <pre className="inline font-bold">Cmd/Ctrl + P</pre> at any time
-            while you&apos;re in the app to print your resume, but here&apos;s a fancy button to do
-            the same thing, just &apos;cause.
+            You can click on the button below to generate a PDF instantly. Alternatively, you can
+            also use <pre className="inline font-bold">Cmd/Ctrl + P</pre> but it would have
+            different effects.
           </Trans>
         </div>
 
-        <button
-          type="button"
-          onClick={printAsPdf}
-          className="mt-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-5 rounded"
-        >
-          <div className="flex justify-center items-center">
-            <i className="material-icons mr-2 font-bold text-base">print</i>
-            <span className="text-sm">{t('actions.printResume.buttons.print')}</span>
-          </div>
-        </button>
+        <div className="mt-1 grid grid-cols-2 col-gap-6">
+          <button
+            type="button"
+            onClick={printAsPdf}
+            className="mt-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-5 rounded"
+          >
+            <div className="flex justify-center items-center">
+              <i className="material-icons mr-2 font-bold text-base">import_export</i>
+              <span className="text-sm">{t('actions.printResume.buttons.export')}</span>
+            </div>
+          </button>
+
+          <button
+            type="button"
+            onClick={printAsPdf}
+            className="mt-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-5 rounded"
+          >
+            <div className="flex justify-center items-center">
+              <i className="material-icons mr-2 font-bold text-base">print</i>
+              <span className="text-sm">{t('actions.printResume.buttons.print')}</span>
+            </div>
+          </button>
+        </div>
       </div>
 
       <hr className="my-6" />
 
       <div className="shadow text-center p-5">
-        <h6 className="font-bold text-sm mb-2">{t('actions.loadDummyData.heading')}</h6>
+        <h6 className="font-bold text-sm mb-2">{t('actions.loadDemoData.heading')}</h6>
 
-        <div className="text-sm">{t('actions.loadDummyData.body')}</div>
+        <div className="text-sm">{t('actions.loadDemoData.body')}</div>
 
         <button
           type="button"
-          onClick={loadDummyData}
+          onClick={loadDemoData}
           className="mt-4 bg-green-600 hover:bg-green-700 text-white text-sm font-medium py-2 px-5 rounded"
         >
           <div className="flex justify-center items-center">
             <i className="material-icons mr-2 font-bold text-base">flight_takeoff</i>
-            <span className="text-sm">{t('actions.loadDummyData.buttons.loadData')}</span>
+            <span className="text-sm">{t('actions.loadDemoData.buttons.loadData')}</span>
           </div>
         </button>
       </div>

src/context/AppContext.js

@@ -3,7 +3,7 @@ import get from 'lodash/get';
 import set from 'lodash/set';
 import remove from 'lodash/remove';
 
-import dummyData from '../assets/dummy/data.json';
+import demoData from '../assets/demo/data.json';
 import { move } from '../utils';
 
 const initialState = {
@@ -125,15 +125,15 @@ const reducer = (state, { type, payload }) => {
         ...state,
         ...payload,
       };
-    case 'load_dummy_data':
+    case 'load_demo_data':
       return {
         ...state,
-        ...dummyData,
+        ...demoData,
       };
     case 'reset':
       return initialState;
     default:
-      throw state;
+      return state;
   }
 };
 

src/i18n/index.js

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

src/i18n/source/app/index.js

@@ -0,0 +1,3 @@
+import app from './app.json';
+
+export default app;

src/i18n/source/index.js

@@ -0,0 +1,9 @@
+import app from './app';
+import leftSidebar from './leftSidebar';
+import rightSidebar from './rightSidebar';
+
+export default {
+  app,
+  leftSidebar,
+  rightSidebar,
+};

src/i18n/source/leftSidebar/certifications.json

@@ -8,6 +8,6 @@
     "placeholder": "Udacity"
   },
   "description": {
-    "placeholder": "You can write about what you learnt from your certification program."
+    "placeholder": "You can write about what you learned from your certification program."
   }
 }

src/i18n/source/leftSidebar/index.js

@@ -0,0 +1,23 @@
+import profile from './profile.json';
+import objective from './objective.json';
+import work from './work.json';
+import education from './education.json';
+import awards from './awards.json';
+import certifications from './certifications.json';
+import skills from './skills.json';
+import languages from './languages.json';
+import references from './references.json';
+import extras from './extras.json';
+
+export default {
+  profile,
+  objective,
+  work,
+  education,
+  awards,
+  certifications,
+  skills,
+  languages,
+  references,
+  extras,
+};

src/i18n/source/rightSidebar/actions.json

@@ -11,16 +11,17 @@
   },
   "printResume": {
     "heading": "Print Your Resume",
-    "body": "You can simply press <1>Cmd/Ctrl + P</1> at any time while you're in the app to print your resume, but here's a fancy button to do the same thing, just 'cause.",
+    "body": "You can click on the button below to generate a PDF instantly. Alternatively, you can also use <1>Cmd/Ctrl + P</1> but it would have different effects.",
     "buttons": {
+      "export": "Export",
       "print": "Print"
     }
   },
-  "loadDummyData": {
-    "heading": "Load Dummy Data",
-    "body": "Unclear on what to do with a fresh blank page? Load some dummy data with prepopulated values to see how a resume should look and you can start editing from there.",
+  "loadDemoData": {
+    "heading": "Load Demo Data",
+    "body": "Unclear on what to do with a fresh blank page? Load some demo data with prepopulated values to see how a resume should look and you can start editing from there.",
     "buttons": {
-      "loadData": "Populate Data"
+      "loadData": "Load Data"
     }
   },
   "reset": {

src/i18n/source/rightSidebar/index.js

@@ -0,0 +1,15 @@
+import templates from './templates.json';
+import colors from './colors.json';
+import fonts from './fonts.json';
+import actions from './actions.json';
+import settings from './settings.json';
+import about from './about.json';
+
+export default {
+  templates,
+  colors,
+  fonts,
+  actions,
+  settings,
+  about,
+};

src/i18n/source/rightSidebar/settings.json

@@ -2,6 +2,6 @@
   "title": "Settings",
   "language": {
     "label": "Language",
-    "helpText": "If you would like to help translate the app into your own language, please refer the <1>Translation Documentation</1>."
+    "helpText": "If you would like to help translate the app into your own language, please refer to the <1>Translation Documentation</1>."
   }
 }

src/index.css

@@ -68,7 +68,8 @@ ul li {
     width: 21cm;
     min-height: 29.7cm;
     max-height: 29.7cm;
-    zoom: 0.8;
+    transform: scale(0.8);
+    transform-origin: center;
     overflow: scroll;
     background-color: white;
   }

src/templates/pikachu/Pikachu.js

@@ -234,6 +234,7 @@ const Pikachu = () => {
 
   return (
     <div
+      className="p-10"
       style={{
         fontFamily: theme.font.family,
         backgroundColor: theme.colors.background,