Remake home and settings pages using Tailwind styles

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} />
           ))}