diff options
Diffstat (limited to 'src/frontend/app/components/StopItem.tsx')
| -rw-r--r-- | src/frontend/app/components/StopItem.tsx | 17 |
1 files changed, 10 insertions, 7 deletions
diff --git a/src/frontend/app/components/StopItem.tsx b/src/frontend/app/components/StopItem.tsx index 7875b59..9679b05 100644 --- a/src/frontend/app/components/StopItem.tsx +++ b/src/frontend/app/components/StopItem.tsx @@ -9,18 +9,21 @@ interface StopItemProps { const StopItem: React.FC<StopItemProps> = ({ stop }) => { return ( - <li className="list-item"> - <Link className="list-item-link" to={`/stops/${stop.stopId}`}> - <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}> - <span style={{ fontWeight: 600 }}> - {stop.favourite && <span className="favourite-icon">★</span>} + <li className="pb-3 border-b border-gray-200 dark:border-gray-700 md:border md:border-gray-300 dark:md:border-gray-700 md:rounded-lg md:p-3 md:pb-3"> + <Link + className="block text-gray-900 dark:text-gray-100 no-underline hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200" + to={`/stops/${stop.stopId}`} + > + <div className="flex justify-between items-baseline"> + <span className="font-semibold"> + {stop.favourite && <span className="text-yellow-500 mr-1">★</span>} {StopDataProvider.getDisplayName(stop)} </span> - <span style={{ fontSize: "0.85em", color: "var(--subtitle-color)", marginLeft: "0.5rem" }}> + <span className="text-sm text-gray-600 dark:text-gray-400 ml-2"> ({stop.stopId}) </span> </div> - <div className="line-icons" style={{ marginTop: "0.25rem" }}> + <div className="flex flex-wrap gap-1 mt-1"> {stop.lines?.map((line) => ( <LineIcon key={line} line={line} /> ))} |