feat: Refactor layout and styles for StopList and related components; add ThemeColorManager for dynamic theme support

1 files changed, 11 insertions, 4 deletions

diff --git a/src/frontend/app/components/StopItem.tsx b/src/frontend/app/components/StopItem.tsx
index ae51df8..de51576 100644
--- a/src/frontend/app/components/StopItem.tsx
+++ b/src/frontend/app/components/StopItem.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { Link } from "react-router";
+import { useApp } from "../AppContext";
 import StopDataProvider, { type Stop } from "../data/StopDataProvider";
 import LineIcon from "./LineIcon";
-import { useApp } from "../AppContext";
 
 interface StopItemProps {
   stop: Stop;
@@ -14,9 +14,16 @@ const StopItem: React.FC<StopItemProps> = ({ stop }) => {
   return (
     <li className="list-item">
       <Link className="list-item-link" to={`/estimates/${stop.stopId}`}>
-        {stop.favourite && <span className="favourite-icon">★</span>} (
-        {stop.stopId}) {StopDataProvider.getDisplayName(region, stop)}
-        <div className="line-icons">
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
+          <span style={{ fontWeight: 600 }}>
+            {stop.favourite && <span className="favourite-icon">★</span>}
+            {StopDataProvider.getDisplayName(region, stop)}
+          </span>
+          <span style={{ fontSize: "0.85em", color: "var(--subtitle-color)", marginLeft: "0.5rem" }}>
+            ({stop.stopId})
+          </span>
+        </div>
+        <div className="line-icons" style={{ marginTop: "0.25rem" }}>
           {stop.lines?.map((line) => (
             <LineIcon key={line} line={line} region={region} />
           ))}