Remake home and settings pages using Tailwind styles

1 files changed, 30 insertions, 8 deletions

diff --git a/src/frontend/app/components/StopGalleryItem.tsx b/src/frontend/app/components/StopGalleryItem.tsx
index 72a13e5..6c80362 100644
--- a/src/frontend/app/components/StopGalleryItem.tsx
+++ b/src/frontend/app/components/StopGalleryItem.tsx
@@ -9,21 +9,43 @@ interface StopGalleryItemProps {
 
 const StopGalleryItem: React.FC<StopGalleryItemProps> = ({ stop }) => {
   return (
-    <div className="gallery-item">
-      <Link className="gallery-item-link" to={`/stops/${stop.stopId}`}>
-        <div className="gallery-item-header">
-          {stop.favourite && <span className="favourite-icon">★</span>}
-          <span className="gallery-item-code">({stop.stopId})</span>
+    <div className="flex-[0_0_90%] max-w-80 snap-start snap-always md:flex-[0_0_320px] lg:flex-[0_0_340px]">
+      <Link
+        className="
+          block p-3 min-h-[100px]
+          bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-800/80
+          border-2 border-gray-200 dark:border-gray-700 rounded-xl
+          no-underline text-gray-900 dark:text-gray-100
+          hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-sm
+          transition-all duration-200
+        "
+        to={`/stops/${stop.stopId}`}
+      >
+        <div className="flex items-center gap-2 mb-1">
+          {stop.favourite && <span className="text-yellow-500 text-base">★</span>}
+          <span className="text-xs text-gray-600 dark:text-gray-400 font-medium">
+            ({stop.stopId})
+          </span>
         </div>
-        <div className="gallery-item-name">
+        <div
+          className="text-[0.95rem] font-semibold mb-2 leading-snug line-clamp-2 min-h-[2.5em]"
+          style={{
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden'
+          }}
+        >
           {StopDataProvider.getDisplayName(stop)}
         </div>
-        <div className="gallery-item-lines">
+        <div className="flex flex-wrap gap-1 items-center">
           {stop.lines?.slice(0, 5).map((line) => (
             <LineIcon key={line} line={line} />
           ))}
           {stop.lines && stop.lines.length > 5 && (
-            <span className="more-lines">+{stop.lines.length - 5}</span>
+            <span className="text-xs text-gray-600 dark:text-gray-400 font-medium px-1.5 py-0.5 bg-gray-200 dark:bg-gray-700 rounded">
+              +{stop.lines.length - 5}
+            </span>
           )}
         </div>
       </Link>