- creating a dynamic color palette

- implementing actions section

src/components/builder/right/RightNavbar.js

@@ -7,7 +7,7 @@ import SyncIndicator from './SyncIndicator';
 const RightNavbar = () => {
   return (
     <div className={styles.container}>
-      <div className="grid grid-cols-1 gap-4 text-secondary-dark">
+      <div className="grid grid-cols-1 gap-4 text-primary-400">
         {sections.map((x) => (
           <SectionIcon
             key={x.id}

src/components/builder/right/RightSidebar.js

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

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

@@ -0,0 +1,83 @@
+import React, { memo } from 'react';
+import { MdImportExport } from 'react-icons/md';
+import Heading from '../../../shared/Heading';
+import Button from '../../../shared/Button';
+import styles from './Actions.module.css';
+import Input from '../../../shared/Input';
+
+const Actions = () => {
+  return (
+    <section>
+      <Heading>Actions</Heading>
+
+      <div className={styles.container}>
+        <h5>Import from Other Sources</h5>
+
+        <p>
+          You can import your information from various sources like JSON Resume
+          or your LinkedIn profile to autofill most of the data for your resume.
+        </p>
+
+        <div className="mt-4 flex">
+          <Button icon={MdImportExport} title="Import" />
+        </div>
+      </div>
+
+      <div className={styles.container}>
+        <h5>Export Your Resume</h5>
+
+        <p>
+          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>
+
+        <div className="mt-4 flex">
+          <Button title="Save as PDF" />
+          <Button outline title="Export as JSON" className="ml-6" />
+        </div>
+      </div>
+
+      <div className={styles.container}>
+        <h5>Share Your Resume</h5>
+
+        <p>
+          The link below will be accessible publicly if you choose, and you can
+          share the latest version of your resume to anyone in the world.
+        </p>
+
+        <div>
+          <Input type="action" value="https://google.com" onClick={() => {}} />
+        </div>
+      </div>
+
+      <div className={styles.container}>
+        <h5>Load Demo Data</h5>
+
+        <p>
+          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>
+
+        <div className="mt-4 flex">
+          <Button title="Load Demo Data" />
+        </div>
+      </div>
+
+      <div className={styles.container}>
+        <h5>Delete Account</h5>
+
+        <p>
+          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 title="Delete Account" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default memo(Actions);

src/components/builder/right/sections/Actions.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/Fonts.js

@@ -1,9 +1,9 @@
 import cx from 'classnames';
 import React, { memo } from 'react';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
+import fonts from '../../../../data/fonts';
 import { handleKeyUp } from '../../../../utils';
 import Heading from '../../../shared/Heading';
-import fonts from '../../../../data/fonts';
 import styles from './Fonts.module.css';
 
 const Fonts = () => {

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

@@ -1,19 +1,15 @@
 .font {
-  @apply px-6 py-6 text-xl font-medium truncate text-center bg-secondary rounded shadow;
-  @apply transition-colors duration-200 ease-in-out;
+  @apply px-6 py-6 text-xl font-medium truncate text-center border border-transparent bg-primary-100 rounded;
 }
 
 .font:focus {
-  @apply outline-none bg-secondary-light;
-  @apply transition-colors duration-200 ease-in-out;
+  @apply outline-none border border-primary-400;
 }
 
 .font:hover {
-  @apply bg-secondary-light;
-  @apply transition-colors duration-200 ease-in-out;
+  @apply border border-primary-400;
 }
 
 .font.selected {
-  @apply outline-none bg-secondary-light;
-  @apply transition-colors duration-200 ease-in-out;
+  @apply outline-none border border-primary-600;
 }

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

@@ -1,7 +1,7 @@
 .droppable {
-  @apply p-6 bg-secondary-light col-span-1 rounded;
+  @apply p-6 bg-primary-100 col-span-1 rounded;
 }
 
 .draggable {
-  @apply px-4 py-2 capitalize font-medium rounded bg-secondary;
+  @apply px-4 py-2 capitalize font-medium rounded bg-primary-200;
 }

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

@@ -1,16 +1,19 @@
 import cx from 'classnames';
-import React, { memo } from 'react';
+import React, { memo, useContext } from 'react';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import templates from '../../../../data/templates';
 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/builder/right/sections/Templates.module.css

@@ -8,12 +8,12 @@
 
 .template img {
   height: 240px;
-  @apply w-full object-cover border-2 border-transparent rounded;
+  @apply w-full object-cover border border-transparent rounded;
   @apply transition-opacity duration-200 ease-in-out;
 }
 
 .template.selected img {
-  @apply border-2 border-primary;
+  @apply border-primary-600;
 }
 
 .template:hover img {