font change, url change

package.json

@@ -14,6 +14,7 @@
   "bugs": {
     "url": "https://github.com/20kaushik02/spotify-manager-web/issues"
   },
+  "homepage": "https://spotify-manager.knravish.me",
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
     "@testing-library/jest-dom": "^6.6.3",

src/index.css

@@ -1,11 +1,10 @@
 /*===== CSS GLOBAL VARIABLES =====*/
 
 /* Font Size */
+/* Colors */
 :root {
   --normalFontSize: 16px;
   --headingFontSize: 48px;
-  --headingFont: AileronFont;
-  --primaryFont: AileronFont;
   --text: whitesmoke;
   --bg: #443c9c;
   --bgNav: #6360b1;
@@ -13,19 +12,7 @@
   --bgLinkInactive: #242c44;
 }
 
-/* Colors */
-
 /* Fonts */
-@font-face {
-  font-family: AileronFont;
-  src: url(/src/assets/fonts/Aileron-Black.otf);
-  font-weight: bold;
-}
-@font-face {
-  font-family: AileronFont;
-  src: url(/src/assets/fonts/Aileron-Light.otf);
-  font-weight: light;
-}
 
 /* rem-based (root element) sizes */
 :root {
@@ -103,16 +90,20 @@ img {
 }
 
 body {
-  font-family: var(--primaryFont), -apple-system, BlinkMacSystemFont, "Segoe UI",
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif;
   font-size: var(--normalFontSize);
   color: var(--text);
   background-color: var(--bg);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
-  letter-spacing: 1.5px;
+}
+
+input,
+select,
+textarea,
+button {
+  font-family: inherit;
 }
 
 code {

src/pages/HowToUse/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import styles from "./HowToUse.module.css";
 const HowToUse = (): React.ReactNode => {
   return (
@@ -11,9 +12,9 @@ const HowToUse = (): React.ReactNode => {
             <ul>
               <li>
                 In the{" "}
-                <a href="/graph">
+                <Link to="/graph">
                   <u>graph</u>
-                </a>{" "}
+                </Link>{" "}
                 manager, click 'Sync Spotify' to load your playlists into the
                 app. This pulls your latest Spotify playlists into the
                 application.
@@ -107,14 +108,14 @@ const HowToUse = (): React.ReactNode => {
             <ul>
               Check it out on GitHub:
               <li>
-                <a href="https://github.com/20kaushik02/spotify-manager-web">
+                <Link to="https://github.com/20kaushik02/spotify-manager-web">
                   <u>The front-end - ReactJS (ReactFlow)</u>
-                </a>
+                </Link>
               </li>
               <li>
-                <a href="https://github.com/20kaushik02/spotify-manager">
+                <Link to="https://github.com/20kaushik02/spotify-manager">
                   <u>The REST API - ExpressJS</u>
-                </a>
+                </Link>
               </li>
             </ul>
           </li>

src/pages/Settings/index.tsx

@@ -4,6 +4,7 @@ import Button from "../../components/Button/index.tsx";
 import { loadExportDataFullURL } from "../../api/paths.ts";
 import { useNavigate } from "react-router-dom";
 import {
+  showInfoToastNotification,
   showSuccessToastNotification,
   showWarnToastNotification,
 } from "../../components/ToastNotification/index.tsx";
@@ -33,6 +34,9 @@ const Settings = (): React.ReactNode => {
       return;
     }
     setDataFile(selectedFile);
+    showInfoToastNotification(
+      "Note: Importing will overwrite all links currently in-place."
+    );
   };
 
   const importGraph = async () => {