From 9ed46bea58dbb81ceada2a957fd1db653fb21e52 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Wed, 24 Dec 2025 17:53:32 +0100
Subject: Implement new UI styles

---
 src/frontend/app/routes/favourites.tsx | 16 ++++++++--------
 src/frontend/app/routes/home.tsx       | 14 +++++++-------
 src/frontend/app/routes/lines.tsx      |  4 ++--
 src/frontend/app/routes/map.tsx        |  4 ++--
 src/frontend/app/routes/planner.tsx    | 20 ++++++++++----------
 src/frontend/app/routes/settings.tsx   | 30 +++++++++++++++---------------
 src/frontend/app/routes/stops-$id.tsx  |  8 ++++----
 7 files changed, 48 insertions(+), 48 deletions(-)

(limited to 'src/frontend/app/routes')

diff --git a/src/frontend/app/routes/favourites.tsx b/src/frontend/app/routes/favourites.tsx
index ff229b2..deb3629 100644
--- a/src/frontend/app/routes/favourites.tsx
+++ b/src/frontend/app/routes/favourites.tsx
@@ -183,19 +183,19 @@ function SpecialPlaceCard({
   setLabel,
 }: SpecialPlaceCardProps) {
   return (
-    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+    <div className="bg-surface border border-border rounded-lg p-4">
       <div className="flex items-start justify-between gap-3">
         <div className="flex items-start gap-3 flex-1 min-w-0">
           <span className="text-2xl" aria-hidden="true">
             {icon}
           </span>
           <div className="flex-1 min-w-0">
-            <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">
+            <h3 className="font-semibold text-text mb-1">
               {label}
             </h3>
             {place ? (
-              <div className="text-sm text-gray-600 dark:text-gray-400">
-                <p className="font-medium text-gray-900 dark:text-gray-100">
+              <div className="text-sm text-muted">
+                <p className="font-medium text-text">
                   {place.name}
                 </p>
                 {place.type === "stop" && place.stopId && (
@@ -272,21 +272,21 @@ function FavouriteStopItem({
   };
 
   return (
-    <li className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+    <li className="bg-surface border border-border rounded-lg">
       <div className="flex items-stretch justify-between gap-2">
         <Link
           to={`/stops/${stop.stopId}`}
-          className="flex-1 min-w-0 p-3 no-underline hover:bg-gray-50 dark:hover:bg-gray-800/80 rounded-l-lg transition-colors"
+          className="flex-1 min-w-0 p-3 no-underline hover:bg-surface/80 rounded-l-lg transition-colors"
         >
           <div className="flex items-center gap-2 mb-1">
             <span className="text-yellow-500 text-base" aria-label="Favourite">
               ★
             </span>
-            <span className="text-xs text-gray-600 dark:text-gray-400 font-medium">
+            <span className="text-xs text-muted font-medium">
               ({stop.stopId})
             </span>
           </div>
-          <div className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
+          <div className="font-semibold text-text mb-2">
             {StopDataProvider.getDisplayName(stop)}
           </div>
           <div className="flex flex-wrap gap-1 items-center">
diff --git a/src/frontend/app/routes/home.tsx b/src/frontend/app/routes/home.tsx
index 36565bd..a20ba64 100644
--- a/src/frontend/app/routes/home.tsx
+++ b/src/frontend/app/routes/home.tsx
@@ -241,7 +241,7 @@ export default function StopList() {
     <div className="flex flex-col gap-4 py-4 pb-8">
       {/* Search Section */}
       <div className="w-full px-4">
-        <h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-gray-100">
+        <h3 className="text-lg font-semibold mb-2 text-text">
           {t("stoplist.search_label", "Buscar paradas")}
         </h3>
         <input
@@ -250,11 +250,11 @@ export default function StopList() {
           onChange={handleStopSearch}
           className="
             w-full px-4 py-3 text-base
-            border border-gray-300 dark:border-gray-700 rounded-xl
-            bg-white dark:bg-gray-800
-            text-gray-900 dark:text-gray-100
-            placeholder:text-gray-500 dark:placeholder:text-gray-400 placeholder:opacity-80
-            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+            border border-border rounded-xl
+            bg-surface
+            text-text
+            placeholder:text-muted placeholder:opacity-80
+            focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent
             transition-all duration-200
           "
         />
@@ -263,7 +263,7 @@ export default function StopList() {
       {/* Search Results */}
       {searchResults && searchResults.length > 0 ? (
         <div className="w-full px-4 flex flex-col gap-2">
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          <h2 className="text-lg font-semibold text-text">
             {t("stoplist.search_results", "Resultados de la búsqueda")}
           </h2>
           <ul className="list-none p-0 m-0 flex flex-col gap-2 md:grid md:grid-cols-[repeat(auto-fill,minmax(300px,1fr))] lg:grid-cols-[repeat(auto-fill,minmax(320px,1fr))]">
diff --git a/src/frontend/app/routes/lines.tsx b/src/frontend/app/routes/lines.tsx
index acf8a7f..900c543 100644
--- a/src/frontend/app/routes/lines.tsx
+++ b/src/frontend/app/routes/lines.tsx
@@ -24,11 +24,11 @@ export default function LinesPage() {
             href={line.scheduleUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow border border-gray-200 dark:border-gray-700"
+            className="flex items-center gap-3 p-4 bg-surface rounded-lg shadow hover:shadow-lg transition-shadow border border-border"
           >
             <LineIcon line={line.lineNumber} mode="rounded" />
             <div className="flex-1 min-w-0">
-              <p className="text-sm md:text-md font-semibold text-gray-900 dark:text-gray-100">
+              <p className="text-sm md:text-md font-semibold text-text">
                 {line.routeName}
               </p>
             </div>
diff --git a/src/frontend/app/routes/map.tsx b/src/frontend/app/routes/map.tsx
index 1ce9942..517549b 100644
--- a/src/frontend/app/routes/map.tsx
+++ b/src/frontend/app/routes/map.tsx
@@ -16,7 +16,7 @@ import Map, {
 import { useNavigate } from "react-router";
 import { PlannerOverlay } from "~/components/PlannerOverlay";
 import {
-  StopSheet,
+  StopSummarySheet,
   type StopSheetProps,
 } from "~/components/map/StopSummarySheet";
 import { APP_CONSTANTS } from "~/config/constants";
@@ -278,7 +278,7 @@ export default function StopMap() {
         />
 
         {selectedStop && (
-          <StopSheet
+          <StopSummarySheet
             isOpen={isSheetOpen}
             onClose={() => setIsSheetOpen(false)}
             stop={selectedStop}
diff --git a/src/frontend/app/routes/planner.tsx b/src/frontend/app/routes/planner.tsx
index 9e44425..3d0f703 100644
--- a/src/frontend/app/routes/planner.tsx
+++ b/src/frontend/app/routes/planner.tsx
@@ -125,14 +125,14 @@ const ItinerarySummary = ({
 
   return (
     <div
-      className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow mb-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-slate-700 border border-gray-200 dark:border-slate-700"
+      className="bg-surface p-4 rounded-lg shadow mb-3 cursor-pointer hover:bg-surface/80 border border-border"
       onClick={onClick}
     >
       <div className="flex justify-between items-center mb-2">
-        <div className="font-bold text-lg text-slate-900 dark:text-slate-100">
+        <div className="font-bold text-lg text-text">
           {startTime} - {endTime}
         </div>
-        <div className="text-gray-600 dark:text-gray-400">
+        <div className="text-muted">
           {durationMinutes} min
         </div>
       </div>
@@ -155,10 +155,10 @@ const ItinerarySummary = ({
 
           return (
             <React.Fragment key={idx}>
-              {idx > 0 && <span className="text-slate-400">›</span>}
+              {idx > 0 && <span className="text-muted/50">›</span>}
               {isWalk ? (
-                <div className="flex items-center gap-2 rounded-full bg-slate-100 px-3 py-1.5 text-sm text-slate-800 whitespace-nowrap">
-                  <Footprints className="w-4 h-4 text-slate-600" />
+                <div className="flex items-center gap-2 rounded-full bg-surface px-3 py-1.5 text-sm text-text whitespace-nowrap border border-border">
+                  <Footprints className="w-4 h-4 text-muted" />
                   <span className="font-semibold">
                     {legDurationMinutes} {t("estimates.minutes")}
                   </span>
@@ -176,21 +176,21 @@ const ItinerarySummary = ({
         })}
       </div>
 
-      <div className="flex items-center justify-between text-sm text-slate-600 dark:text-slate-400 mt-1">
+      <div className="flex items-center justify-between text-sm text-muted mt-1">
         <span>
           {t("planner.walk")}: {formatDistance(walkTotals.meters)}
           {walkTotals.minutes
-            ? ` • ${walkTotals.minutes} ${t("estimates.minutes")}`
+            ? ` • ${walkTotals.minutes} {t("estimates.minutes")}`
             : ""}
         </span>
         <span className="flex items-center gap-3">
-          <span className="flex items-center gap-1 font-semibold text-slate-700 dark:text-slate-300">
+          <span className="flex items-center gap-1 font-semibold text-text">
             <Coins className="w-4 h-4" />
             {cashFare === "0.00"
               ? t("planner.free")
               : t("planner.fare", { amount: cashFare })}
           </span>
-          <span className="flex items-center gap-1 text-slate-600 dark:text-slate-400">
+          <span className="flex items-center gap-1 text-muted">
             <CreditCard className="w-4 h-4" />
             {cardFare === "0.00"
               ? t("planner.free")
diff --git a/src/frontend/app/routes/settings.tsx b/src/frontend/app/routes/settings.tsx
index 56df777..c615844 100644
--- a/src/frontend/app/routes/settings.tsx
+++ b/src/frontend/app/routes/settings.tsx
@@ -31,7 +31,7 @@ export default function Settings() {
     <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       {/* Theme Selection */}
       <section className="mb-8">
-        <h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
+        <h2 className="text-xl font-semibold mb-4 text-text">
           {t("about.theme", "Tema")}
         </h2>
         <div className="grid grid-cols-3 gap-3 sm:gap-4">
@@ -42,12 +42,12 @@ export default function Settings() {
               className={`
                 p-4 sm:p-6 flex flex-col items-center justify-center gap-2
                 rounded-lg border-2 transition-all duration-200
-                hover:bg-gray-50 dark:hover:bg-gray-800
-                focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-offset-gray-900
+                hover:bg-surface/50
+                focus:outline-none focus:ring focus:ring-primary/50
                 ${
                   value === theme
-                    ? "border-blue-600 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 font-semibold"
-                    : "border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300"
+                    ? "border-primary bg-primary/10 text-primary font-semibold"
+                    : "border-border text-muted"
                 }
               `}
             >
@@ -62,17 +62,17 @@ export default function Settings() {
       <section className="mb-8">
         <label
           htmlFor="mapPositionMode"
-          className="block text-lg font-medium text-gray-900 dark:text-gray-100 mb-3"
+          className="block text-lg font-medium text-text mb-3"
         >
           {t("about.map_position_mode")}
         </label>
         <select
           id="mapPositionMode"
           className="
-            w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700
-            bg-white dark:bg-gray-800
-            text-gray-900 dark:text-gray-100
-            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+            w-full px-4 py-3 rounded-lg border border-border
+            bg-surface
+            text-text
+            focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent
             transition-colors duration-200
           "
           value={mapPositionMode}
@@ -87,17 +87,17 @@ export default function Settings() {
       <section>
         <label
           htmlFor="language"
-          className="block text-lg font-medium text-gray-900 dark:text-gray-100 mb-3"
+          className="block text-lg font-medium text-text mb-3"
         >
           {t("about.language", "Idioma")}
         </label>
         <select
           id="language"
           className="
-            w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700
-            bg-white dark:bg-gray-800
-            text-gray-900 dark:text-gray-100
-            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+            w-full px-4 py-3 rounded-lg border border-border
+            bg-surface
+            text-text
+            focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent
             transition-colors duration-200
           "
           value={i18n.language}
diff --git a/src/frontend/app/routes/stops-$id.tsx b/src/frontend/app/routes/stops-$id.tsx
index 7adcef2..9147302 100644
--- a/src/frontend/app/routes/stops-$id.tsx
+++ b/src/frontend/app/routes/stops-$id.tsx
@@ -181,13 +181,13 @@ export default function Estimates() {
                     className={`cursor-pointer transition-colors ${
                       favourited
                         ? "fill-[var(--star-color)] text-[var(--star-color)]"
-                        : "text-slate-500"
+                        : "text-muted"
                     }`}
                     onClick={toggleFavourite}
                   />
 
                   <CircleHelp
-                    className="text-slate-500 cursor-pointer"
+                    className="text-muted cursor-pointer"
                     onClick={() => setIsHelpModalOpen(true)}
                   />
                 </div>
@@ -205,12 +205,12 @@ export default function Estimates() {
                 <div>
                   {isReducedView ? (
                     <EyeClosed
-                      className="text-slate-500"
+                      className="text-muted"
                       onClick={() => setIsReducedView(false)}
                     />
                   ) : (
                     <Eye
-                      className="text-slate-500"
+                      className="text-muted"
                       onClick={() => setIsReducedView(true)}
                     />
                   )}
-- 
cgit v1.3