From 770f764d55045dae34737a5d6111cc7362330e9a Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Tue, 21 Oct 2025 23:49:00 +0200
Subject: Update deployment script and enhance StopSheet component styles and
 structure

---
 .github/workflows/deploy.yml              |  2 +-
 src/frontend/app/components/StopSheet.css | 31 ++++++++++++++++++++++++++++++-
 src/frontend/app/components/StopSheet.tsx | 16 ++++++++--------
 3 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 09ecff3..827ffd1 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -107,7 +107,7 @@ jobs:
         run: scp -r dist/backend/* app@${{ secrets.TARGET_HOST }}:/opt/busurbano/
 
       - name: Allow execution
-        run: ssh ${{ secrets.TARGET_USER }}@${{ secrets.TARGET_HOST }} "echo ${{ secrets.TARGET_PASSWORD }} | sudo -S chmod +x /opt/busurbano/Costasdev.Busurbano.Backend"
+        run: ssh ${{ secrets.TARGET_USER }}@${{ secrets.TARGET_HOST }} "chmod +x /opt/busurbano/Costasdev.Busurbano.Backend"
 
       - name: Start service
         run: ssh ${{ secrets.TARGET_USER }}@${{ secrets.TARGET_HOST }} "echo ${{ secrets.TARGET_PASSWORD }} | sudo -S /usr/bin/systemctl start busurbano"
diff --git a/src/frontend/app/components/StopSheet.css b/src/frontend/app/components/StopSheet.css
index 165f9fe..d3c0b06 100644
--- a/src/frontend/app/components/StopSheet.css
+++ b/src/frontend/app/components/StopSheet.css
@@ -93,13 +93,42 @@
   white-space: nowrap;
 }
 
+.stop-sheet-estimate-arrival {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
 .stop-sheet-estimate-time {
-  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.stop-sheet-estimate-time.is-minutes {
+  color: #22c55e;
+}
+
+.stop-sheet-estimate-time svg {
+  width: 18px;
+  height: 18px;
   color: var(--subtitle-color);
+  flex-shrink: 0;
+}
+
+.stop-sheet-estimate-time.is-minutes svg {
+  color: #22c55e;
 }
 
 .stop-sheet-estimate-distance {
+  font-size: 0.75rem;
   color: var(--subtitle-color);
+  text-align: right;
 }
 
 .stop-sheet-footer {
diff --git a/src/frontend/app/components/StopSheet.tsx b/src/frontend/app/components/StopSheet.tsx
index 7255884..0084c14 100644
--- a/src/frontend/app/components/StopSheet.tsx
+++ b/src/frontend/app/components/StopSheet.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Sheet } from "react-modal-sheet";
 import { Link } from "react-router";
 import { useTranslation } from "react-i18next";
-import { RefreshCw } from "lucide-react";
+import { Clock, ClockFading, Hourglass, RefreshCw } from "lucide-react";
 import LineIcon from "./LineIcon";
 import { StopSheetSkeleton } from "./StopSheetSkeleton";
 import { ErrorDisplay } from "./ErrorDisplay";
@@ -168,14 +168,14 @@ export const StopSheet: React.FC<StopSheetProps> = ({
                             <div className="stop-sheet-estimate-route">
                               {estimate.route}
                             </div>
-                            <div className="stop-sheet-estimate-time">
+                          </div>
+                          <div className="stop-sheet-estimate-arrival">
+                            <div className={`stop-sheet-estimate-time ${estimate.minutes <= 15 ? 'is-minutes' : ''}`}>
+                              <Clock />
                               {formatTime(estimate.minutes)}
-                              {regionConfig.showMeters && estimate.meters > -1 && (
-                                <span className="stop-sheet-estimate-distance">
-                                  {" • "}
-                                  {formatDistance(estimate.meters)}
-                                </span>
-                              )}
+                            </div>
+                            <div className="stop-sheet-estimate-distance">
+                              {formatDistance(estimate.meters)}
                             </div>
                           </div>
                         </div>
-- 
cgit v1.3