feat: Implement StopMapModal component for displaying bus stop locations with live tracking; enhance styles and add interaction features

1 files changed, 59 insertions, 2 deletions

diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationList.css b/src/frontend/app/components/Stops/ConsolidatedCirculationList.css
index 7e757fb..680a511 100644
--- a/src/frontend/app/components/Stops/ConsolidatedCirculationList.css
+++ b/src/frontend/app/components/Stops/ConsolidatedCirculationList.css
@@ -13,6 +13,7 @@
 }
 
 .consolidated-circulation-card {
+  all: unset;
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
@@ -21,11 +22,34 @@
   border-radius: 12px;
   border: 1px solid var(--border-color);
   padding: 0.65rem 0.85rem;
-  transition: box-shadow 0.2s ease;
+  transition: all 0.2s ease;
 }
 
-.consolidated-circulation-card:hover {
+.consolidated-circulation-card.has-gps {
+  cursor: pointer;
+}
+
+.consolidated-circulation-card.no-gps {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.consolidated-circulation-card.has-gps:hover {
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
+  border-color: var(--button-background-color);
+  background-color: color-mix(
+    in oklab,
+    var(--button-background-color) 5%,
+    var(--message-background-color)
+  );
+}
+
+.consolidated-circulation-card.has-gps:active {
+  transform: scale(0.98);
+}
+
+.consolidated-circulation-card:disabled {
+  pointer-events: none;
 }
 
 
@@ -149,6 +173,39 @@
   color: #1d4ed8;
 }
 
+/* GPS Indicator */
+.gps-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.gps-pulse {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #22c55e;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+  animation: gpsPulse 2s ease-in-out infinite;
+}
+
+@keyframes gpsPulse {
+  0% {
+    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.1);
+  }
+  100% {
+    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+  }
+}
+
 @media (max-width: 480px) {
   .consolidated-circulation-card {
     padding: 0.65rem 0.75rem;