Add missing ArrivalTimes.scss file

Author: zwliew

website/src/views/components/bus-map/ArrivalTimes.scss

@@ -0,0 +1,141 @@
+@import '~styles/utils/modules-entry';
+
+// Colors from https://material.io/design/color/
+$route-colors: (
+  A: #e53935,
+  B: #8e24aa,
+  C: #1e88e5,
+  D: #558b2f,
+  BTC: #6d4c41,
+);
+
+.iconWrapper {
+  $color: #0092da;
+
+  .hitArea {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: rgba($color, 0.3);
+    box-shadow: 0 0 8px rgba($color, 0.3);
+    transition: opacity 0.25s;
+
+    // Highlight the bus stops when editing
+    &.editing {
+      opacity: 1;
+      border: 1px solid #000;
+      background: rgba(#000, 0.3);
+    }
+  }
+
+  &:hover .hitArea {
+    opacity: 1;
+  }
+
+  .routeWrapper {
+    position: absolute;
+    top: 6px;
+    left: calc(100% - 4px);
+    width: 100px;
+    line-height: 1.3;
+    pointer-events: none; // So the entire 100px width will not be selectable when there's only one route
+
+    &.left {
+      right: calc(100% - 4px);
+      left: auto;
+      text-align: right;
+    }
+  }
+
+  .route {
+    display: inline-block;
+    padding: 2px 3px;
+    margin-right: 4px;
+    border-radius: 1px;
+    font-weight: bold;
+    font-size: 9px;
+    line-height: 1;
+    color: #fff;
+    pointer-events: auto;
+  }
+}
+
+// Popup styles
+.heading {
+  margin-bottom: 0.5rem;
+  font-weight: bold;
+  font-size: 0.9rem;
+}
+
+.timings {
+  margin-bottom: 0.2rem;
+
+  td {
+    font-size: 0.85rem;
+    white-space: nowrap;
+
+    strong {
+      color: theme-color(success);
+    }
+  }
+
+  .routeHeading {
+    vertical-align: middle;
+    color: #fff;
+  }
+}
+
+.refreshBtn {
+  width: 100%;
+  padding: 3px 0;
+
+  .refreshIcon {
+    margin-right: 0.6rem;
+
+    :global {
+      animation: spin 2s infinite linear paused;
+    }
+  }
+
+  &.isLoading .refreshIcon {
+    animation-play-state: running;
+  }
+}
+
+// Define a color for each route
+.routeA1 {
+  background: map-get($route-colors, 'A');
+}
+
+.routeA2 {
+  background: darken(map-get($route-colors, 'A'), 12);
+}
+
+.routeB1 {
+  background: map-get($route-colors, 'B');
+}
+
+.routeB2 {
+  background: lighten(map-get($route-colors, 'B'), 15);
+}
+
+.routeC {
+  background: map-get($route-colors, 'C');
+}
+
+.routeD1 {
+  background: map-get($route-colors, 'D');
+}
+
+.routeD2 {
+  background: lighten(map-get($route-colors, 'D'), 10);
+}
+
+.routeBTC1 {
+  background: map-get($route-colors, 'BTC');
+}
+
+.routeBTC2 {
+  background: lighten(map-get($route-colors, 'BTC'), 15);
+}

website/src/views/components/bus-map/ArrivalTimes.tsx

@@ -4,7 +4,7 @@ import { entries, sortBy } from 'lodash';
 
 import { RefreshCw as Refresh } from 'react-feather';
 import { BusTiming, NextBus, NextBusTime } from 'types/venues';
-import styles from './BusStops.scss';
+import styles from './ArrivalTimes.scss';
 
 type Props = BusTiming & {
   name: string;