diff options
Diffstat (limited to 'src/frontend/app/components/map')
3 files changed, 19 insertions, 50 deletions
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> |