- creating the right sidebar

- designing the artboard
- optimizing dark mode performance
- optimizing input onChange handler

src/components/builder/center/Artboard.js

@@ -0,0 +1,8 @@
+import React from "react";
+import styles from "./Artboard.module.css";
+
+const Artboard = () => {
+  return <div className={styles.container}></div>;
+};
+
+export default Artboard;

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

@@ -0,0 +1,6 @@
+.container {
+  width: 400px;
+  height: 600px;
+  box-shadow: var(--shadow);
+  @apply bg-white;
+}

src/components/builder/left/LeftNavbar.js

@@ -1,5 +1,6 @@
 import { Link } from "gatsby";
 import React from "react";
+import { MdPerson } from "react-icons/md";
 import Avatar from "../../shared/Avatar";
 import Logo from "../../shared/Logo";
 import styles from "./LeftNavbar.module.css";
@@ -11,9 +12,16 @@ const LeftNavbar = () => {
         <Logo size="40px" />
       </Link>
 
-      <hr className="my-4" />
+      <hr className="my-6" />
 
-      <hr className="mt-auto my-4" />
+      <div className="grid grid-cols-1 gap-6">
+        <MdPerson
+          className="text-secondary-dark hover:text-primary"
+          size="20px"
+        />
+      </div>
+
+      <hr className="mt-auto my-6" />
 
       <Avatar />
     </div>

src/components/builder/left/LeftNavbar.module.css

@@ -2,5 +2,5 @@
   width: 75px;
   z-index: 20;
   box-shadow: var(--left-shadow);
-  @apply p-4 h-screen flex flex-col items-center;
+  @apply px-4 py-6 h-screen flex flex-col items-center;
 }

src/components/builder/left/LeftSidebar.js

@@ -1,5 +1,5 @@
 import React from "react";
-import Input from "../../shared/Input";
+import Profile from "../sections/Profile";
 import LeftNavbar from "./LeftNavbar";
 import styles from "./LeftSidebar.module.css";
 
@@ -9,13 +9,7 @@ const LeftSidebar = () => {
       <LeftNavbar />
 
       <div className={styles.container}>
-        <section>
-          <h2 className="text-4xl mb-8">Profile</h2>
-          <div className="flex items-center">
-            <div className={styles.circle}></div>
-            <Input label="Photograph" className="ml-6" />
-          </div>
-        </section>
+        <Profile />
       </div>
     </div>
   );

src/components/builder/left/LeftSidebar.module.css

@@ -3,10 +3,3 @@
   box-shadow: var(--left-shadow);
   @apply w-full h-screen p-8;
 }
-
-.circle {
-  width: 60px;
-  height: 60px;
-  flex: 0 0 60px;
-  @apply bg-gray-300 rounded-full;
-}

