Timetable styling

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);
+}