Cleaning up CSS, minor refactor into pages Home & Settings, better docs

frontend/src/App.css

@@ -1,46 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-a {
-  display:inline-block;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

frontend/src/App.tsx

@@ -1,31 +0,0 @@
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
-import { CountButton } from "./Components/CountButton";
-
-function App(): JSX.Element {
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
-          <img src={viteLogo} className="logo h-32" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank" rel="noreferrer">
-          <img src={reactLogo} className="logo react h-32" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <CountButton />
-        <p className="pt-6">
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  );
-}
-
-export default App;

frontend/src/Pages/Home.tsx

@@ -0,0 +1,36 @@
+import reactLogo from "../assets/react.svg";
+import viteLogo from "/vite.svg";
+import "../index.css";
+import { CountButton } from "../Components/CountButton";
+import { Link } from "react-router-dom";
+
+/**
+ * The home page of the application
+ * @returns {JSX.Element} The home page
+ */
+export default function HomePage(): JSX.Element {
+  return (
+    <>
+      <div>
+        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+          <img src={viteLogo} className="logo h-32 p-5" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank" rel="noreferrer">
+          <img
+            src={reactLogo}
+            className="logo react h-32 p-5"
+            alt="React logo"
+          />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      <div className="card flex flex-col items-center space-y-4">
+        <CountButton />
+        <Link to="/settings">To Settings</Link>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  );
+}

frontend/src/Pages/Settings.tsx

@@ -0,0 +1,17 @@
+import "../index.css";
+import { Link } from "react-router-dom";
+
+/**
+ * The settings page of the application
+ * @returns {JSX.Element} The settings page
+ */
+export default function SettingsPage(): JSX.Element {
+  return (
+    <>
+      <h1>Very Fancy Settings Page</h1>
+      <div className="card">
+        <Link to="/">To Home</Link>
+      </div>
+    </>
+  );
+}

frontend/src/index.css

@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+/* 
+ * We are using tailwind, so do not add any custom CSS here. 
+ * Most of this is going to get cleaned up eventually.
+ */
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -70,3 +75,48 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+a {
+  display: inline-block;
+}
+
+.logo {
+  transition: filter 0.25s;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

frontend/src/main.tsx

@@ -1,18 +1,26 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
+import SettingsPage from "./Pages/Settings.tsx";
+import HomePage from "./Pages/Home.tsx";
 import "./index.css";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
+// This is where the routes are mounted
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <App />,
+    element: <HomePage />,
+  },
+  {
+    path: "/settings",
+    element: <SettingsPage />,
   },
 ]);
 
+// Semi-hacky way to get the root element
 const root = document.getElementById("root") ?? document.createElement("div");
 
+// Render the router at the root
 ReactDOM.createRoot(root).render(
   <React.StrictMode>
     <RouterProvider router={router} />