styling

src/App.js

@@ -60,7 +60,18 @@ function App() {
         setAuth(true);
         return true;
       }
+      if (refreshResp.status >= 500) {
+        setAuth(false);
+        showErrorToastNotification(refreshResp.data.message);
+        return false;
+      }
+      if (refreshResp.status === 401) {
+        // not authed
+        setAuth(false);
+        return false;
+      }
       setAuth(false);
+      showWarnToastNotification(refreshResp.data.message);
       return false;
     }
     setAuth(false);

src/components/AnimatedSVG/index.jsx

@@ -7,7 +7,8 @@ const AnimatedSVG = ({ stroke = "#ffffff" }) => {
       {/* width, height and viewBox are necessary */}
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="512" height="512" viewBox="0 0 512 512"
+        width="256" height="256" // adjust size here
+        viewBox="0 0 512 512"
         preserveAspectRatio="xMidYMid meet"
       >
         <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)">

src/components/Navbar/Navbar.module.css

@@ -1,5 +1,6 @@
 .navbar_wrapper {
   display: flex;
+  background-color: var(--bgNav);
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
@@ -8,4 +9,5 @@
   left: 0;
   height: 100vh;
   width: 10vw;
+  padding: var(--mb-3);
 }

src/components/Navbar/index.jsx

