install classnames

bun.lock

@@ -7,6 +7,7 @@
         "@reduxjs/toolkit": "^2.8.2",
         "@types/lodash": "^4.17.20",
         "@types/node": "^24.1.0",
+        "classnames": "^2.5.1",
         "lodash": "^4.17.21",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
@@ -311,6 +312,8 @@
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
+    "classnames": ["classnames@2.5.1", "", {}, "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="],
+
     "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
 
     "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],

package.json

@@ -13,6 +13,7 @@
         "@reduxjs/toolkit": "^2.8.2",
         "@types/lodash": "^4.17.20",
         "@types/node": "^24.1.0",
+        "classnames": "^2.5.1",
         "lodash": "^4.17.21",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",

src/components/Card/Card.tsx

@@ -0,0 +1,5 @@
+import style from "./style.module.css";
+
+export default function Card({ active, children }) {
+    return <div className={style.card}>{children}</div>;
+}

src/components/Card/style.module.css

@@ -0,0 +1,14 @@
+.card {
+    flex-direction: column;
+    justify-content: flex-start;
+    background-color: #c0c0c0;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid #828282;
+    border-right: 2px solid #828282;
+    margin: 10px;
+}
+
+.cardContent {
+    padding: 1px 100px 30px 100px;
+}

src/components/CardHeader/CardHeader.tsx

@@ -0,0 +1,16 @@
+import style from "./style.module.css";
+
+export default function CardHeader({ icon, content, active = false }) {
+    let containerClass = style.container;
+    if (active) {
+        containerClass += " " + style.active;
+    }
+    return (
+        <div className={containerClass}>
+            <div className={style.title}>
+                <div className={style.icon}>{icon}</div>
+                <div className={style.content}>{content}</div>
+            </div>
+        </div>
+    );
+}

src/components/CardHeader/style.module.css

@@ -0,0 +1,27 @@
+.container {
+    height: 28px;
+    display: flex;
+    flex-direction: row;
+    margin: 2px;
+    justify-content: space-between;
+    align-items: center;
+    color: #c0c0c0;
+    background-color: #808080;
+}
+
+.active {
+    color: white;
+    background-color: #000082;
+}
+
+.title {
+    display: flex;
+    flex-direction: row;
+    font-weight: bold;
+    gap: 7px;
+    padding-left: 5px;
+}
+
+.icon {
+    font-size: 10pt;
+}

src/components/Dashboard/Dashboard.tsx

@@ -1,3 +1,7 @@
+import { useEffect, useState } from "react";
+
+import Card from "@/components/Card/Card";
+import CardHeader from "@/components/CardHeader/CardHeader";
 import Datetime from "@/components/Datetime/Datetime";
 import Flatastic from "@/components/Flatastic/Flatastic";
 import Footer from "@/components/Footer/Footer";
