bleh

src/pages/Graph/Graph.module.css

@@ -1,6 +1,5 @@
 .graph_wrapper {
 	display: flex;
-	position: inherit;
 	width: 100%;
-	height: 80vh;
+	height: 100vh;
 }

src/pages/Landing/Landing.module.css

@@ -10,18 +10,3 @@
   height: 40vmin;
   pointer-events: none;
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  .app_logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/pages/Landing/index.jsx

@@ -2,27 +2,33 @@ 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 { showSuccessToastNotification } from "../../components/ToastNotification";
+import { showInfoToastNotification, showSuccessToastNotification } from "../../components/ToastNotification";
+import AnimatedSVG from "../../components/AnimatedSVG";
 
 
 const Landing = () => {
-	// eslint-disable-next-line no-unused-vars
-	const [searchParams, setSearchParams] = useSearchParams();
-	useEffect(() => {
-		if (searchParams.get("login") === "success") {
-			showSuccessToastNotification("Logged in!");
-		}
-	}, [searchParams]);
-	return (
-		<header className={styles.app_header}>
-			<img src={logo} className={styles.app_logo} alt="logo" />
-			<h1>Organize your Spotify playlists as a graph.</h1>
-			<h5>Features:</h5>
-			<ul>
-				<li>blah 1</li>
-			</ul>
-		</header>
-	)
+  // eslint-disable-next-line no-unused-vars
+  const [searchParams, setSearchParams] = useSearchParams();
+  useEffect(() => {
+    if (searchParams.get("login") === "success") {
+      showSuccessToastNotification("Logged in!");
+    } else if (searchParams.get("logout") === "success") {
+      showInfoToastNotification("Logged out.");
+    }
+  }, [searchParams]);
+  return (
+    <>
+      <header className={styles.app_header}>
+        <AnimatedSVG />
+        <h1>organize your Spotify playlists as a graph</h1>
+      </header>
+      <ul>
+        <li>DAG graph of your playlists</li>
+        <li>Link them to sync tracks</li>
+        <li>Periodic syncing</li>
+      </ul>
+    </>
+  )
 }
 
-export default Landing
+export default Landing

src/pages/Login/index.jsx

@@ -1,17 +1,20 @@
 import React, { useEffect } from 'react';
 import styles from './Login.module.css';
+import { authLoginURL } from '../../api/paths';
 
 // auth through backend
 const Login = () => {
 	useEffect(() => {
 		const timeoutID = setTimeout(() => {
-			window.open(process.env.REACT_APP_API_BASE_URL + "/api/auth/login", "_self")
+			window.open(authLoginURL, "_self")
 		}, 1000);
 
 		return () => clearTimeout(timeoutID);
 	}, []);
 	return (
-		<div className={styles.login_wrapper}>Redirecting to Spotify...</div>
+		<div className={styles.login_wrapper}>
+			Redirecting to Spotify...
+		</div>
 	)
 }
 

src/pages/Logout/Logout.module.css

@@ -0,0 +1,6 @@
+.logout_wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}

src/pages/Logout/index.jsx

@@ -0,0 +1,20 @@
+import React, { useEffect } from 'react';
+import styles from './Logout.module.css';
+import { authLogoutURL } from '../../api/paths';
+
+const Logout = () => {
+	useEffect(() => {
+		const timeoutID = setTimeout(() => {
+			window.open(authLogoutURL, "_self")
+		}, 1000);
+
+		return () => clearTimeout(timeoutID);
+	}, []);
+	return (
+		<div className={styles.logout_wrapper}>
+			See you soon!
+		</div>
+	)
+}
+
+export default Logout;