- implement tips on loading screen

- implement centralized sections
- removed react-spinner package

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;