- implement actions section

- implement settings section

src/components/builder/center/Artboard.module.css

@@ -1,8 +1,10 @@
-.container {
-  width: 210mm;
-  height: 297mm;
-  zoom: 0.8;
-  overflow: scroll;
-  box-shadow: var(--shadow);
-  @apply bg-white rounded;
-}
+@media screen {
+  .container {
+    width: 210mm;
+    height: 297mm;
+    zoom: 0.8;
+    overflow: scroll;
+    box-shadow: var(--shadow);
+    @apply bg-white rounded;
+  }  
+}

src/components/builder/right/RightSidebar.js

@@ -8,6 +8,7 @@ import Fonts from './sections/Fonts';
 import Layout from './sections/Layout';
 import Templates from './sections/Templates';
 import Actions from './sections/Actions';
+import Settings from './sections/Settings';
 
 const getComponent = (id) => {
   switch (id) {
@@ -21,6 +22,8 @@ const getComponent = (id) => {
       return Fonts;
     case 'actions':
       return Actions;
+    case 'settings':
+      return Settings;
     default:
       throw new Error();
   }

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

@@ -1,9 +1,7 @@
-import { clone } from 'lodash';
 import React, { memo, useContext, useState } from 'react';
-import { MdImportExport } from 'react-icons/md';
+import { FaFileExport, FaFileImport } from 'react-icons/fa';
 import ModalContext from '../../../../contexts/ModalContext';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
-import UserContext from '../../../../contexts/UserContext';
 import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
@@ -12,33 +10,14 @@ import styles from './Actions.module.css';
 const Actions = () => {
   const [loadDemoText, setLoadDemoText] = useState('Load Demo Data');
   const [resetText, setResetText] = useState('Reset Everything');
-  const [deleteText, setDeleteText] = useState('Delete Account');
 
   const state = useSelector();
   const dispatch = useDispatch();
   const { emitter, events } = useContext(ModalContext);
-  const { deleteAccount } = useContext(UserContext);
 
   const handleImport = () => emitter.emit(events.IMPORT_MODAL);
 
-  const handleExportToJson = () => {
-    const backupObj = clone(state);
-    delete backupObj.id;
-    delete backupObj.user;
-    delete backupObj.name;
-    delete backupObj.createdAt;
-    delete backupObj.updatedAt;
-    const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(
-      JSON.stringify(backupObj),
-    )}`;
-    const dlAnchor = document.getElementById('downloadAnchor');
-    dlAnchor.setAttribute('href', dataStr);
-    dlAnchor.setAttribute(
-      'download',
-      `RxResume_${state.id}_${Date.now()}.json`,
-    );
-    dlAnchor.click();
-  };
+  const handleExport = () => emitter.emit(events.EXPORT_MODAL);
 
   const getSharableUrl = () => {
     const shareId = state.id;
@@ -71,18 +50,6 @@ const Actions = () => {
     dispatch({ type: 'reset_data' });
   };
 
-  const handleDeleteAccount = () => {
-    if (deleteText === 'Delete Account') {
-      setDeleteText('Are you sure?');
-      return;
-    }
-
-    setDeleteText('Buh bye! :(');
-    setTimeout(() => {
-      deleteAccount();
-    }, 500);
-  };
-
   return (
     <section>
       <Heading>Actions</Heading>
@@ -96,7 +63,7 @@ const Actions = () => {
         </p>
 
         <div className="mt-4 flex">
-          <Button icon={MdImportExport} onClick={handleImport}>
+          <Button icon={FaFileImport} onClick={handleImport}>
             Import
           </Button>
         </div>
@@ -111,15 +78,10 @@ const Actions = () => {
         </p>
 
         <div className="mt-4 flex">
-          <Button>Save as PDF</Button>
-          <Button outline className="ml-6" onClick={handleExportToJson}>
-            Export as JSON
+          <Button icon={FaFileExport} onClick={handleExport}>
+            Export
           </Button>
         </div>
-
-        <a id="downloadAnchor" className="hidden">
-          Download Exported JSON
-        </a>
       </div>
 
       <div className={styles.container}>
@@ -164,22 +126,6 @@ const Actions = () => {
           <Button onClick={handleReset}>{resetText}</Button>
         </div>
       </div>
-
-      <div className={styles.container}>
-        <h5>Danger Zone</h5>
-
-        <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.
-        </p>
-
-        <div className="mt-4 flex">
-          <Button isDelete onClick={handleDeleteAccount}>
-            {deleteText}
-          </Button>
-        </div>
-      </div>
     </section>
   );
 };

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

@@ -0,0 +1,62 @@
+import React, { memo, useContext, useState } from 'react';
+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 ThemeContext from '../../../../contexts/ThemeContext';
+import themeConfig from '../../../../data/themeConfig';
+
+const Settings = () => {
+  const [deleteText, setDeleteText] = useState('Delete Account');
+  const { deleteAccount } = useContext(UserContext);
+  const { theme, setTheme } = useContext(ThemeContext);
+
+  const handleChangeTheme = (e) => {
+    setTheme(e.target.value);
+  };
+
+  const handleDeleteAccount = () => {
+    if (deleteText === 'Delete Account') {
+      setDeleteText('Are you sure?');
+      return;
+    }
+
+    setDeleteText('Buh bye! :(');
+    setTimeout(() => {
+      deleteAccount();
+    }, 500);
+  };
+
+  return (
+    <section>
+      <Heading>Settings</Heading>
+
+      <Input
+        label="Theme"
+        type="dropdown"
+        options={Object.keys(themeConfig)}
+        value={theme}
+        onChange={handleChangeTheme}
+      />
+
+      <div className={styles.container}>
+        <h5>Danger Zone</h5>
+
+        <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.
+        </p>
+
+        <div className="mt-4 flex">
+          <Button isDelete onClick={handleDeleteAccount}>
+            {deleteText}
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default memo(Settings);

src/components/builder/right/sections/Settings.module.css

@@ -0,0 +1,11 @@
+.container {
+  @apply bg-primary-100 rounded grid gap-5 p-8;
+}
+
+.container h5 {
+  @apply text-lg font-semibold;
+}
+
+.container p {
+  @apply text-sm font-medium;
+}

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

@@ -1,19 +1,16 @@
 import cx from 'classnames';
-import React, { memo, useContext } from 'react';
+import React, { memo } from 'react';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import templateOptions from '../../../../data/templateOptions';
 import { handleKeyUp } from '../../../../utils';
 import Heading from '../../../shared/Heading';
 import styles from './Templates.module.css';
-import ThemeContext from '../../../../contexts/ThemeContext';
 
 const Templates = () => {
   const dispatch = useDispatch();
   const template = useSelector('metadata.template');
-  const { toggleDarkMode } = useContext(ThemeContext);
 
   const handleClick = (value) => {
-    toggleDarkMode();
     dispatch({
       type: 'on_input',
       payload: {

src/components/landing/Hero.js

@@ -1,8 +1,6 @@
 import { navigate } from 'gatsby';
 import React, { memo, useContext } from 'react';
-import { FaGithub } from 'react-icons/fa';
 import ModalContext from '../../contexts/ModalContext';
-import ThemeContext from '../../contexts/ThemeContext';
 import UserContext from '../../contexts/UserContext';
 import Button from '../shared/Button';
 import Logo from '../shared/Logo';
@@ -10,7 +8,6 @@ import Logo from '../shared/Logo';
 const Hero = () => {
   const { emitter, events } = useContext(ModalContext);
   const { user, loading } = useContext(UserContext);
-  const { toggleDarkMode } = useContext(ThemeContext);
 
   const handleLogin = () => emitter.emit(events.AUTH_MODAL);
 
@@ -36,14 +33,6 @@ const Hero = () => {
               Login
             </Button>
           )}
-          <Button
-            outline
-            className="ml-8"
-            icon={FaGithub}
-            onClick={toggleDarkMode}
-          >
-            GitHub
-          </Button>
         </div>
       </div>
     </div>