src/components/builder/right/RightNavbar.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { MdPerson } from "react-icons/md";
+import styles from "./RightNavbar.module.css";
+
+const RightNavbar = () => {
+  return (
+    <div className={styles.container}>
+      <div className="grid grid-cols-1 gap-6">
+        <MdPerson
+          className="text-secondary-dark hover:text-primary"
+          size="20px"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default RightNavbar;

src/components/builder/right/RightNavbar.module.css

@@ -0,0 +1,6 @@
+.container {
+  width: 75px;
+  z-index: 20;
+  box-shadow: var(--right-shadow);
+  @apply px-4 py-6 h-screen flex flex-col items-center;
+}

src/components/builder/right/RightSidebar.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Profile from "../sections/Profile";
+import RightNavbar from "./RightNavbar";
+import styles from "./RightSidebar.module.css";
+
+const RightSidebar = () => {
+  return (
+    <div className="flex">
+      <div className={styles.container}>
+        <Profile />
+      </div>
+
+      <RightNavbar />
+    </div>
+  );
+};
+
+export default RightSidebar;

src/components/builder/right/RightSidebar.module.css

@@ -0,0 +1,5 @@
+.container {
+  z-index: 10;
+  box-shadow: var(--right-shadow);
+  @apply w-full h-screen p-8;
+}

src/components/builder/sections/Profile.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { MdFileUpload } from "react-icons/md";
+import Heading from "../../shared/Heading";
+import Input from "../../shared/Input";
+import styles from "./Profile.module.css";
+
+const Profile = () => {
+  return (
+    <section>
+      <Heading>Profile</Heading>
+      <div className="flex items-center">
+        <div className={styles.circle}>
+          <MdFileUpload size="22px" className="text-secondary-dark" />
+        </div>
+
+        <Input label="Photograph" className="ml-6" path="profile.photograph" />
+      </div>
+
+      <div className="grid grid-cols-2 gap-8">
+        <Input label="First Name" path="profile.firstName" />
+        <Input label="Last Name" path="profile.lastName" />
+      </div>
+    </section>
+  );
+};
+
+export default Profile;

src/components/builder/sections/Profile.module.css

@@ -0,0 +1,6 @@
+.circle {
+  width: 60px;
+  height: 60px;
+  flex: 0 0 60px;
+  @apply flex items-center justify-center bg-secondary rounded-full;
+}

src/components/dashboard/CreateResume.module.css

@@ -12,7 +12,7 @@
 .resume > .page {
   max-width: 184px;
   height: 260px;
-  @apply rounded absolute w-full bg-white;
+  @apply rounded absolute w-full bg-inverse;
   @apply transition-opacity duration-200 ease-in-out;
   @apply cursor-pointer absolute text-gray-500 flex justify-center items-center;
 }

src/components/dashboard/ResumePreview.js

@@ -4,14 +4,14 @@ import moment from "moment";
 import React, { useContext, useState } from "react";
 import { MdMoreHoriz, MdOpenInNew } from "react-icons/md";
 import { toast } from "react-toastify";
+import DashboardContext from "../../contexts/DashboardContext";
 import ModalContext from "../../contexts/ModalContext";
-import ResumeContext from "../../contexts/ResumeContext";
 import styles from "./ResumePreview.module.css";
 
 const ResumePreview = ({ resume }) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const { createResumeModal } = useContext(ModalContext);
-  const { deleteResume } = useContext(ResumeContext);
+  const { deleteResume } = useContext(DashboardContext);
 
   const handleOpen = () => navigate(`/app/builder/${resume.id}`);
 

src/components/shared/Heading.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Heading = ({ children }) => {
+  return <h2 className="text-4xl">{children}</h2>;
+};
+
+export default Heading;

src/components/shared/Input.js

@@ -1,11 +1,14 @@
 import cx from "classnames";
-import React from "react";
+import { get } from "lodash";
+import React, { useContext } from "react";
 import { v4 as uuidv4 } from "uuid";
+import ResumeContext from "../../contexts/ResumeContext";
 import styles from "./Input.module.css";
 
 const Input = ({
-  label,
   name,
+  path,
+  label,
   value,
   error,
   onChange,
@@ -14,6 +17,20 @@ const Input = ({
   type = "text",
 }) => {
   const uuid = uuidv4();
+  const { state, dispatch } = useContext(ResumeContext);
+
+  const inputProps = (path) => ({
+    value: get(state, path),
+    onChange: (e) => {
+      dispatch({
+        type: "on_input",
+        payload: {
+          path,
+          value: e.target.value,
+        },
+      });
+    },
+  });
 
   return (
     <div className={cx(styles.container, className)}>
@@ -26,8 +43,9 @@ const Input = ({
           value={value}
           onChange={onChange}
           placeholder={placeholder}
+          {...(path && inputProps(path))}
         />
-        <p className="mt-1 text-red-600 text-sm">{error}</p>
+        <p>{error}</p>
       </label>
     </div>
   );

src/components/shared/Input.module.css

@@ -7,13 +7,21 @@
 }
 
 .container > label > span {
-  @apply mb-1 text-gray-600 font-medium text-sm uppercase;
+  @apply mb-1 text-secondary-dark font-medium text-xs uppercase;
 }
 
 .container > label > input {
-  @apply py-4 px-4 rounded bg-gray-200 border border-gray-200;
+  @apply py-3 px-4 rounded bg-secondary text-primary border border-secondary;
+}
+
+.container > label > input::placeholder {
+  @apply text-primary opacity-50;
 }
 
 .container > label > input:focus {
-  @apply outline-none border-gray-400;
+  @apply outline-none border-secondary-dark;
+}
+
+.container > label > p {
+  @apply mt-1 text-red-600 text-xs;
 }