settings (import/export) WiP

src/components/Navbar/index.tsx

@@ -13,6 +13,7 @@ const Navbar = (): React.ReactNode => {
       <StyledNavLink path="/" text="About" />
       <StyledNavLink path="/graph" text="Graph" />
       <StyledNavLink path="/how-to" text="How To" />
+      <StyledNavLink path="/settings" text="Settings" />
       {auth === true ? (
         <StyledNavLink path="/logout" text="Logout" />
       ) : (

src/pages/Graph/index.tsx

@@ -32,7 +32,8 @@ import { IoIosGitNetwork } from "react-icons/io";
 import { WiCloudRefresh } from "react-icons/wi";
 import { MdOutlineLock, MdOutlineLockOpen } from "react-icons/md";
 import { AiFillSpotify } from "react-icons/ai";
-import { PiSupersetOf, PiSubsetOf } from "react-icons/pi";
+import { GiFamilyTree } from "react-icons/gi";
+import { IoArrowDownOutline, IoArrowUpOutline } from "react-icons/io5";
 
 import {
   showErrorToastNotification,
@@ -587,20 +588,26 @@ const Graph = (): React.ReactNode => {
       </ReactFlow>
       <div className={`${styles.operations_wrapper} custom_scrollbar`}>
         <Button disabled={loading} onClickMethod={backfillLink}>
-          <PiSupersetOf size={36} />
+          <IoArrowUpOutline size={36} />
           Backfill Link
         </Button>
         <Button disabled={loading} onClickMethod={backfillChain}>
-          <PiSupersetOf size={36} />
+          <span>
+            <IoArrowUpOutline size={24} />
+            <GiFamilyTree size={24} />
+          </span>
           Backfill Chain
         </Button>
         <hr className={styles.divider} />
         <Button disabled={loading} onClickMethod={pruneLink}>
-          <PiSubsetOf size={36} />
+          <IoArrowDownOutline size={36} />
           Prune Link
         </Button>
         <Button disabled={loading} onClickMethod={pruneChain}>
-          <PiSubsetOf size={36} />
+          <span>
+            <IoArrowDownOutline size={24} />
+            <GiFamilyTree size={24} style={{ transform: "rotate(180deg)" }} />
+          </span>
           Prune Chain
         </Button>
         <hr className={styles.divider} />

src/pages/HowToUse/HowToUse.module.css

@@ -0,0 +1,7 @@
+.htu_wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10vw;
+  font-size: var(--headingFontSize);
+}

src/pages/HowToUse/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-
+import styles from "./HowToUse.module.css";
 const HowToUse = (): React.ReactNode => {
   return (
-    <div>
+    <div className={styles.htu_wrapper}>
       <h1>How To Use?</h1>
     </div>
   );

src/pages/Settings/Settings.module.css

@@ -0,0 +1,13 @@
+.settings_wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10vw;
+  font-size: var(--headingFontSize);
+}
+
+.settings_controls {
+  padding: var(--mb-4);
+  background-color: var(--bgNav);
+}

src/pages/Settings/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import styles from "./Settings.module.css";
+import Button from "../../components/Button/index.tsx";
+
+const Settings = (): React.ReactNode => {
+  return (
+    <div className={styles.settings_wrapper}>
+      <h1>Settings</h1>
+      <div className={styles.settings_controls}>
+        <Button>Export Data</Button>
+        <Button>Import Data</Button>
+      </div>
+    </div>
+  );
+};
+
+export default Settings;

src/routes/AllRoutes.tsx

@@ -9,13 +9,15 @@ import Graph from "../pages/Graph/index.tsx";
 import Login from "../pages/Login/index.tsx";
 import Logout from "../pages/Logout/index.tsx";
 import HowToUse from "../pages/HowToUse/index.tsx";
+import Settings from "../pages/Settings/index.tsx";
 
-const AllRoutes = ():React.ReactNode => {
+const AllRoutes = (): React.ReactNode => {
   return (
     <Routes>
       {/* Routes that require user to be logged in */}
       <Route element={<AuthOnlyRoutes />}>
         <Route path="/logout" element={<Logout />} />
+        <Route path="/settings" element={<Settings />} />
         <Route path="/graph" element={<Graph />} />
         {/* <Route path="/playlists" element={<Playlists />} /> */}
       </Route>