Add Card components

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,8 @@
+import { useEffect, useState } from "react";
+
+import Card from "@/components/Card/Card";
+import CardColumn from "@/components/CardColumn/CardColumn";
+import CardHeader from "@/components/CardHeader/CardHeader";
 import Flatastic from "@/components/Flatastic/Flatastic";
 import HomeAssistant from "@/components/HomeAssistant/HomeAssistant";
 import Timetable from "@/components/Timetable/Timetable";
@@ -8,36 +13,55 @@ import Footer from "@/components/Footer/Footer";
 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
+    const time = useEffect(() => {
+        const timer = setInterval(
+            () => {
+                let d = new Date();
+                let 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}>
-                    <div className={style.cardHeaderInactive}>🚊 Timetable</div>
-                    <div className={style.cardContent}>
-                        <Timetable />
-                    </div>
-                </div>
+                <Card>
+                    <CardHeader icon="🚊" content="Timetable" />
+                    <Timetable />
+                </Card>
 
-                <div className={style.clock}>
-                    <div className={style.card}>
-                        <div className={style.cardHeaderInactive}>🕐 Clock</div>
+                <div className={style.small}>
+                    <Card>
+                        <CardHeader icon="🕐" content="Clock" />
                         <Datetime />
-                    </div>
+                    </Card>
                 </div>
 
-                <div className={style.card}>
-                    <div className={style.terminal}>
-                        <div className={style.cardHeader}>🔔 Terminal</div>
-                        <Terminal />
-                    </div>
-                </div>
+                <Card>
+                    <CardHeader icon="🔔" content="Terminal" active={true} />
+                    <Terminal />
+                </Card>
 
-                <div className={style.card}>
-                    <div className={style.cardHeaderInactive}>🧹 Flatastic</div>
-                    <div className={style.cardContent}>
-                        <Flatastic />
-                    </div>
-                </div>
+                <Card>
+                    <CardHeader icon="🧹" content="Flatastic" />
+                    <Flatastic />
+                </Card>
             </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,45 +29,14 @@
     justify-content: flex-start;
 }
 
-.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;
-}
-
-.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%;
+.small {
+    width: 45%;
 }
 
 .terminal {
+    margin: 2px;
 }
 
 .footer {
-  background-color: #c0c0c0;
+    background-color: #c0c0c0;
 }

src/components/Flatastic/Flatastic.tsx

@@ -25,7 +25,7 @@ export default function Flatastic() {
     }, [fetchChores]);
 
     return (
-        <div>
+        <div className={style.container}>
             <h1>Chores</h1>
             <ul className={style.choreList}>
                 {chores.map((chore: FlatasticChore) => (

src/components/Flatastic/style.module.css

@@ -1,22 +1,26 @@
-.choreList {
-  list-style-type: none;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+.container {
+    padding: 1px 100px 30px 100px;
+}
 
-  gap: 10px;
-  padding: 10px 0;
+.choreList {
+    list-style-type: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    gap: 10px;
+    padding: 10px 0;
 }
 
 .chore {
-  padding: 5px 10px;
-  text-align: left;
-  border-top: 2px solid white;
-  border-left: 2px solid white;
-  border-bottom: 2px solid #828282;
-  border-right: 2px solid #828282;
+    padding: 5px 10px;
+    text-align: left;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid #828282;
+    border-right: 2px solid #828282;
 }
 
 .userName {
-  font-weight: bold;
+    font-weight: bold;
 }

src/components/Footer/Footer.tsx

@@ -16,12 +16,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}>🕐 Clock</span>
-                    <span className={style.windowActive}>🔔 Terminal</span>
-                    <span className={style.window}>🧹 Flatastic</span>
+                    <span className={style.window}>
+                        <span className={style.windowIcon}>🚊</span>Timetable
+                    </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;
-}
-
-.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;
+    height: 20px;
 }
 
 .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

@@ -84,9 +84,8 @@ export default function Terminal() {
             </div>
             <div className={style.msg}>{text}</div>
             <div className={style.input}>
-                <span className={style.prompt}>
-                    [sus@home ~/hallway]{"$"}
-                </span>{" "}
+                <span className={style.prompt}>[sus@home ~/hallway]{"$"}</span>
+                {" █"}
             </div>
         </div>
     );

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,11 +1,9 @@
 :root {
-    font-family: Arial, sans-serif;
+    font-family: Noto Sans Condensed, sans-serif;
     line-height: 1.5;
     font-weight: 400;
 
     color-scheme: light dark;
-    color: rgba(255, 255, 255, 0.87);
-    background-color: #242424;
 
     font-synthesis: none;
     text-rendering: optimizeLegibility;
@@ -13,15 +11,6 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-    font-weight: 500;
-    color: #646cff;
-    text-decoration: inherit;
-}
-a:hover {
-    color: #535bf2;
-}
-
 body {
     margin: 0;
     display: flex;
@@ -34,35 +23,3 @@ h1 {
     font-size: 3.2em;
     line-height: 1.1;
 }
-
-button {
-    border-radius: 8px;
-    border: 1px solid transparent;
-    padding: 0.6em 1.2em;
-    font-size: 1em;
-    font-weight: 500;
-    font-family: inherit;
-    background-color: #1a1a1a;
-    cursor: pointer;
-    transition: border-color 0.25s;
-}
-button:hover {
-    border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-    :root {
-        color: #213547;
-        background-color: #ffffff;
-    }
-    a:hover {
-        color: #747bff;
-    }
-    button {
-        background-color: #f9f9f9;
-    }
-}