From 4056bc1b66db722bfcffaa960f8ff89150971a4d Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Sun, 8 Mar 2026 23:23:18 +0100
Subject: Refactor styles in StopSummarySheet and ReducedArrivalCard
 components; update translations in es-ES.json

---
 src/frontend/app/components/RouteIcon.css          |  1 -
 .../app/components/arrivals/ReducedArrivalCard.tsx |  9 +++---
 .../app/components/map/StopSummarySheet.css        | 35 ++--------------------
 .../app/components/map/StopSummarySheet.tsx        | 32 ++++++++++----------
 .../components/map/StopSummarySheetSkeleton.tsx    |  2 +-
 5 files changed, 23 insertions(+), 56 deletions(-)

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

diff --git a/src/frontend/app/components/RouteIcon.css b/src/frontend/app/components/RouteIcon.css
index f74b01f..445954d 100644
--- a/src/frontend/app/components/RouteIcon.css
+++ b/src/frontend/app/components/RouteIcon.css
@@ -16,7 +16,6 @@
 .line-icon-pill {
   display: inline-block;
   padding: 0.25rem 0.5rem;
-  margin-right: 0.5rem;
   font-size: 0.9rem;
   font-weight: 600;
   border-radius: 0.25rem;
diff --git a/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx b/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx
index 4ba08b1..27d97b3 100644
--- a/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx
+++ b/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx
@@ -138,13 +138,13 @@ export const ReducedArrivalCard: React.FC<ArrivalCardProps> = ({
   return (
     <Tag
       onClick={isClickable ? onClick : undefined}
-      className={`w-full text-left flex-none flex items-center gap-3 min-h-12 rounded px-3 py-2.5 transition-all bg-slate-50 dark:bg-slate-800 border border-gray-200 dark:border-gray-700 ${
+      className={`w-full text-left flex-none flex items-center gap-3 min-h-12 rounded p-2 transition-all bg-slate-50 dark:bg-slate-800 border border-gray-200 dark:border-gray-700 ${
         isClickable
           ? "hover:border-blue-400 dark:hover:border-blue-500 active:scale-[0.99] cursor-pointer"
           : ""
       }`}
     >
-      <div className="shrink-0 min-w-[7ch] mt-0.5">
+      <div className="shrink-0 min-w-[4ch] mt-0.5">
         <RouteIcon
           line={route.shortName}
           colour={route.colour}
@@ -216,9 +216,8 @@ export const ReducedArrivalCard: React.FC<ArrivalCardProps> = ({
         `.trim()}
       >
         <div className="flex flex-col items-center leading-none">
-          <span className="text-lg font-bold leading-none">{etaValue}</span>
-          <span className="text-[0.55rem] uppercase tracking-wider mt-0.5 opacity-90">
-            {etaUnit}
+          <span className="text-lg font-bold leading-none">
+            {etaValue}&apos;
           </span>
         </div>
       </div>
diff --git a/src/frontend/app/components/map/StopSummarySheet.css b/src/frontend/app/components/map/StopSummarySheet.css
index e39ac07..7b4b75c 100644
--- a/src/frontend/app/components/map/StopSummarySheet.css
+++ b/src/frontend/app/components/map/StopSummarySheet.css
@@ -16,34 +16,13 @@
 }
 
 .stop-sheet-content {
-  padding: 16px;
+  padding-inline: 1rem;
   display: flex;
   flex-direction: column;
   /* overflow: hidden; */
   touch-action: pan-y;
 }
 
-.stop-sheet-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.stop-sheet-title {
-  font-family: var(--font-display);
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--text-color);
-  margin: 0;
-}
-
-.stop-sheet-id {
-  font-family: var(--font-display);
-  font-size: 1rem;
-  color: var(--subtitle-color);
-}
-
 .stop-sheet-lines-container {
   display: flex;
   gap: 0.5rem;
@@ -88,14 +67,6 @@
   margin-block-start: 1.25rem;
 }
 
-.stop-sheet-subtitle {
-  font-family: var(--font-display);
-  font-size: 1.1rem;
-  font-weight: 500;
-  color: var(--text-color);
-  margin: 0 0 12px 0;
-}
-
 .stop-sheet-no-estimates {
   font-family: var(--font-display);
   text-align: center;
@@ -182,8 +153,7 @@
   flex-direction: column;
   gap: 0.75rem;
   margin: 0;
-  padding: 0.75rem 16px 1rem 16px;
-  border-top: 1px solid var(--border-color);
+  padding: 1rem 0.75rem;
   background-color: var(--background-color);
   z-index: 10;
 }
@@ -197,6 +167,7 @@
 
 .stop-sheet-actions {
   display: flex;
+  justify-content: end;
   gap: 0.75rem;
 }
 
diff --git a/src/frontend/app/components/map/StopSummarySheet.tsx b/src/frontend/app/components/map/StopSummarySheet.tsx
index be2df67..1ce6bdb 100644
--- a/src/frontend/app/components/map/StopSummarySheet.tsx
+++ b/src/frontend/app/components/map/StopSummarySheet.tsx
@@ -1,4 +1,3 @@
-import { RefreshCw } from "lucide-react";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Sheet } from "react-modal-sheet";
@@ -46,9 +45,20 @@ export const StopSummarySheet: React.FC<StopSheetProps> = ({
         <Sheet.Header />
         <Sheet.Content drag="y">
           <div className="stop-sheet-content">
-            <div className="stop-sheet-header">
-              <h2 className="stop-sheet-title">{stop.name}</h2>
-              <span className="stop-sheet-id">({stop.stopCode})</span>
+            <div className="flex flex-col gap-1.5 mb-4">
+              <h2 className="text-xl font-bold text-slate-900 dark:text-slate-100 leading-snug m-0">
+                {stop.name}
+              </h2>
+              <div className="text-sm flex items-center gap-1.5 text-slate-500 dark:text-slate-400 font-mono uppercase">
+                <span className="px-1.5 py-0.5 rounded flex items-center justify-center bg-slate-200 dark:bg-slate-700 text-xs font-bold text-slate-700 dark:text-slate-300 leading-none">
+                  {stop.stopId.split(":")[0]}
+                </span>
+                <span>
+                  {stop.stopCode?.split(":")[1] ||
+                    stop.stopId.split(":")[1] ||
+                    stop.stopId}
+                </span>
+              </div>
             </div>
 
             <div className={`flex flex-wrap flex-row gap-2`}>
@@ -84,7 +94,7 @@ export const StopSummarySheet: React.FC<StopSheetProps> = ({
             ) : data ? (
               <>
                 <div className="stop-sheet-estimates">
-                  <h3 className="stop-sheet-subtitle">
+                  <h3 className="text-base font-semibold text-slate-900 dark:text-slate-100 mb-2 mt-0">
                     {t("estimates.next_arrivals", "Next arrivals")}
                   </h3>
 
@@ -114,18 +124,6 @@ export const StopSummarySheet: React.FC<StopSheetProps> = ({
           )}
 
           <div className="stop-sheet-actions">
-            <button
-              className="stop-sheet-reload"
-              onClick={loadData}
-              disabled={loading}
-              title={t("estimates.reload", "Recargar estimaciones")}
-            >
-              <RefreshCw
-                className={`reload-icon ${loading ? "spinning" : ""}`}
-              />
-              {t("estimates.reload", "Recargar")}
-            </button>
-
             <Link
               to={`/stops/${stop.stopId}`}
               className="stop-sheet-view-all"
diff --git a/src/frontend/app/components/map/StopSummarySheetSkeleton.tsx b/src/frontend/app/components/map/StopSummarySheetSkeleton.tsx
index 7697efc..8931c58 100644
--- a/src/frontend/app/components/map/StopSummarySheetSkeleton.tsx
+++ b/src/frontend/app/components/map/StopSummarySheetSkeleton.tsx
@@ -18,7 +18,7 @@ export const StopSummarySheetSkeleton: React.FC<StopSheetSkeletonProps> = ({
       highlightColor="var(--skeleton-highlight)"
     >
       <div className="stop-sheet-estimates">
-        <h3 className="stop-sheet-subtitle">
+        <h3 className="text-base font-semibold text-slate-900 dark:text-slate-100 mb-2 mt-0">
           {t("estimates.next_arrivals", "Next arrivals")}
         </h3>
 
-- 
cgit v1.3