Rename LineIcon -> RouteIcon, fix some size issues

3 files changed, 88 insertions, 68 deletions

diff --git a/src/frontend/app/components/arrivals/ArrivalCard.css b/src/frontend/app/components/arrivals/ArrivalCard.css
index 0e5af25..ee5f8e6 100644
--- a/src/frontend/app/components/arrivals/ArrivalCard.css
+++ b/src/frontend/app/components/arrivals/ArrivalCard.css
@@ -1,5 +1,28 @@
 @import "../../tailwind.css";
 
+.arrival-card {
+  display: grid;
+  grid-template-areas:
+    "icon route minutes"
+    "meta meta meta";
+
+  grid-template-columns: auto 1fr auto;
+}
+
+arrival-card--icon {
+  grid-area: icon;
+}
+.arrival-card--route {
+  grid-area: route;
+  min-width: 0;
+}
+.arrival-card--minutes {
+  grid-area: minutes;
+}
+.arrival-card--meta {
+  grid-area: meta;
+}
+
 .time-running {
   @apply bg-green-600/20 dark:bg-green-600/25 text-[#1a9e56] dark:text-[#22c55e];
 }
diff --git a/src/frontend/app/components/arrivals/ArrivalCard.tsx b/src/frontend/app/components/arrivals/ArrivalCard.tsx
index f1fc1a5..b99d3aa 100644
--- a/src/frontend/app/components/arrivals/ArrivalCard.tsx
+++ b/src/frontend/app/components/arrivals/ArrivalCard.tsx
@@ -2,7 +2,7 @@ import { AlertTriangle, BusFront, LocateIcon } from "lucide-react";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import Marquee from "react-fast-marquee";
 import { useTranslation } from "react-i18next";
-import LineIcon from "~/components/LineIcon";
+import RouteIcon from "~/components/RouteIcon";
 import { type Arrival } from "../../api/schema";
 import "./ArrivalCard.css";
 
@@ -188,21 +188,22 @@ export const ArrivalCard: React.FC<ArrivalCardProps> = ({
     <Tag
       type={isClickable ? "button" : undefined}
       onClick={isClickable ? onClick : undefined}
-      className={`w-full text-left flex items-start gap-3 rounded-xl px-3 py-3 transition-all bg-slate-50 dark:bg-slate-800 border border-gray-200 dark:border-gray-700 shadow-sm ${
+      className={`arrival-card w-full text-left gap-x-4 gap-y-3 rounded-xl p-2 transition-all bg-slate-50 dark:bg-slate-800 border border-gray-200 dark:border-gray-700 shadow-sm ${
         isClickable
           ? "hover:border-blue-400 dark:hover:border-blue-500 active:scale-[0.98] cursor-pointer"
           : ""
       }`}
     >
-      <div className="shrink-0 min-w-[7ch] mt-0.5">
-        <LineIcon
+      <div className="arrival-card--icon shrink-0 min-w-[3ch] mt-0.5">
+        <RouteIcon
           line={route.shortName}
           colour={route.colour}
           textColour={route.textColour}
           mode="pill"
         />
       </div>
-      <div className="flex-1 min-w-0 flex flex-col gap-1">
+
+      <div className="arrival-card--route shrink-0 flex flex-col gap-1">
         <div className="flex justify-between items-start gap-2">
           <div className="flex-1 min-w-0">
             <span
@@ -211,74 +212,70 @@ export const ArrivalCard: React.FC<ArrivalCardProps> = ({
               {headsign.destination}
             </span>
             {headsign.marquee && (
-              <div className="mt-0.5">
+              <div className="mt-0.5 w-auto">
                 <AutoMarquee text={headsign.marquee} />
               </div>
             )}
           </div>
-          <div
-            className={`
-              inline-flex items-center justify-center px-2 py-1 rounded-lg shrink-0 min-w-12
-              ${timeClass}
-            `.trim()}
-          >
-            <div className="flex flex-col items-center leading-none">
-              <span className="text-lg font-bold">{etaValue}</span>
-              <span className="text-[0.55rem] font-bold uppercase tracking-tighter opacity-80">
-                {etaUnit}
-              </span>
-            </div>
-          </div>
         </div>
+      </div>
+      <div
+        className={`
+          arrival-card--minutes inline-flex items-center justify-center px-2 py-1 rounded-lg min-w-11 text-center ${timeClass}
+        `.trim()}
+      >
+        <span className="text-lg font-bold leading-tight">
+          {etaValue}&apos;
+        </span>
+      </div>
 
-        <div className="flex items-center gap-2 flex-wrap">
-          {metaChips.map((chip, idx) => {
-            let chipColourClasses = "";
-            switch (chip.tone) {
-              case "delay-ok":
-                chipColourClasses =
-                  "bg-green-600/10 dark:bg-green-600/20 text-green-700 dark:text-green-300";
-                break;
-              case "delay-warn":
-                chipColourClasses =
-                  "bg-amber-600/10 dark:bg-yellow-600/20 text-amber-700 dark:text-yellow-300";
-                break;
-              case "delay-critical":
-                chipColourClasses =
-                  "bg-red-400/10 dark:bg-red-600/20 text-red-600 dark:text-red-300";
-                break;
-              case "delay-early":
-                chipColourClasses =
-                  "bg-blue-400/10 dark:bg-blue-600/20 text-blue-700 dark:text-blue-300";
-                break;
-              case "warning":
-                chipColourClasses =
-                  "bg-orange-400/10 dark:bg-orange-600/20 text-orange-700 dark:text-orange-300";
-                break;
-              default:
-                chipColourClasses =
-                  "bg-black/[0.04] dark:bg-white/[0.08] text-slate-500 dark:text-slate-400";
-            }
+      <div className="arrival-card--meta flex w-auto items-center gap-2 flex-wrap">
+        {metaChips.map((chip, idx) => {
+          let chipColourClasses = "";
+          switch (chip.tone) {
+            case "delay-ok":
+              chipColourClasses =
+                "bg-green-600/10 dark:bg-green-600/20 text-green-700 dark:text-green-300";
+              break;
+            case "delay-warn":
+              chipColourClasses =
+                "bg-amber-600/10 dark:bg-yellow-600/20 text-amber-700 dark:text-yellow-300";
+              break;
+            case "delay-critical":
+              chipColourClasses =
+                "bg-red-400/10 dark:bg-red-600/20 text-red-600 dark:text-red-300";
+              break;
+            case "delay-early":
+              chipColourClasses =
+                "bg-blue-400/10 dark:bg-blue-600/20 text-blue-700 dark:text-blue-300";
+              break;
+            case "warning":
+              chipColourClasses =
+                "bg-orange-400/10 dark:bg-orange-600/20 text-orange-700 dark:text-orange-300";
+              break;
+            default:
+              chipColourClasses =
+                "bg-black/[0.04] dark:bg-white/[0.08] text-slate-500 dark:text-slate-400";
+          }
 
-            return (
-              <span
-                key={`${chip.label}-${idx}`}
-                className={`text-xs px-2.5 py-0.5 rounded-full flex items-center justify-center gap-1 shrink-0 font-medium tracking-wide ${chipColourClasses}`}
-              >
-                {chip.kind === "gps" && (
-                  <LocateIcon className="w-3 h-3 inline-block" />
-                )}
-                {chip.kind === "warning" && (
-                  <AlertTriangle className="w-3 h-3 inline-block" />
-                )}
-                {chip.kind === "vehicle" && (
-                  <BusFront className="w-3 h-3 inline-block" />
-                )}
-                {chip.label}
-              </span>
-            );
-          })}
-        </div>
+          return (
+            <span
+              key={`${chip.label}-${idx}`}
+              className={`text-xs px-2.5 py-0.5 rounded-full flex items-center justify-center gap-1 shrink-0 font-medium tracking-wide ${chipColourClasses}`}
+            >
+              {chip.kind === "gps" && (
+                <LocateIcon className="w-3 h-3 inline-block" />
+              )}
+              {chip.kind === "warning" && (
+                <AlertTriangle className="w-3 h-3 inline-block" />
+              )}
+              {chip.kind === "vehicle" && (
+                <BusFront className="w-3 h-3 inline-block" />
+              )}
+              {chip.label}
+            </span>
+          );
+        })}
       </div>
     </Tag>
   );
diff --git a/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx b/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx
index 44c8eda..4ba08b1 100644
--- a/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx
+++ b/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx
@@ -1,7 +1,7 @@
 import { AlertTriangle, BusFront, LocateIcon } from "lucide-react";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import LineIcon from "~/components/LineIcon";
+import RouteIcon from "~/components/RouteIcon";
 import { type Arrival } from "../../api/schema";
 import "./ArrivalCard.css";
 
@@ -145,7 +145,7 @@ export const ReducedArrivalCard: React.FC<ArrivalCardProps> = ({
       }`}
     >
       <div className="shrink-0 min-w-[7ch] mt-0.5">
-        <LineIcon
+        <RouteIcon
           line={route.shortName}
           colour={route.colour}
           textColour={route.textColour}