Timetable styling

src/components/Timetable/Timetable.tsx

@@ -2,6 +2,8 @@ import { useEffect } from "react";
 import DepartureList from "@/components/DepartureList/DepartureList";
 import { useKVVStore } from "@/store/kvv";
 
+import style from "./style.module.css";
+
 export default function Timetable() {
     const fetchTimetable = useKVVStore((state) => state.fetch);
     const pStreet = useKVVStore((state) => state.pStreet);
@@ -16,7 +18,7 @@ export default function Timetable() {
     }, [fetchTimetable]);
 
     return (
-        <div>
+        <div className={style.wrapper}>
             <h1>Timetable</h1>
             <DepartureList departures={pStreet.departureList} name="P-Street" />
             <DepartureList departures={hStreet.departureList} name="H-Street" />

src/components/Timetable/style.module.css

@@ -0,0 +1,5 @@
+.wrapper {
+    border-radius: 10px;
+    padding: 1px 100px 30px 100px;
+    box-shadow: 5px 5px 10px #aeaeae;
+}

src/components/TimetableRow/TimetableRow.tsx

@@ -10,12 +10,35 @@ export default function TimetableRow({
     const hour = String(departure.dateTime.hour).padStart(2, "0");
     const minute = String(departure.dateTime.minute).padStart(2, "0");
     const dateTimeString = `${hour}:${minute}`;
+    const lineNumber = departure.servingLine.number;
 
     return (
         <tr className={styles.timetableRow}>
-            <td>{dateTimeString}</td>
-            <td>{departure.servingLine.number}</td>
-            <td>({departure.servingLine.direction})</td>
+            <td className={styles.departureTime}>{dateTimeString}</td>
+            <td
+                className={`${lineNumberToStyle(lineNumber)} ${styles.lineNumber}`}
+            >
+                {lineNumber}
+            </td>
+            <td>{departure.servingLine.direction}</td>
         </tr>
     );
 }
+
+const lineNumberToStyle = (number) => {
+    switch (number) {
+        case "S2":
+            return styles.S2;
+            break;
+        case "S5":
+        case "S51":
+            return styles.S5;
+            break;
+        case "S1":
+        case "S11":
+            return styles.S1;
+            break;
+        default:
+            return styles.lineNumberDefault;
+    }
+};

src/components/TimetableRow/style.module.css

@@ -1,3 +1,32 @@
+td {
+    padding: 4px 7px;
+}
+
 .timetableRow {
     text-align: left;
 }
+
+.departureTime {
+    font-weight: 600;
+    /* background-color: rgba(180, 180, 180, 0.1); */
+}
+
+.lineNumber {
+    text-align: center;
+}
+
+.S2 {
+    background-color: rgba(200, 100, 200, 0.2);
+}
+
+.S5 {
+    background-color: rgba(230, 20, 20, 0.2);
+}
+
+.S1 {
+    background-color: rgba(20, 180, 90, 0.2);
+}
+
+.lineNumberDefault {
+    background-color: rgba(100, 100, 100, 0.2);
+}