From 36800a944e715b9e630420defc9e2d9f75a3844e Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Wed, 25 Mar 2020 11:39:33 +0530
Subject: [PATCH] styling, formatting, validation

---
 src/components/LeftSidebar/LeftSidebar.js     |  2 +-
 src/components/LeftSidebar/tabs/Awards.js     | 14 +++-
 .../LeftSidebar/tabs/Certifications.js        | 15 +++-
 src/components/LeftSidebar/tabs/Education.js  | 22 +++++-
 src/components/LeftSidebar/tabs/Extras.js     | 13 +++-
 src/components/LeftSidebar/tabs/Objective.js  |  3 +-
 src/components/LeftSidebar/tabs/Profile.js    | 20 ++---
 src/components/LeftSidebar/tabs/Skills.js     | 11 ++-
 src/components/LeftSidebar/tabs/Work.js       | 21 +++++-
 src/index.css                                 | 13 ++--
 src/shared/TabBar.js                          | 73 +++++++++++++------
 11 files changed, 143 insertions(+), 64 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.js b/src/components/LeftSidebar/LeftSidebar.js
index c62f7889..890e0e48 100644
--- a/src/components/LeftSidebar/LeftSidebar.js
+++ b/src/components/LeftSidebar/LeftSidebar.js
@@ -27,7 +27,7 @@ const LeftSidebar = () => {
   const { state, dispatch } = context;
   const { data } = state;
 
-  const [currentTab, setCurrentTab] = useState('Objective');
+  const [currentTab, setCurrentTab] = useState('Profile');
   const onChange = (key, value) => {
     dispatch({
       type: 'on_input',
diff --git a/src/components/LeftSidebar/tabs/Awards.js b/src/components/LeftSidebar/tabs/Awards.js
index d75ef5b5..e734aee4 100644
--- a/src/components/LeftSidebar/tabs/Awards.js
+++ b/src/components/LeftSidebar/tabs/Awards.js
@@ -12,7 +12,7 @@ const AwardsTab = ({ data, onChange }) => {
 
   return (
     <>
-      <div className="grid grid-cols-6 items-center">
+      <div className="mb-6 grid grid-cols-6 items-center">
         <div className="col-span-1">
           <Checkbox
             checked={data.awards.enable}
@@ -57,6 +57,8 @@ const AddItem = ({ dispatch }) => {
   const onChange = (key, value) => setItem(set({ ...item }, key, value));
 
   const addItem = () => {
+    if (item.title === '') return;
+
     dispatch({
       type: 'add_item',
       payload: {
@@ -75,7 +77,7 @@ const AddItem = ({ dispatch }) => {
   };
 
   return (
-    <div className="border border-gray-200 rounded p-5">
+    <div className="my-4 border border-gray-200 rounded p-5">
       <div
         className="flex justify-between items-center cursor-pointer"
         onClick={() => setOpen(!isOpen)}
@@ -87,6 +89,7 @@ const AddItem = ({ dispatch }) => {
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
         <TextField
           label="Title"
+          className="mb-6"
           placeholder="Math &amp; Science Olympiad"
           value={item.title}
           onChange={v => onChange('title', v)}
@@ -94,6 +97,7 @@ const AddItem = ({ dispatch }) => {
 
         <TextField
           label="Subtitle"
+          className="mb-6"
           placeholder="First Place, International Level"
           value={item.subtitle}
           onChange={v => onChange('subtitle', v)}
@@ -102,7 +106,7 @@ const AddItem = ({ dispatch }) => {
         <button
           type="button"
           onClick={addItem}
-          className="mt-4 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
+          className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
         >
           <div className="flex items-center">
             <i className="material-icons mr-2 font-bold text-base">add</i>
@@ -158,6 +162,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
         <TextField
           label="Title"
+          className="mb-6"
           placeholder="Math &amp; Science Olympiad"
           value={item.title}
           onChange={v => onChange(`${identifier}.title`, v)}
@@ -165,12 +170,13 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
 
         <TextField
           label="Subtitle"
+          className="mb-6"
           placeholder="First Place, International Level"
           value={item.subtitle}
           onChange={v => onChange(`${identifier}.subtitle`, v)}
         />
 
-        <div className="mt-6 flex justify-between">
+        <div className="flex justify-between">
           <button
             type="button"
             onClick={deleteItem}
diff --git a/src/components/LeftSidebar/tabs/Certifications.js b/src/components/LeftSidebar/tabs/Certifications.js
index 47e2a7ff..a36f1f46 100644
--- a/src/components/LeftSidebar/tabs/Certifications.js
+++ b/src/components/LeftSidebar/tabs/Certifications.js
@@ -12,7 +12,7 @@ const CertificationsTab = ({ data, onChange }) => {
 
   return (
     <>
-      <div className="grid grid-cols-6 items-center">
+      <div className="my-6 grid grid-cols-6 items-center">
         <div className="col-span-1">
           <Checkbox
             checked={data.certifications.enable}
@@ -41,6 +41,7 @@ const CertificationsTab = ({ data, onChange }) => {
           last={index === data.certifications.items.length - 1}
         />
       ))}
+
       <AddItem dispatch={dispatch} />
     </>
   );
@@ -57,6 +58,8 @@ const AddItem = ({ dispatch }) => {
   const onChange = (key, value) => setItem(set({ ...item }, key, value));
 
   const addItem = () => {
+    if (item.title === '') return;
+
     dispatch({
       type: 'add_item',
       payload: {
@@ -75,7 +78,7 @@ const AddItem = ({ dispatch }) => {
   };
 
   return (
-    <div className="border border-gray-200 rounded p-5">
+    <div className="my-4 border border-gray-200 rounded p-5">
       <div
         className="flex justify-between items-center cursor-pointer"
         onClick={() => setOpen(!isOpen)}
@@ -87,6 +90,7 @@ const AddItem = ({ dispatch }) => {
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
         <TextField
           label="Title"
+          className="mb-6"
           placeholder="Android Development Nanodegree"
           value={item.title}
           onChange={v => onChange('title', v)}
@@ -94,6 +98,7 @@ const AddItem = ({ dispatch }) => {
 
         <TextField
           label="Subtitle"
+          className="mb-6"
           placeholder="Udacity"
           value={item.subtitle}
           onChange={v => onChange('subtitle', v)}
@@ -102,7 +107,7 @@ const AddItem = ({ dispatch }) => {
         <button
           type="button"
           onClick={addItem}
-          className="mt-4 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
+          className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
         >
           <div className="flex items-center">
             <i className="material-icons mr-2 font-bold text-base">add</i>
@@ -158,6 +163,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
         <TextField
           label="Title"
+          className="mb-6"
           placeholder="Android Development Nanodegree"
           value={item.title}
           onChange={v => onChange(`${identifier}.title`, v)}
@@ -165,12 +171,13 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
 
         <TextField
           label="Subtitle"
+          className="mb-6"
           placeholder="Udacity"
           value={item.subtitle}
           onChange={v => onChange(`${identifier}.subtitle`, v)}
         />
 
-        <div className="mt-6 flex justify-between">
+        <div className="flex justify-between">
           <button
             type="button"
             onClick={deleteItem}
diff --git a/src/components/LeftSidebar/tabs/Education.js b/src/components/LeftSidebar/tabs/Education.js
index f98d4a67..a40eddc3 100644
--- a/src/components/LeftSidebar/tabs/Education.js
+++ b/src/components/LeftSidebar/tabs/Education.js
@@ -13,7 +13,7 @@ const EducationTab = ({ data, onChange }) => {
 
   return (
     <>
-      <div className="grid grid-cols-6 items-center">
+      <div className="mb-6 grid grid-cols-6 items-center">
         <div className="col-span-1">
           <Checkbox
             checked={data.education.enable}
@@ -62,6 +62,8 @@ const AddItem = ({ dispatch }) => {
   const onChange = (key, value) => setItem(set({ ...item }, key, value));
 
   const addItem = () => {
+    if (item.name === '' || item.major === '') return;
+
     dispatch({
       type: 'add_item',
       payload: {
@@ -84,7 +86,7 @@ const AddItem = ({ dispatch }) => {
   };
 
   return (
-    <div className="border border-gray-200 rounded p-5">
+    <div className="my-4 border border-gray-200 rounded p-5">
       <div
         className="flex justify-between items-center cursor-pointer"
         onClick={() => setOpen(!isOpen)}
@@ -96,6 +98,7 @@ const AddItem = ({ dispatch }) => {
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
         <TextField
           label="Name"
+          className="mb-6"
           placeholder="Harvard University"
           value={item.name}
           onChange={v => onChange('name', v)}
@@ -103,6 +106,7 @@ const AddItem = ({ dispatch }) => {
 
         <TextField
           label="Major"
+          className="mb-6"
           placeholder="Masters in Computer Science"
           value={item.major}
           onChange={v => onChange('major', v)}
@@ -110,6 +114,7 @@ const AddItem = ({ dispatch }) => {
 
         <TextField
           label="Grade"
+          className="mb-6"
           placeholder="7.2 CGPA"
           value={item.grade}
           onChange={v => onChange('grade', v)}
@@ -118,6 +123,7 @@ const AddItem = ({ dispatch }) => {
         <div className="grid grid-cols-2 col-gap-4">
           <TextField
             label="Start Date"
+            className="mb-6"
             placeholder="March 2018"
             value={item.start}
             onChange={v => onChange('start', v)}
@@ -125,6 +131,7 @@ const AddItem = ({ dispatch }) => {
 
           <TextField
             label="End Date"
+            className="mb-6"
             placeholder="May 2020"
             value={item.end}
             onChange={v => onChange('end', v)}
@@ -133,6 +140,7 @@ const AddItem = ({ dispatch }) => {
 
         <TextArea
           rows="5"
+          className="mb-6"
           label="Description"
           placeholder="You can write about projects or special credit classes that you took while studying at this school."
           value={item.description}
@@ -142,7 +150,7 @@ const AddItem = ({ dispatch }) => {
         <button
           type="button"
           onClick={addItem}
-          className="mt-4 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
+          className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
         >
           <div className="flex items-center">
             <i className="material-icons mr-2 font-bold text-base">add</i>
@@ -198,6 +206,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
         <TextField
           label="Name"
+          className="mb-6"
           placeholder="Harvard University"
           value={item.name}
           onChange={v => onChange(`${identifier}.name`, v)}
@@ -205,6 +214,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
 
         <TextField
           label="Major"
+          className="mb-6"
           placeholder="Masters in Computer Science"
           value={item.major}
           onChange={v => onChange(`${identifier}.major`, v)}
@@ -212,6 +222,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
 
         <TextField
           label="Grade"
+          className="mb-6"
           placeholder="7.2 CGPA"
           value={item.grade}
           onChange={v => onChange(`${identifier}.grade`, v)}
@@ -220,6 +231,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
         <div className="grid grid-cols-2 col-gap-4">
           <TextField
             label="Start Date"
+            className="mb-6"
             placeholder="March 2018"
             value={item.start}
             onChange={v => onChange(`${identifier}.start`, v)}
@@ -227,6 +239,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
 
           <TextField
             label="End Date"
+            className="mb-6"
             placeholder="May 2020"
             value={item.end}
             onChange={v => onChange(`${identifier}.end`, v)}
@@ -235,13 +248,14 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
 
         <TextArea
           rows="5"
+          className="mb-6"
           label="Description"
           placeholder="You can write about projects or special credit classes that you took while studying at this school."
           value={item.description}
           onChange={v => onChange(`${identifier}.description`, v)}
         />
 
-        <div className="mt-6 flex justify-between">
+        <div className="flex justify-between">
           <button
             type="button"
             onClick={deleteItem}
diff --git a/src/components/LeftSidebar/tabs/Extras.js b/src/components/LeftSidebar/tabs/Extras.js
index 7d109322..51b7f306 100644
--- a/src/components/LeftSidebar/tabs/Extras.js
+++ b/src/components/LeftSidebar/tabs/Extras.js
@@ -12,7 +12,7 @@ const ExtrasTab = ({ data, onChange }) => {
 
   return (
     <>
-      <div className="grid grid-cols-6 items-center">
+      <div className="mb-6 grid grid-cols-6 items-center">
         <div className="col-span-1">
           <Checkbox
             checked={data.extras.enable}
@@ -41,6 +41,7 @@ const ExtrasTab = ({ data, onChange }) => {
           last={index === data.extras.items.length - 1}
         />
       ))}
+
       <AddItem dispatch={dispatch} />
     </>
   );
@@ -57,6 +58,8 @@ const AddItem = ({ dispatch }) => {
   const onChange = (key, value) => setItem(items => set({ ...items }, key, value));
 
   const addItem = () => {
+    if (item.key === '' || item.value === '') return;
+
     dispatch({
       type: 'add_item',
       payload: {
@@ -75,7 +78,7 @@ const AddItem = ({ dispatch }) => {
   };
 
   return (
-    <div className="border border-gray-200 rounded p-5">
+    <div className="my-4 border border-gray-200 rounded p-5">
       <div
         className="flex justify-between items-center cursor-pointer"
         onClick={() => setOpen(!isOpen)}
@@ -87,6 +90,7 @@ const AddItem = ({ dispatch }) => {
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
         <TextField
           label="Key"
+          className="mb-6"
           placeholder="Date of Birth"
           value={item.key}
           onChange={v => onChange('key', v)}
@@ -94,6 +98,7 @@ const AddItem = ({ dispatch }) => {
 
         <TextField
           label="Value"
+          className="mb-6"
           placeholder="6th August 1995"
           value={item.value}
           onChange={v => onChange('value', v)}
@@ -102,7 +107,7 @@ const AddItem = ({ dispatch }) => {
         <button
           type="button"
           onClick={addItem}
-          className="mt-4 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
+          className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
         >
           <div className="flex items-center">
             <i className="material-icons mr-2 font-bold text-base">add</i>
@@ -158,6 +163,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
         <TextField
           label="Key"
+          className="mb-6"
           placeholder="Date of Birth"
           value={item.key}
           onChange={v => onChange(`${identifier}.key`, v)}
@@ -165,6 +171,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
 
         <TextField
           label="Value"
+          className="mb-6"
           placeholder="6th August 1995"
           value={item.value}
           onChange={v => onChange(`${identifier}.value`, v)}
diff --git a/src/components/LeftSidebar/tabs/Objective.js b/src/components/LeftSidebar/tabs/Objective.js
index de93d777..34eb9ffa 100644
--- a/src/components/LeftSidebar/tabs/Objective.js
+++ b/src/components/LeftSidebar/tabs/Objective.js
@@ -6,7 +6,7 @@ import Checkbox from '../../../shared/Checkbox';
 const ObjectiveTab = ({ data, onChange }) => {
   return (
     <div>
-      <div className="grid grid-cols-6 items-center">
+      <div className="mb-6 grid grid-cols-6 items-center">
         <div className="col-span-1">
           <Checkbox
             checked={data.objective.enable}
@@ -26,6 +26,7 @@ const ObjectiveTab = ({ data, onChange }) => {
 
       <TextArea
         rows="15"
+        className="mb-6"
         label="Objective"
         placeholder="Looking for a challenging role in a reputable organization to utilize my technical, database, and management skills for the growth of the organization as well as to enhance my knowledge about new and emerging trends in the IT sector."
         value={data.objective.body}
diff --git a/src/components/LeftSidebar/tabs/Profile.js b/src/components/LeftSidebar/tabs/Profile.js
index e4bb4c16..d2336a8e 100644
--- a/src/components/LeftSidebar/tabs/Profile.js
+++ b/src/components/LeftSidebar/tabs/Profile.js
@@ -4,7 +4,7 @@ import TextField from '../../../shared/TextField';
 const ProfileTab = ({ data, onChange }) => (
   <div>
     <TextField
-      className="mb-4"
+      className="mb-6"
       label="Photo URL"
       placeholder="https://i.imgur.com/..."
       value={data.profile.photo}
@@ -13,7 +13,7 @@ const ProfileTab = ({ data, onChange }) => (
 
     <div className="grid grid-cols-2 col-gap-4">
       <TextField
-        className="mb-4"
+        className="mb-6"
         label="First Name"
         placeholder="Jane"
         value={data.profile.firstName}
@@ -21,7 +21,7 @@ const ProfileTab = ({ data, onChange }) => (
       />
 
       <TextField
-        className="mb-4"
+        className="mb-6"
         label="Last Name"
         placeholder="Doe"
         value={data.profile.lastName}
@@ -30,7 +30,7 @@ const ProfileTab = ({ data, onChange }) => (
     </div>
 
     <TextField
-      className="mb-4"
+      className="mb-6"
       label="Subtitle"
       placeholder="Full Stack Web Developer"
       value={data.profile.subtitle}
@@ -40,7 +40,7 @@ const ProfileTab = ({ data, onChange }) => (
     <hr className="my-6" />
 
     <TextField
-      className="mb-4"
+      className="mb-6"
       label="Address Line 1"
       placeholder="Palladium Complex"
       value={data.profile.address.line1}
@@ -48,7 +48,7 @@ const ProfileTab = ({ data, onChange }) => (
     />
 
     <TextField
-      className="mb-4"
+      className="mb-6"
       label="Address Line 2"
       placeholder="140 E 14th St"
       value={data.profile.address.line2}
@@ -56,7 +56,7 @@ const ProfileTab = ({ data, onChange }) => (
     />
 
     <TextField
-      className="mb-4"
+      className="mb-6"
       label="Address Line 3"
       placeholder="New York, NY 10003 USA"
       value={data.profile.address.line3}
@@ -66,7 +66,7 @@ const ProfileTab = ({ data, onChange }) => (
     <hr className="my-6" />
 
     <TextField
-      className="mb-4"
+      className="mb-6"
       label="Phone Number"
       placeholder="+1 541 754 3010"
       value={data.profile.phone}
@@ -74,7 +74,7 @@ const ProfileTab = ({ data, onChange }) => (
     />
 
     <TextField
-      className="mb-4"
+      className="mb-6"
       label="Website"
       placeholder="google.com"
       value={data.profile.website}
@@ -82,7 +82,7 @@ const ProfileTab = ({ data, onChange }) => (
     />
 
     <TextField
-      className="mb-4"
+      className="mb-6"
       label="Email Address"
       placeholder="john.doe@example.com"
       value={data.profile.email}
diff --git a/src/components/LeftSidebar/tabs/Skills.js b/src/components/LeftSidebar/tabs/Skills.js
index 890616fe..eb26fc84 100644
--- a/src/components/LeftSidebar/tabs/Skills.js
+++ b/src/components/LeftSidebar/tabs/Skills.js
@@ -10,7 +10,7 @@ const SkillsTab = ({ data, onChange }) => {
 
   return (
     <>
-      <div className="grid grid-cols-6 items-center">
+      <div className="my-6 grid grid-cols-6 items-center">
         <div className="col-span-1">
           <Checkbox
             checked={data.skills.enable}
@@ -31,6 +31,7 @@ const SkillsTab = ({ data, onChange }) => {
       {data.skills.items.map((x, index) => (
         <Item item={x} key={x} index={index} onChange={onChange} dispatch={dispatch} />
       ))}
+
       <AddItem dispatch={dispatch} />
     </>
   );
@@ -41,6 +42,8 @@ const AddItem = ({ dispatch }) => {
   const [item, setItem] = useState('');
 
   const addItem = () => {
+    if (item === '') return;
+
     dispatch({
       type: 'add_item',
       payload: {
@@ -54,7 +57,7 @@ const AddItem = ({ dispatch }) => {
   };
 
   return (
-    <div className="mt-4 border border-gray-200 rounded p-5">
+    <div className="my-4 border border-gray-200 rounded p-5">
       <div
         className="flex justify-between items-center cursor-pointer"
         onClick={() => setOpen(!isOpen)}
@@ -64,7 +67,7 @@ const AddItem = ({ dispatch }) => {
       </div>
 
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
-        <div className="mt-4 grid grid-cols-4 col-gap-4">
+        <div className="grid grid-cols-4 col-gap-4">
           <div className="col-span-3">
             <input
               className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
@@ -103,7 +106,7 @@ const Item = ({ item, index, onChange, dispatch }) => {
     });
 
   return (
-    <div className="mt-4 grid grid-cols-6">
+    <div className="my-4 grid grid-cols-6">
       <div className="col-span-5">
         <input
           className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
diff --git a/src/components/LeftSidebar/tabs/Work.js b/src/components/LeftSidebar/tabs/Work.js
index d86faa8a..77f97532 100644
--- a/src/components/LeftSidebar/tabs/Work.js
+++ b/src/components/LeftSidebar/tabs/Work.js
@@ -13,7 +13,7 @@ const WorkTab = ({ data, onChange }) => {
 
   return (
     <>
-      <div className="grid grid-cols-6 items-center">
+      <div className="mb-6 grid grid-cols-6 items-center">
         <div className="col-span-1">
           <Checkbox checked={data.work.enable} onChange={v => onChange('data.work.enable', v)} />
         </div>
@@ -39,6 +39,7 @@ const WorkTab = ({ data, onChange }) => {
           last={index === data.work.items.length - 1}
         />
       ))}
+
       <AddItem dispatch={dispatch} />
     </>
   );
@@ -58,6 +59,8 @@ const AddItem = ({ dispatch }) => {
   const onChange = (key, value) => setItem(set({ ...item }, key, value));
 
   const addItem = () => {
+    if (item.title === '' || item.role === '') return;
+
     dispatch({
       type: 'add_item',
       payload: {
@@ -79,7 +82,7 @@ const AddItem = ({ dispatch }) => {
   };
 
   return (
-    <div className="border border-gray-200 rounded p-5">
+    <div className="my-4 border border-gray-200 rounded p-5">
       <div
         className="flex justify-between items-center cursor-pointer"
         onClick={() => setOpen(!isOpen)}
@@ -91,6 +94,7 @@ const AddItem = ({ dispatch }) => {
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
         <TextField
           label="Name"
+          className="mb-6"
           placeholder="Amazon US"
           value={item.title}
           onChange={v => onChange('title', v)}
@@ -98,6 +102,7 @@ const AddItem = ({ dispatch }) => {
 
         <TextField
           label="Role"
+          className="mb-6"
           placeholder="Frontend Web Developer"
           value={item.role}
           onChange={v => onChange('role', v)}
@@ -106,6 +111,7 @@ const AddItem = ({ dispatch }) => {
         <div className="grid grid-cols-2 col-gap-4">
           <TextField
             label="Start Date"
+            className="mb-6"
             placeholder="March 2018"
             value={item.start}
             onChange={v => onChange('start', v)}
@@ -113,6 +119,7 @@ const AddItem = ({ dispatch }) => {
 
           <TextField
             label="End Date"
+            className="mb-6"
             placeholder="current"
             value={item.end}
             onChange={v => onChange('end', v)}
@@ -121,6 +128,7 @@ const AddItem = ({ dispatch }) => {
 
         <TextArea
           rows="5"
+          className="mb-6"
           label="Description"
           placeholder="You can write about what you specialized in while working at the company and what projects you were a part of."
           value={item.description}
@@ -130,7 +138,7 @@ const AddItem = ({ dispatch }) => {
         <button
           type="button"
           onClick={addItem}
-          className="mt-4 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
+          className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
         >
           <div className="flex items-center">
             <i className="material-icons mr-2 font-bold text-base">add</i>
@@ -186,6 +194,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
         <TextField
           label="Name"
+          className="mb-6"
           placeholder="Amazon US"
           value={item.title}
           onChange={v => onChange(`${identifier}.title`, v)}
@@ -193,6 +202,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
 
         <TextField
           label="Role"
+          className="mb-6"
           placeholder="Frontend Web Developer"
           value={item.role}
           onChange={v => onChange(`${identifier}.role`, v)}
@@ -201,6 +211,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
         <div className="grid grid-cols-2 col-gap-4">
           <TextField
             label="Start Date"
+            className="mb-6"
             placeholder="March 2018"
             value={item.start}
             onChange={v => onChange(`${identifier}.start`, v)}
@@ -208,6 +219,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
 
           <TextField
             label="End Date"
+            className="mb-6"
             placeholder="current"
             value={item.end}
             onChange={v => onChange(`${identifier}.end`, v)}
@@ -216,13 +228,14 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
 
         <TextArea
           rows="5"
+          className="mb-6"
           label="Description"
           placeholder="You can write about what you specialized in while working at the company and what projects you were a part of."
           value={item.description}
           onChange={v => onChange(`${identifier}.description`, v)}
         />
 
-        <div className="mt-6 flex justify-between">
+        <div className="flex justify-between">
           <button
             type="button"
             onClick={deleteItem}
diff --git a/src/index.css b/src/index.css
index e88e4543..6fbbf6fb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -18,19 +18,16 @@ body {
     bottom: 0;
   }
 
+  #tabs {
+    scroll-behavior: smooth;
+  }
+
   #tabs::-webkit-scrollbar {
     width: 0px;
+    height: 0px;
     background: transparent; /* make scrollbar transparent */
   }
 
-  #tabs li:first-child {
-    padding-left: 1.5em;
-  }
-
-  #tabs li:last-child {
-    padding-right: 1.5em;
-  }
-
   #page {
     width: 21cm;
     height: 29.7cm;
diff --git a/src/shared/TabBar.js b/src/shared/TabBar.js
index 19970035..c29df6ca 100644
--- a/src/shared/TabBar.js
+++ b/src/shared/TabBar.js
@@ -1,27 +1,58 @@
-import React from 'react';
+import React, { useRef } from 'react';
 
 const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
+  const tabsRef = useRef(null);
+
+  const scrollBy = x => {
+    const index = tabs.indexOf(currentTab);
+    tabsRef.current.scrollLeft += x;
+
+    if (x < 0 && index > 0) {
+      setCurrentTab(tabs[index - 1]);
+    }
+
+    if (x > 0 && index < tabs.length - 1) {
+      setCurrentTab(tabs[index + 1]);
+    }
+  };
+
   return (
-    <ul id="tabs" className="my-4 flex items-center overflow-x-scroll">
-      {tabs.map(tab =>
-        currentTab === tab ? (
-          <li key={tab} className="mx-1">
-            <div className="whitespace-no-wrap bg-gray-700 text-white rounded-md text-sm py-2 px-6 font-medium">
-              {tab}
-            </div>
-          </li>
-        ) : (
-          <li key={tab} className="mx-1">
-            <div
-              className="bg-white whitespace-no-wrap rounded-md cursor-pointer text-sm py-2 px-6 font-medium hover:bg-gray-200"
-              onClick={() => setCurrentTab(tab)}
-            >
-              {tab}
-            </div>
-          </li>
-        ),
-      )}
-    </ul>
+    <div className="my-6 mx-4 flex items-center">
+      <div
+        className="flex mr-1 cursor-pointer select-none text-gray-600 hover:text-gray-800"
+        onClick={() => scrollBy(-100)}
+      >
+        <i className="material-icons">chevron_left</i>
+      </div>
+
+      <ul id="tabs" ref={tabsRef} className="flex overflow-x-scroll">
+        {tabs.map(tab =>
+          currentTab === tab ? (
+            <li key={tab} className="mx-1">
+              <div className="whitespace-no-wrap bg-gray-700 text-white rounded-md text-sm py-2 px-6 font-medium">
+                {tab}
+              </div>
+            </li>
+          ) : (
+            <li key={tab} className="mx-1">
+              <div
+                className="bg-white whitespace-no-wrap rounded-md cursor-pointer text-sm py-2 px-6 font-medium hover:bg-gray-200"
+                onClick={() => setCurrentTab(tab)}
+              >
+                {tab}
+              </div>
+            </li>
+          ),
+        )}
+      </ul>
+
+      <div
+        className="flex ml-1 cursor-pointer select-none text-gray-600 hover:text-gray-800"
+        onClick={() => scrollBy(100)}
+      >
+        <i className="material-icons">chevron_right</i>
+      </div>
+    </div>
   );
 };