- completed design of Onyx template

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

@@ -7,7 +7,7 @@ const Objective = () => {
     <section>
       <Heading>Objective</Heading>
 
-      <Input type="textarea" label="Objective" path="objective" />
+      <Input type="textarea" label="Objective" path="objective.body" />
     </section>
   );
 };

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

@@ -38,7 +38,7 @@ const Actions = () => {
       <div className={styles.container}>
         <h5>Import Your Resume</h5>
 
-        <p>
+        <p className="leading-loose">
           You can import your information from various sources like JSON Resume
           or your LinkedIn to autofill most of the data for your resume.
         </p>
@@ -53,7 +53,7 @@ const Actions = () => {
       <div className={styles.container}>
         <h5>Export Your Resume</h5>
 
-        <p>
+        <p className="leading-loose">
           Export your resume as a PDF to share with recruiters or a JSON that
           you will be able to import back onto this app on another computer.
         </p>
@@ -73,7 +73,7 @@ const Actions = () => {
       <div className={styles.container}>
         <h5>Share Your Resume</h5>
 
-        <p>
+        <p className="leading-loose">
           The link below will be accessible publicly if you choose to share it,
           and viewers would see the latest version of your resume at any time.
         </p>
@@ -86,7 +86,7 @@ const Actions = () => {
       <div className={styles.container}>
         <h5>Load Demo Data</h5>
 
-        <p>
+        <p className="leading-loose">
           Unclear on what to do with a fresh blank page? Load some demo data to
           see how a resume should look and you can start editing from there.
         </p>
@@ -99,7 +99,7 @@ const Actions = () => {
       <div className={styles.container}>
         <h5>Delete Account</h5>
 
-        <p>
+        <p className="leading-loose">
           If you would like to delete your account and erase all your resumes,
           it’s just one button away. Please be weary as this is an irreversible
           process.

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

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import { move, reorder } from '../../../../utils';
@@ -37,7 +37,7 @@ const Layout = () => {
       dispatch({
         type: 'on_input',
         payload: {
-          path: 'layout',
+          path: 'metadata.layout',
           value: newState,
         },
       });
@@ -68,11 +68,7 @@ const Layout = () => {
                       Block {ind + 1}
                     </span>
                     {el.map((item, index) => (
-                      <Draggable
-                        key={item.id}
-                        index={index}
-                        draggableId={item.id}
-                      >
+                      <Draggable key={item} index={index} draggableId={item}>
                         {(dragProvided) => (
                           <div
                             ref={dragProvided.innerRef}
@@ -80,7 +76,7 @@ const Layout = () => {
                             {...dragProvided.draggableProps}
                             {...dragProvided.dragHandleProps}
                           >
-                            {item.name}
+                            {item}
                           </div>
                         )}
                       </Draggable>
@@ -97,4 +93,4 @@ const Layout = () => {
   );
 };
 
-export default memo(Layout);
+export default Layout;

src/components/dashboard/ResumePreview.js

@@ -1,7 +1,7 @@
 import { Menu, MenuItem } from '@material-ui/core';
 import { navigate } from 'gatsby';
 import moment from 'moment';
-import React, { memo, useContext, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { MdMoreHoriz, MdOpenInNew } from 'react-icons/md';
 import { toast } from 'react-toastify';
 import DatabaseContext from '../../contexts/DatabaseContext';
@@ -78,4 +78,4 @@ const ResumePreview = ({ resume }) => {
   );
 };
 
-export default memo(ResumePreview);
+export default ResumePreview;