chore: redesigned train schedule list

src/components/TrainsView/StopLabel.vue

@@ -9,12 +9,13 @@
         stop.arrivalDelay > 0 && stop.status != 'unconfirmed'
           ? 'delayed'
           : stop.arrivalDelay < 0 && stop.status != 'unconfirmed'
-          ? 'preponed'
-          : stop.arrivalDelay == 0 && stop.status == 'confirmed'
-          ? 'on-time'
-          : ''
+            ? 'preponed'
+            : stop.arrivalDelay == 0 && stop.status == 'confirmed'
+              ? 'on-time'
+              : ''
       "
     >
+      p.
       <span v-if="stop.arrivalDelay != 0 && stop.status != 'unconfirmed'">
         <s>{{ timestampToString(stop.arrivalScheduled) }}</s>
         {{ timestampToString(stop.arrivalReal) }}
@@ -39,7 +40,11 @@
         stop.departureDelay - stop.arrivalDelay > 0 && !stop.duration ? 'delayed' : ''
       "
     >
-      {{ stop.duration || stop.departureDelay - stop.arrivalDelay }}
+      {{
+        stop.duration == 0 && stop.departureDelay > 0
+          ? stop.departureDelay - stop.arrivalDelay
+          : stop.duration
+      }}
       {{ stop.type == '' ? 'pt' : stop.type }}
     </span>
 
@@ -53,12 +58,13 @@
         stop.departureDelay > 0 && stop.status == 'confirmed'
           ? 'delayed'
           : stop.departureDelay < 0 && stop.status == 'confirmed'
-          ? 'preponed'
-          : stop.departureDelay == 0 && stop.status == 'confirmed'
-          ? 'on-time'
-          : ''
+            ? 'preponed'
+            : stop.departureDelay == 0 && stop.status == 'confirmed'
+              ? 'on-time'
+              : ''
       "
     >
+      o.
       <span v-if="stop.departureDelay != 0 && stop.status == 'confirmed'">
         <s>{{ timestampToString(stop.departureScheduled) }}</s>
         {{ timestampToString(stop.departureReal) }}
@@ -96,7 +102,7 @@ $delayedClr: salmon;
 $dateClr: #525151;
 $stopExchangeClr: #db8e29;
 $stopDefaultClr: #252525;
-$stopNameClr: #22a8d1;
+$stopNameClr: #303030;
 
 .stop-label {
   display: flex;
@@ -117,6 +123,7 @@ $stopNameClr: #22a8d1;
 
   .name {
     background: $stopNameClr;
+    border-radius: 0.5em 0 0 0.5em;
     padding: 0.3em 0.5em;
 
     display: flex;
@@ -130,6 +137,10 @@ $stopNameClr: #22a8d1;
   .date {
     background: $dateClr;
     padding: 0.3em 0.5em;
+
+    &:last-child {
+      border-radius: 0 0.5em 0.5em 0;
+    }
   }
 
   .stop {
@@ -150,7 +161,7 @@ $stopNameClr: #22a8d1;
   .departure {
     &[data-status='delayed'] {
       s {
-        color: #999;
+        color: #ccc;
       }
 
       span {
@@ -160,7 +171,7 @@ $stopNameClr: #22a8d1;
 
     &[data-status='preponed'] {
       s {
-        color: #999;
+        color: #ccc;
       }
 
       span {