From 97737def297ab884f67965872b7b92169ae7933d Mon Sep 17 00:00:00 2001
From: Darius Schefer <darius1702@gmail.com>
Date: Wed, 27 Aug 2025 21:50:17 +0200
Subject: [PATCH] Timetable styling

---
 src/components/Timetable/Timetable.tsx       |  4 ++-
 src/components/Timetable/style.module.css    |  5 ++++
 src/components/TimetableRow/TimetableRow.tsx | 29 ++++++++++++++++++--
 src/components/TimetableRow/style.module.css | 29 ++++++++++++++++++++
 4 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/src/components/Timetable/Timetable.tsx b/src/components/Timetable/Timetable.tsx
index c4d2d11..2a05494 100644
--- a/src/components/Timetable/Timetable.tsx
+++ b/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" />
diff --git a/src/components/Timetable/style.module.css b/src/components/Timetable/style.module.css
index e69de29..e1e70fd 100644
--- a/src/components/Timetable/style.module.css
+++ b/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;
+}
diff --git a/src/components/TimetableRow/TimetableRow.tsx b/src/components/TimetableRow/TimetableRow.tsx
index 7c7bb15..d016523 100644
--- a/src/components/TimetableRow/TimetableRow.tsx
+++ b/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;
+    }
+};
diff --git a/src/components/TimetableRow/style.module.css b/src/components/TimetableRow/style.module.css
index a6f418f..e5819be 100644
--- a/src/components/TimetableRow/style.module.css
+++ b/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);
+}