Frontend CSS Cleanup

.gitignore

@@ -2,6 +2,9 @@
 .env/
 .env
 
+# Frontend
+.vite/
+
 # Python environment
 env/
 .venv/

CREDITS.md

@@ -0,0 +1,8 @@
+# Credits
+
+## Frontend
+
+### Food Pixel Art
+
+- Food pixel art was sourced from ghostpixxells on itch.io
+  - <https://ghostpixxells.itch.io/pixelfood>

frontend/src/App.css

@@ -11,6 +11,7 @@
   will-change: filter;
   transition: filter 300ms;
 }
+
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
@@ -20,32 +21,27 @@
 }
 
 @keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 .card {
   padding: 2em;
 }
 
-.card.bCard,
-.card {
-  background-color: var(--card-bg) !important;
-  color: var(--text-color) !important;
+.studygatchi-card {
+  background-color: var(--card-bg);
+  color: var(--text-color);
 }
 
-.card-header {
-  background-color: var(--bg-color) !important;
-  color: var(--text-color) !important;
+.studygatchi-card-header {
+  background-color: var(--bg-color);
+  color: var(--text-color);
 }
 
-.card-body {
-  background-color: var(--card-bg) !important;
-  color: var(--text-color) !important;
+.studygatchi-card-body {
+  background-color: var(--card-bg);
+  color: var(--text-color);
 }
 
 .read-the-docs {
@@ -62,12 +58,10 @@
   font-size: 1rem;
   align-items: center;
   justify-content: center;
-  font-size: 1rem;
   margin-bottom: 5px;
 }
 
 .todolist-addItem {
-  box-sizing: border-box;
   margin: 4px 0 0 5px;
   font-size: 12px;
   padding: 4px 12px;
@@ -93,7 +87,6 @@
 }
 
 .todolist-trashbutton {
-  box-sizing: border-box;
   margin: 4px 0 0 5px;
   font-size: 12px;
   padding: 4px 12px;
@@ -138,6 +131,7 @@
   border-radius: 4px;
   background-color: #fff;
 }
+
 .wrapper label::after {
   content: "";
   position: absolute;
@@ -182,4 +176,4 @@
 .settings input {
   margin-top: 0.25rem;
   padding: 0.25rem;
-}
+}

frontend/src/App.tsx

@@ -2,12 +2,12 @@ import "./App.css";
 import { useState } from "react";
 import SettingsMenu from "./components/SettingsMenu";
 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 { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import { ThemeProvider } from './components/ThemeProvider';
+import "bootstrap/dist/css/bootstrap.min.css";
 
 function App() {
   // had to add because bootstrap defaults to light mode
@@ -43,11 +43,9 @@ function App() {
             currentHealth={currentHealth}
           />
           <Routes>
-            <Route path="/" element={<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/assets/food/foods.txt

@@ -0,0 +1,103 @@
+01_dish.png
+02_dish_2.png
+03_dish_pile.png
+04_bowl.png
+05_apple_pie.png
+06_apple_pie_dish.png
+07_bread.png
+08_bread_dish.png
+09_baguette.png
+100_taco_dish.png
+101_waffle.png
+102_waffle_dish.png
+10_baguette_dish.png
+11_bun.png
+12_bun_dish.png
+13_bacon.png
+14_bacon_dish.png
+15_burger.png
+16_burger_dish.png
+17_burger_napkin.png
+18_burrito.png
+19_burrito_dish.png
+20_bagel.png
+21_bagel_dish.png
+22_cheesecake.png
+23_cheesecake_dish.png
+24_cheesepuff.png
+25_cheesepuff_bowl.png
+26_chocolate.png
+27_chocolate_dish.png
+28_cookies.png
+29_cookies_dish.png
+30_chocolatecake.png
+31_chocolatecake_dish.png
+32_curry.png
+33_curry_dish.png
+34_donut.png
+35_donut_dish.png
+36_dumplings.png
+37_dumplings_dish.png
+38_friedegg.png
+39_friedegg_dish.png
+40_eggsalad.png
+41_eggsalad_bowl.png
+42_eggtart.png
+43_eggtart_dish.png
+44_frenchfries.png
+45_frenchfries_dish.png
+46_fruitcake.png
+47_fruitcake_dish.png
+48_garlicbread.png
+49_garlicbread_dish.png
+50_giantgummybear.png
+51_giantgummybear_dish.png
+52_gingerbreadman.png
+53_gingerbreadman_dish.png
+54_hotdog.png
+55_hotdog_sauce.png
+56_hotdog_dish.png
+57_icecream.png
+58_icecream_bowl.png
+59_jelly.png
+60_jelly_dish.png
+61_jam.png
+62_jam_dish.png
+63_lemonpie.png
+64_lemonpie_dish.png
+65_loafbread.png
+66_loafbread_dish.png
+67_macncheese.png
+68_macncheese_dish.png
+69_meatball.png
+70_meatball_dish.png
+71_nacho.png
+72_nacho_dish.png
+73_omlet.png
+74_omlet_dish.png
+75_pudding.png
+76_pudding_dish.png
+77_potatochips.png
+78_potatochips_bowl.png
+79_pancakes.png
+80_pancakes_dish.png
+81_pizza.png
+82_pizza_dish.png
+83_popcorn.png
+84_popcorn_bowl.png
+85_roastedchicken.png
+86_roastedchicken_dish.png
+87_ramen.png
+88_salmon.png
+89_salmon_dish.png
+90_strawberrycake.png
+91_strawberrycake_dish.png
+92_sandwich.png
+93_sandwich_dish.png
+94_spaghetti.png
+95_steak.png
+96_steak_dish.png
+97_sushi.png
+98_sushi_dish.png
+99_taco.png
+foods.txt

frontend/src/components/GooberFoodMenu.css

@@ -0,0 +1,93 @@
+.goober-food-menu {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.goober-food-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #d9d9d9;
+    border-radius: 14px 14px 0 0;
+    padding: 14px 16px;
+}
+
+.goober-food-title {
+    font-size: 16px;
+    color: #333;
+    text-transform: lowercase;
+}
+
+.goober-food-image {
+    width: 90%;
+    height: 90%;
+    object-fit: contain;
+    object-position: center;
+    display: block;
+    image-rendering: pixelated;
+}
+
+.goober-food-money {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+}
+
+.goober-food-grid {
+    background: #5f8f99;
+    padding: 18px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+}
+
+.goober-food-tile {
+    aspect-ratio: 1 / 1;
+    background: #59c3e6;
+    border: none;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+/* TODO We could instead do an outline for the images if the opacity changing looks odd*/
+.goober-food-tile:hover {
+    outline: none;
+    opacity: 0.75;
+}
+
+
+.goober-food-tile:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+}
+
+.goober-food-empty {
+    grid-column: 1 / -1;
+    color: white;
+    text-align: center;
+    padding: 24px 0;
+}
+
+.goober-food-pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #5f8f99;
+    border-radius: 0 0 18px 18px;
+    padding: 0 18px 18px;
+}
+
+.goober-page-button {
+    min-width: 72px;
+}
+
+.goober-page-indicator {
+    font-size: 14px;
+    font-weight: 600;
+    color: white;
+}