Resolve issue #47 -> polish up todo page CSS + fix layout

frontend/package.json

@@ -15,6 +15,7 @@
     "pause": "^0.1.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^7.9.5",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.14"

frontend/src/App.tsx

@@ -5,19 +5,13 @@ import NavBar from "./components/NavBar"; //
 import Home from "./components/Home";
 import Timer from "./components/Timer";
 import ToDoList from "./ToDoList";
-import GooberMenu from "./components/GooberMenu";
+import RenderGooberMenu from "./RenderGooberMenu";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 
 function App() {
   // had to add because bootstrap defaults to light mode
   document.documentElement.setAttribute("data-bs-theme", "dark");
 
-  // Current Players data
-  const [currentXP, setXP] = useState(50);
-  const [level, setLevel] = useState(9);
-  const [money, setMoney] = useState(0);
-  const [currentHealth, setHealth] = useState(50);
-
   return (
     <Router>
       <div
@@ -30,22 +24,13 @@ function App() {
         <div>
           <NavBar />
         </div>
-        <GooberMenu
-          setXP={setXP}
-          setLevel={setLevel}
-          setMoney={setMoney}
-          setHealth={setHealth}
-          currentXP={currentXP}
-          level={level}
-          money={money}
-          currentHealth={currentHealth}
-        />
+
         <Routes>
-          <Route path="/" element={<Home />} />
+          <Route path="/" element={<><RenderGooberMenu /><Home /></>} />
           <Route path="/settings" element={<SettingsMenu />} />
           <Route path="/timer" element={<Timer />} />
           <Route path="/todo" element={<ToDoList />} />
-          <Route path="*" element={<Home />} />
+
         </Routes>
       </div>
     </Router>

frontend/src/RenderGooberMenu.tsx

@@ -0,0 +1,27 @@
+
+import React, { useState } from "react";
+import GooberMenu from "./components/GooberMenu";
+import "./index.css";
+
+export default function RenderGooberMenu() {
+
+  // Current Players data
+  const [currentXP, setXP] = useState(50);
+  const [level, setLevel] = useState(9);
+  const [money, setMoney] = useState(0);
+  const [currentHealth, setHealth] = useState(50);
+
+  return(
+        <GooberMenu
+            setXP={setXP}
+            setLevel={setLevel}
+            setMoney={setMoney}
+            setHealth={setHealth}
+            currentXP={currentXP}
+            level={level}
+            money={money}
+            currentHealth={currentHealth}
+          />
+
+  )
+}

frontend/src/ToDoList.css

@@ -0,0 +1,23 @@
+.todolist-logo{
+
+}
+
+.todolist-addItem{
+    margin: 30px 10px;
+}
+
+.todolist-item{
+
+}
+
+.todolist-item button{
+    opacity:0;
+}
+
+.todolist-item:hover button{
+    opacity:1;
+}
+
+.todolist-checkbox{
+    margin:0px 20px;
+}

frontend/src/ToDoList.tsx

@@ -1,5 +1,7 @@
 import { useState } from "react";
+import { FaTrash } from 'react-icons/fa';
 import "./App.css";
+import "./ToDoList.css";
 
 export default function ToDoList() {
   const [items, setItems] = useState([
@@ -61,26 +63,29 @@ export default function ToDoList() {
           margin: "0 auto",
           listStyleType: "none",
           padding: 0,
+          maxHeight: "auto",
         }}
       >
         {items.map((item) => (
           <li key={item} className="todolist-item">
-            <div className="wrapper">
-              <input
-                type="checkbox"
-                id={`checkbox-${item}`}
-                name={item}
-                checked={checkedItems[item]}
-                onChange={() => checkItem(item)}
-              />
-              <label htmlFor={`checkbox-${item}`}>{item}</label>
+            <label htmlFor={`checkbox-${item}`}>
+                <input
+                  type="checkbox"
+                  id={`checkbox-${item}`}
+                  name={item}
+                  checked={checkedItems[item]}
+                  onChange={() => checkItem(item)}
+                  className="todolist-checkbox"
+                />
+              {item}</label>
+            <div>
+              <button
+                className="todolist-trashbutton"
+                onClick={() => removeItem(item)}
+              >
+                <FaTrash />
+              </button>
             </div>
-            <button
-              className="todolist-trashbutton"
-              onClick={() => removeItem(item)}
-            >
-              Del
-            </button>
           </li>
         ))}
       </ul>

frontend/src/components/NavBar.css

@@ -0,0 +1,4 @@
+.navbar{
+    margin:20px;
+    gap: 10px;
+}

frontend/src/components/NavBar.tsx

@@ -1,6 +1,7 @@
 import { useNavigate } from "react-router-dom";
 //import { useState } from 'react';
 import "bootstrap/dist/css/bootstrap.min.css";
+import "./NavBar.css";
 
 const NavBar = () => {
     const navigate = useNavigate();
@@ -17,7 +18,7 @@ const NavBar = () => {
         navigate('/todo');
     }
     return (
-        <div>
+        <div className="navbar">
             <button onClick={handleHomeClick}>Home</button>
             <button onClick={handleSettingsClick}>Settings</button>
             <button onClick={handleTimerClick}>Timer</button>