@@ -7,36 +11,55 @@ import Timetable from "@/components/Timetable/Timetable";
 import style from "./style.module.css";
 
 export default function Dashboard() {
+    const schemes = [style.day, style.evening, style.night];
+    const [schemeIndex, setSchemeIndex] = useState(0);
+    const scheme = schemes[schemeIndex];
+
+    // change background color based on time of day
+    useEffect(() => {
+        const timer = setInterval(
+            () => {
+                const d = new Date();
+                const hour = d.getHours();
+                if (hour >= 7 && hour < 16) {
+                    setSchemeIndex(0);
+                } else if (hour >= 16 && hour < 23) {
+                    setSchemeIndex(1);
+                } else {
+                    setSchemeIndex(2);
+                }
+            },
+            20 * 60 * 1000,
+        );
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+
     return (
-        <div className={style.dashboard}>
+        <div className={`${style.dashboard} ${scheme}`}>
             <div className={style.cardWrapper}>
-                <div className={style.card}>
+                <Card>
-                    <div className={style.cardHeaderInactive}>🚊 Timetable</div>
+                    <CardHeader icon="🚊" content="Timetable" />
-                    <div className={style.cardContent}>
+                    <Timetable />
-                        <Timetable />
+                </Card>
-                    </div>
-                </div>
 
-                <div className={style.clock}>
+                <div className={style.small}>
-                    <div className={style.card}>
+                    <Card>
-                        <div className={style.cardHeaderInactive}>🕐 Clock</div>
+                        <CardHeader icon="🕐" content="Clock" />
                         <Datetime />
-                    </div>
+                    </Card>
                 </div>
 
-                <div className={style.card}>
+                <Card>
-                    <div className={style.terminal}>
+                    <CardHeader icon="🔔" content="Terminal" active={true} />
-                        <div className={style.cardHeader}>🔔 Terminal</div>
+                    <Terminal />
-                        <Terminal />
+                </Card>
-                    </div>
-                </div>
 
-                <div className={style.card}>
+                <Card>
-                    <div className={style.cardHeaderInactive}>🧹 Flatastic</div>
+                    <CardHeader icon="🧹" content="Flatastic" />
-                    <div className={style.cardContent}>
+                    <Flatastic />
-                        <Flatastic />
+                </Card>
-                    </div>
-                </div>
             </div>
 
             <div className={style.footer}>

src/components/Dashboard/style.module.css

@@ -2,9 +2,24 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    transition: 0.5s;
+}
+
+/* 7 to 16  */
+.day {
     background-color: #007c7d;
 }
 
+/* 16 to 23 */
+.evening {
+    background-color: #3b5773;
+}
+
+/* 23 to 8 */
+.night {
+    background-color: #2a3f55;
+}
+
 .cardWrapper {
     margin: 30px;
     height: 100%;
@@ -14,42 +29,14 @@
     justify-content: flex-start;
 }
 
-.card {
+.small {
-    flex-direction: column;
-    justify-content: flex-start;
-    background-color: #c0c0c0;
-    border-top: 2px solid white;
-    border-left: 2px solid white;
-    border-bottom: 2px solid #828282;
-    border-right: 2px solid #828282;
-}
-
-.cardContent {
-    padding: 1px 100px 30px 100px;
-}
-
-.cardHeader {
-    height: 30px;
-    color: white;
-    background-color: #000082;
-    text-align: left;
-    padding-left: 5px;
-    font-weight: bold;
-}
-
-.cardHeaderInactive {
-    height: 30px;
-    color: #c0c0c0;
-    background-color: #808080;
-    text-align: left;
-    padding-left: 5px;
-    font-weight: bold;
-}
-
-.clock {
     width: 45%;
 }
 
+.terminal {
+    margin: 2px;
+}
+
 .footer {
     background-color: #c0c0c0;
 }

src/components/Datetime/style.module.css

@@ -19,11 +19,11 @@ img {
 }
 
 .divider {
-  animation: blink 3s step-end infinite;
+    animation: blink 3s step-end infinite;
 }
 
 @keyframes blink {
     50% {
-    opacity: 0;
+        opacity: 0;
-  }
+    }
 }

src/components/Flatastic/Flatastic.tsx

@@ -35,11 +35,11 @@ export default function Flatastic() {
             className = "irregular";
         } else {
             className = chore.timeLeftNext <= 0 ? "due" : "notDue";
-            timeLeftInDays = <span className={style.timeLeft}>
+            timeLeftInDays = (
-                {Math.abs(
+                <span className={style.timeLeft}>
-                    Math.floor(chore.timeLeftNext / (60 * 60 * 24)),
+                    {Math.abs(Math.floor(chore.timeLeftNext / (60 * 60 * 24)))}d
-                )}d
+                </span>
-            </span>;
+            );
         }
 
         return (
@@ -56,7 +56,7 @@ export default function Flatastic() {
     });
 
     return (
-        <div>
+        <div className={style.container}>
             <h1>Chores</h1>
             <ul className={style.choreList}>{choresRender}</ul>
         </div>

src/components/Flatastic/style.module.css

@@ -1,3 +1,7 @@
+.container {
+    padding: 1px 100px 30px 100px;
+}
+
 .choreList {
     list-style-type: none;
     display: flex;

src/components/Footer/Footer.tsx

@@ -1,7 +1,3 @@
-import { useEffect, useState } from "react";
-import Marquee from "react-fast-marquee";
-
-import pasta from "./pasta.ts";
 import style from "./style.module.css";
 
 export default function Footer() {
@@ -16,12 +12,19 @@ export default function Footer() {
                     />
                     Start
                 </div>
-                <span className={style.divider}></span>
                 <div className={style.windows}>
-                    <span className={style.window}>🚊 Timetable</span>
+                    <span className={style.window}>
-                    <span className={style.window}>🕐 Clock</span>
+                        <span className={style.windowIcon}>🚊</span>Timetable
-                    <span className={style.windowActive}>🔔 Terminal</span>
+                    </span>
-                    <span className={style.window}>🧹 Flatastic</span>
+                    <span className={style.window}>
+                        <span className={style.windowIcon}>🕐</span>Clock
+                    </span>
+                    <span className={style.windowActive}>
+                        <span className={style.windowIcon}>🔔</span>Terminal
+                    </span>
+                    <span className={style.window}>
+                        <span className={style.windowIcon}>🧹</span>Flatastic
+                    </span>
                 </div>
             </div>
         </div>

src/components/Footer/style.module.css

@@ -1,5 +1,5 @@
 .container {
-    height: 35px;
+    height: 30px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -9,44 +9,37 @@
 }
 
 .taskbar {
-    font-weight: bold;
     display: flex;
     flex-direction: row;
     text-align: left;
 }
 
 .startButton {
+    font-weight: bold;
     display: inline-flex;
     justify-content: space-around;
     align-items: center;
-    width: 100px;
+    width: 80px;
     border-top: 2px solid white;
     border-left: 2px solid white;
     border-bottom: 2px solid #828282;
     border-right: 2px solid #828282;
+    margin-right: 10px;
 }
 
 .startIcon {
-    height: 30px;
+    height: 20px;
-}
-
-.divider {
-    margin: auto 8px;
-    width: 4px;
-    height: 25px;
-    border-top: 2px solid white;
-    border-left: 2px solid white;
-    border-bottom: 2px solid #828282;
-    border-right: 2px solid #828282;
 }
 
 .windows {
     display: flex;
     flex-direction: row;
+    align-items: center;
     gap: 5px;
 }
 
 .window {
+    height: 25px;
     min-width: 150px;
     padding-left: 10px;
     display: inline-flex;
@@ -57,6 +50,11 @@
     border-right: 2px solid #828282;
 }
 
+.windowIcon {
+    font-size: 11pt;
+    margin-right: 5px;
+}
+
 .windowActive {
     min-width: 150px;
     padding-left: 10px;

src/components/Terminal/Terminal.tsx

@@ -1,8 +1,7 @@
-import { useHomeAssistantStore } from "@/store/homeAssistant";
 import { useEffect, useState } from "react";
-
+import { useHomeAssistantStore } from "@/store/homeAssistant";
-import style from "./style.module.css";
 import pasta from "./pasta.ts";
+import style from "./style.module.css";
 
 export default function Terminal() {
     const [index, setIndex] = useState(0);
@@ -44,7 +43,7 @@ export default function Terminal() {
             <div className={style.fetch}>
                 <span>
                     <pre>
-                        {"      "}-///:.{"      "}
+                        {"      -///:.      "}
                         <span className={style.username}>tent</span>@
                         <span className={style.hostname}>home</span>
                     </pre>
@@ -84,9 +83,8 @@ export default function Terminal() {
             </div>
             <div className={style.msg}>{text}</div>
             <div className={style.input}>
-                <span className={style.prompt}>
+                <span className={style.prompt}>[sus@home ~/hallway]{"$"}</span>
-                    [sus@home ~/hallway]{"$"}
+                {" █"}
-                </span>{" "}
             </div>
         </div>
     );

src/components/Terminal/style.module.css

@@ -1,49 +1,47 @@
 .container {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  font-family: monospace;
+    font-family: monospace;
-  font-size: 10pt;
+    font-size: 10pt;
-  background-color: black;
+    background-color: black;
-  color: white;
+    color: white;
-  display: flex;
+    width: 100%;
-  flex-direction: column;
+    height: 290px;
-  width: 100%;
+    overflow: hidden;
-  height: 290px;
-  overflow: hidden;
 }
 
 .fetch {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  padding-bottom: 10px;
+    padding-bottom: 10px;
 }
 
 .prompt {
-  color: lightgreen;
+    color: lightgreen;
 }
 
 .username {
-  color: violet;
+    color: violet;
 }
 
 .hostname {
-  color: skyblue;
+    color: skyblue;
 }
 
 .temp {
-  color: pink;
+    color: pink;
-  font-weight: bold;
+    font-weight: bold;
 }
 
 .humidity {
-  color: skyblue;
+    color: skyblue;
-  font-weight: bold;
+    font-weight: bold;
 }
 
 .plants {
-  color: lightgreen;
+    color: lightgreen;
 }
 
 pre {
-  margin: 0;
+    margin: 0;
 }

src/components/Timetable/Timetable.tsx

@@ -18,7 +18,7 @@ export default function Timetable() {
     }, [fetchTimetable]);
 
     return (
-        <div className={style.wrapper}>
+        <div className={style.container}>
             <h1>Departures</h1>
             <DepartureList
                 departures={pStreet.departureList}

src/components/Timetable/style.module.css

@@ -0,0 +1,3 @@
+.container {
+    padding: 1px 100px 30px 100px;
+}

src/index.css

@@ -1,5 +1,7 @@
 :root {
-    font-family: Arial, sans-serif;
+    font-family:
+        Noto Sans Condensed,
+        sans-serif;
     line-height: 1.5;
     font-weight: 400;