From d35045de6349d79c6dd14b7ef0509b0d3b396bc3 Mon Sep 17 00:00:00 2001 From: Lattie Date: Tue, 17 Feb 2026 19:01:32 -0500 Subject: [PATCH] Created .css file for ToDoList and polished up the css. Adjusted Routes so GooberMenu only appears on Home page, so when Todo is open, the main page elements are hidden (only the todo list shows). Made it so that the delete button now has a trashcan icon and only appears when hovering over the todo item. --- frontend/package-lock.json | 22 +++++++++---------- frontend/package.json | 1 + frontend/src/App.tsx | 23 ++++---------------- frontend/src/RenderGooberMenu.tsx | 27 +++++++++++++++++++++++ frontend/src/ToDoList.css | 23 ++++++++++++++++++++ frontend/src/ToDoList.tsx | 35 +++++++++++++++++------------- frontend/src/components/NavBar.css | 4 ++++ frontend/src/components/NavBar.tsx | 3 ++- 8 files changed, 91 insertions(+), 47 deletions(-) create mode 100644 frontend/src/RenderGooberMenu.tsx create mode 100644 frontend/src/ToDoList.css create mode 100644 frontend/src/components/NavBar.css diff --git a/frontend/package-lock.json b/frontend/package-lock.json index c0ee928..928f88d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,6 +13,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" @@ -79,7 +80,6 @@ "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", @@ -1534,7 +1534,6 @@ "integrity": "sha512-uWN8YqxXxqFMX2RqGOrumsKeti4LlmIMIyV0lgut4jx7KQBcBiW6vkDtIBvHnHIquwNfJhk8v2OtmO8zXWHfPA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -1545,7 +1544,6 @@ "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -1596,7 +1594,6 @@ "integrity": "sha512-gTtSdWX9xiMPA/7MV9STjJOOYtWwIJIYxkQxnSV1U3xcE+mnJSH3f6zI0RYP+ew66WSlZ5ed+h0VCxsvdC1jJg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.41.0", "@typescript-eslint/types": "8.41.0", @@ -1823,7 +1820,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1977,7 +1973,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001737", "electron-to-chromium": "^1.5.211", @@ -2254,7 +2249,6 @@ "integrity": "sha512-RNCHRX5EwdrESy3Jc9o8ie8Bog+PeYvvSR8sDGoZxNFTvZ4dlxUB3WzQ3bQMztFrSRODGrLLj8g6OFuGY/aiQg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", @@ -3219,7 +3213,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz", "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -3236,6 +3229,15 @@ "react": "^19.1.1" } }, + "node_modules/react-icons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-refresh": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", @@ -3524,7 +3526,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -3587,7 +3588,6 @@ "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -3660,7 +3660,6 @@ "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", @@ -3774,7 +3773,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, diff --git a/frontend/package.json b/frontend/package.json index ea1997a..b1e2f3e 100644 --- a/frontend/package.json +++ b/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" diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 2aa6c1e..874346a 100644 --- a/frontend/src/App.tsx +++ b/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 (
- + - } /> + } /> } /> } /> } /> - } /> + diff --git a/frontend/src/RenderGooberMenu.tsx b/frontend/src/RenderGooberMenu.tsx new file mode 100644 index 0000000..8e58905 --- /dev/null +++ b/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( + + + ) +} \ No newline at end of file diff --git a/frontend/src/ToDoList.css b/frontend/src/ToDoList.css new file mode 100644 index 0000000..73f4044 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/frontend/src/ToDoList.tsx b/frontend/src/ToDoList.tsx index 053ac52..8d737fb 100644 --- a/frontend/src/ToDoList.tsx +++ b/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) => (
  • -
    - checkItem(item)} - /> - + +
    +
    -
    • ))} diff --git a/frontend/src/components/NavBar.css b/frontend/src/components/NavBar.css new file mode 100644 index 0000000..9739194 --- /dev/null +++ b/frontend/src/components/NavBar.css @@ -0,0 +1,4 @@ +.navbar{ + margin:20px; + gap: 10px; +} \ No newline at end of file diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx index f5f3d6b..cb1b64d 100644 --- a/frontend/src/components/NavBar.tsx +++ b/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 ( -
    +