restyle subway lines

Author: thomassth

src/components/accordions/SubwayAccordions.module.css

@@ -0,0 +1,25 @@
+.subway-list {
+  .subway-accordion-item {
+    padding: 0 !important;
+
+    .station-btn {
+      padding: 0.5rem 0;
+    }
+  }
+
+  li:first-child {
+    .station-btn {
+      border-radius: 50% 50% 0 0;
+      padding-top: 0;
+      margin-top: 0.5rem;
+    }
+  }
+
+  li:last-child {
+    .station-btn {
+      border-radius: 0 0 50% 50%;
+      padding-bottom: 0;
+      margin-bottom: 0.5rem;
+    }
+  }
+}

src/components/accordions/SubwayAccordions.tsx

@@ -4,13 +4,22 @@ import {
   AccordionPanel,
   Button,
 } from "@fluentui/react-components";
-import { VehicleBus16Filled } from "@fluentui/react-icons";
+import { VehicleSubway16Filled } from "@fluentui/react-icons";
 import { Link } from "react-router-dom";
 
-import { RouteBranchStops } from "../../models/ttc";
-import { fluentStyles } from "../../styles/fluent";
-import { TtcBadge } from "../badges";
-import { LocationButton } from "./StopAccordions";
+import { RouteBranchStops } from "../../models/ttc.js";
+import { fluentStyles } from "../../styles/fluent.js";
+import { TtcBadge } from "../badges.js";
+import { LocationButton } from "./StopAccordions.js";
+import style from "./SubwayAccordions.module.css";
+
+const lineColors = new Map([
+  [1, "yellow"],
+  [2, "green"],
+  [3, "blue"],
+  [4, "purple"],
+  [5, "orange"],
+]);
 
 export function SubwayAccordions(props: {
   result: RouteBranchStops[];
@@ -23,9 +32,21 @@ export function SubwayAccordions(props: {
   const stops = props.result.map((lineStop) => {
     return (
       <li key={lineStop.id.toString()}>
-        <AccordionPanel className={fluentStyle.accordionPanel}>
-          <div className="line-details">
-            <ETAButton code={lineStop.code} line={props.lineNum} />
+        <AccordionPanel
+          className={[
+            style["subway-accordion-item"],
+            fluentStyle.accordionPanel,
+          ].join(" ")}
+        >
+          <div
+            className={style["station-btn"]}
+            style={{ background: lineColors.get(props.lineNum) }}
+          >
+            <ETAButton
+              code={lineStop.code}
+              line={props.lineNum}
+              type={"subway"}
+            />
           </div>
           <div className="line-details">
             <LocationButton
@@ -47,15 +68,18 @@ export function SubwayAccordions(props: {
         <TtcBadge key={props.lineNum} lineNum={props.lineNum.toString()} />
         {props.title}
       </AccordionHeader>
-      <ul>{stops}</ul>
+      <ul className={style["subway-list"]}>{stops}</ul>
     </AccordionItem>
   );
 }
 
-function ETAButton(props: { line: number; code: string }) {
+function ETAButton(props: { line: number; code: string; type: string }) {
   return (
     <Link to={`/ttc/lines/${props.line}/${props.code}`} title={"View stop ETA"}>
-      <Button icon={<VehicleBus16Filled />} />
+      <Button
+        icon={<VehicleSubway16Filled />}
+        shape={props.type === "subway" ? "circular" : "rounded"}
+      />
     </Link>
   );
 }

src/styles/fluent.ts

@@ -49,7 +49,8 @@ export const fluentStyles = makeStyles({
   },
   accordionPanel: {
     display: "grid",
-    gridTemplateColumns: "36px 36px auto",
+    gridTemplateColumns: "min-content min-content auto",
+    columnGap: "0.5rem",
     gridAutoRows: "auto",
     paddingTop: "8px",
     paddingBottom: "8px",