@@ -10,13 +10,12 @@ const Navbar = () => {
 
   return (
     <nav className={styles.navbar_wrapper}>
-      <StyledNavLink path="/" text="Home" />
+      <StyledNavLink exact path="/" text="About" />
-      <StyledNavLink path="/graph" text="Graph" />
+      <StyledNavLink exact path="/graph" text="Graph" />
-      <StyledNavLink path="/about" text="About" />
       {
         auth === true ?
-          <StyledNavLink path="/logout" text="Logout" /> :
+          <StyledNavLink exact path="/logout" text="Logout" /> :
-          <StyledNavLink path="/login" text="Login" />
+          <StyledNavLink exact path="/login" text="Login" />
       }
     </nav>
   )

src/components/StyledNavLink/StyledNavLink.module.css

@@ -1,12 +1,18 @@
-.link_wrapper {
+a {
-  padding: 2em;
+  padding: var(--mb-3);
-  border-radius: 20%;
+  border-radius: 2%;
+  width: 100%;
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--text);
 }
 
 .active_link {
-
+  background-color: var(--bgLinkActive);
+  box-shadow: 2px 2px black;
 }
 
 .inactive_link {
-
+  background-color: var(--bgLinkInactive);
+  box-shadow: 2px 2px var(--bg);
 }

src/components/StyledNavLink/index.jsx

@@ -18,15 +18,14 @@ const StyledNavLink = ({
   activeClass = styles.active_link,
   inactiveClass = styles.inactive_link
 }) => {
+
   return (
-    <div className={styles.link_wrapper}>
+    <NavLink
-      <NavLink
+      to={path}
-        to={path}
+      className={({ isActive }) => isActive ? activeClass : inactiveClass}
-        className={({ isActive }) => isActive ? activeClass : inactiveClass}
+    >
-      >
+      {text}
-        {text}
+    </NavLink>
-      </NavLink>
-    </div>
   )
 }
 

src/index.css

@@ -3,33 +3,14 @@
 /* Font Size */
 :root {
   --normalFontSize: 16px;
+  --headingFontSize: 24px;
   --headingFont: AileronFont;
   --primaryFont: AileronFont;
   --text: whitesmoke;
-  --bgBlue: #040a53;
+  --bg: #443c9c;
-  --darkBlue: #061320;
+  --bgNav: #6360b1;
-  --vscBlue: #1b81a8;
+  --bgLinkActive: #362e7b;
-  --dYellow: #5b3c15;
+  --bgLinkInactive: #242c44;
-  --lYellow: #fcbe72;
-
-  --primary: #04005e;
-  --secondry: #440bd4;
-  --tertiary: #ff2079;
-  --accent: #e92efb;
-  --bg: #262626;
-  --blue1: #405de6;
-  --blue2: #5851d8;
-  --purple1: #833ab4;
-  --pink1: #c13584;
-  --pink2: #e1306c;
-  --red1: #fd1d1d;
-  --orange1: #f56040;
-  --orange2: #f77737;
-  --orange3: #fcaf45;
-  --orange4: #ffdc80;
-
-  --fun_b: #b00b69;
-  --fun_d: #1d1cc5;
 }
 
 /* Colors */
@@ -97,7 +78,7 @@ body {
     "Helvetica Neue", sans-serif;
   font-size: var(--normalFontSize);
   color: var(--text);
-  background-color: var(--bgBlue);
+  background-color: var(--bg);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;

src/pages/Graph/Graph.module.css

@@ -2,4 +2,5 @@
   display: flex;
   width: 100%;
   height: 100vh;
+  color: black;
 }

src/pages/Graph/index.jsx

@@ -15,11 +15,15 @@ import styles from './Graph.module.css';
 const initialNodes = [
   { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
   { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
+  { id: '3', position: { x: 50, y: 50 }, data: { label: '3' } },
 ];
 // const initialEdges = [];
 const initialEdges = [
   { id: 'e1-2', source: '1', target: '2' }
 ];
+
+const proOptions = { hideAttribution: true };
+
 const Graph = () => {
   const [playlistNodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [linkEdges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
@@ -33,6 +37,8 @@ const Graph = () => {
       <ReactFlow
         nodes={playlistNodes}
         edges={linkEdges}
+        fitView
+        proOptions={proOptions}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}

src/pages/Landing/Landing.module.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  font-size: var(--headingFontSize);
 }
 
 .app_logo {

src/pages/Landing/index.jsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react"
 import { useSearchParams } from "react-router-dom";
 import styles from "./Landing.module.css"
-import logo from '../../assets/icons/logo.svg';
 import { showInfoToastNotification, showSuccessToastNotification } from "../../components/ToastNotification";
 import AnimatedSVG from "../../components/AnimatedSVG";
 

src/pages/Login/Login.module.css

@@ -2,5 +2,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  font-size: var(--headingFontSize);
 }

src/pages/Logout/Logout.module.css

@@ -2,5 +2,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  font-size: var(--headingFontSize);
 }

src/routes/AllRoutes.jsx

@@ -14,21 +14,21 @@ const AllRoutes = () => {
     <Routes>
       {/* Routes that require user to be logged in */}
       <Route element={<AuthOnlyRoutes />}>
-        <Route path="/logout" element={<Logout />} />
+        <Route exact path="/logout" element={<Logout />} />
-        <Route path="/graph" element={<Graph />} />
+        <Route exact path="/graph" element={<Graph />} />
-        {/* <Route path="/playlists" element={<Playlists />} /> */}
+        {/* <Route exact path="/playlists" element={<Playlists />} /> */}
       </Route>
 
       {/* Routes that require user to be logged *out* */}
       <Route element={<UnAuthOnlyRoutes />}>
-        <Route path="/login" element={<Login />} />
+        <Route exact path="/login" element={<Login />} />
       </Route>
 
       {/* Common routes */}
-      <Route path="/" element={<Landing />} />
+      <Route exact path="/" element={<Landing />} />
 
       {/* 404 */}
-      <Route path="/page-not-found" element={<PageNotFound />} />
+      <Route exact path="/page-not-found" element={<PageNotFound />} />
       <Route path="*" element={<PageNotFound />} />
     </Routes>
   );

src/routes/UnAuthOnlyRoutes.jsx

@@ -13,7 +13,7 @@ function UnAuthOnlyRoutes() {
       return <Outlet />;
     } else {
       showWarnToastNotification(<p>Already logged in!</p>);
-      return <Navigate to={"/graph"} state={{ from: location }} />;
+      return <Navigate to={"/"} state={{ from: location }} />;
     }
   };