- implement tips on loading screen

- implement centralized sections
- removed react-spinner package

src/components/builder/left/LeftNavbar.js

@@ -1,8 +1,9 @@
 import { Link } from "gatsby";
 import React from "react";
-import { MdPerson } from "react-icons/md";
+import sections from "../../../data/leftSections";
 import Avatar from "../../shared/Avatar";
 import Logo from "../../shared/Logo";
+import SectionIcon from "../../shared/SectionIcon";
 import styles from "./LeftNavbar.module.css";
 
 const LeftNavbar = () => {
@@ -14,11 +15,10 @@ const LeftNavbar = () => {
 
       <hr className="my-6" />
 
-      <div className="grid grid-cols-1 gap-6">
-        <MdPerson
-          className="text-secondary-dark hover:text-primary"
-          size="20px"
-        />
+      <div className="grid grid-cols-1 gap-8">
+        {sections.map((x) => (
+          <SectionIcon key={x.id} section={x} />
+        ))}
       </div>
 
       <hr className="mt-auto my-6" />

src/components/builder/left/LeftSidebar.js

@@ -1,5 +1,5 @@
-import React from "react";
-import Profile from "../sections/Profile";
+import React, { Fragment } from "react";
+import sections from "../../../data/leftSections";
 import LeftNavbar from "./LeftNavbar";
 import styles from "./LeftSidebar.module.css";
 
@@ -9,7 +9,12 @@ const LeftSidebar = () => {
       <LeftNavbar />
 
       <div className={styles.container}>
-        <Profile />
+        {sections.map(({ id, component: Component }) => (
+          <Fragment key={id}>
+            <Component />
+            <hr />
+          </Fragment>
+        ))}
       </div>
     </div>
   );

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

@@ -1,5 +1,6 @@
 .container {
   z-index: 10;
   box-shadow: var(--left-shadow);
-  @apply w-full h-screen p-8;
+  @apply w-full h-screen overflow-scroll p-8;
+  @apply grid gap-6;
 }

src/components/builder/sections/SocialNetwork.js

@@ -0,0 +1,12 @@
+import React from "react";
+import Heading from "../../shared/Heading";
+
+const SocialNetwork = () => {
+  return (
+    <section>
+      <Heading>Social Network</Heading>
+    </section>
+  );
+};
+
+export default SocialNetwork;

src/components/dashboard/ResumePreview.js

@@ -72,7 +72,7 @@ const ResumePreview = ({ resume }) => {
       <div className={styles.meta}>
         <span>{resume.name}</span>
         {resume.updatedAt && (
-          <span>Last updated {moment(resume.updatedAtR).fromNow()}</span>
+          <span>Last updated {moment(resume.updatedAt).fromNow()}</span>
         )}
       </div>
     </div>

src/components/router/LoadingScreen.js

@@ -1,15 +1,16 @@
 import { Fade, Modal } from "@material-ui/core";
 import React from "react";
+import { getRandomTip } from "../../data/tips";
 import Logo from "../shared/Logo";
 
-const LoadingScreen = ({ type }) => {
+const LoadingScreen = () => {
   return (
     <Modal open hideBackdrop>
       <Fade in>
         <div className="w-screen h-screen flex justify-center items-center outline-none">
           <div className="flex flex-col items-center">
             <Logo size="48px" className="mb-4" />
-            <span className="font-medium opacity-75">Fetching {type}</span>
+            <span className="font-medium opacity-75">{getRandomTip()}</span>
           </div>
         </div>
       </Fade>

src/components/router/PrivateRoute.js

@@ -7,7 +7,7 @@ const PrivateRoute = ({ component: Component, location, ...props }) => {
   const { user, loading } = useContext(UserContext);
 
   if (loading) {
-    return <LoadingScreen type="User" />;
+    return <LoadingScreen message="Authenticating..." />;
   }
 
   if (!user) {

src/components/shared/Button.js

@@ -1,6 +1,5 @@
-import React from "react";
 import classNames from "classnames";
-import Loader from "react-loader-spinner";
+import React from "react";
 import styles from "./Button.module.css";
 
 const Button = ({
@@ -27,11 +26,7 @@ const Button = ({
       onClick={isLoading ? undefined : onClick}
     >
       {icon && <Icon size="14" className="mr-2" />}
-      {isLoading ? (
-        <Loader type="ThreeDots" color="#FFF" height={18} width={28} />
-      ) : (
-        title
-      )}
+      {isLoading ? "Loading..." : title}
     </button>
   );
 };

src/components/shared/SectionIcon.js

@@ -0,0 +1,16 @@
+import { Tooltip } from "@material-ui/core";
+import React from "react";
+
+const SectionIcon = ({ section, placement = "right" }) => {
+  const { icon: Icon, name } = section;
+
+  return (
+    <Tooltip title={name} placement={placement} arrow>
+      <div className="cursor-pointer">
+        <Icon className="text-secondary-dark hover:text-primary" size="20px" />
+      </div>
+    </Tooltip>
+  );
+};
+
+export default SectionIcon;