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,5 +1,7 @@
 import { useEffect, useState } from "react";
 
+import Card from "@/components/Card/Card";
+import CardHeader from "@/components/CardHeader/CardHeader";
 import Flatastic from "@/components/Flatastic/Flatastic";
 import HomeAssistant from "@/components/HomeAssistant/HomeAssistant";
 import Timetable from "@/components/Timetable/Timetable";
@@ -11,7 +13,8 @@ import style from "./style.module.css";
 
 export default function Dashboard() {
     const schemes = [style.day, style.evening, style.night];
-    const [scheme, setScheme] = useState(style.day);
+    const [schemeIndex, setSchemeIndex] = useState(0);
+    const scheme = schemes[schemeIndex];
 
     // change background color based on time of day
     const time = useEffect(() => {
@@ -20,11 +23,11 @@ export default function Dashboard() {
                 let d = new Date();
                 let hour = d.getHours();
                 if (hour >= 7 && hour < 16) {
-                    setScheme(style.day);
+                    setSchemeIndex(0);
-                } else if (hour < 23) {
+                } else if (hour >= 16 && hour < 23) {
-                    setScheme(style.evening);
+                    setSchemeIndex(1);
                 } else {
-                    setScheme(style.night);
+                    setSchemeIndex(2);
                 }
             },
             20 * 60 * 1000,
@@ -37,33 +40,27 @@ export default function Dashboard() {
     return (
         <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

@@ -29,43 +29,12 @@
     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 {

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

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}>
+                <span className={style.prompt}>[sus@home ~/hallway]{"$"}</span>
-                    [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;
+}