From 5a4494ba8542cca89a24a53d4c4cc4ff65b73326 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Mon, 18 Aug 2025 11:59:22 +0200
Subject: [PATCH] refactor: improve timers visibility

---
 .../FloatingNavigation.module.scss                 |  3 ++-
 .../operator/status-bar/StatusBar.module.scss      | 14 ++++++++++++--
 .../features/overview/composite/TimeElements.tsx   |  8 ++++++--
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/common/components/navigation-menu/floating-navigation/FloatingNavigation.module.scss b/apps/client/src/common/components/navigation-menu/floating-navigation/FloatingNavigation.module.scss
index ea5279118..21197cdaf 100644
--- a/apps/client/src/common/components/navigation-menu/floating-navigation/FloatingNavigation.module.scss
+++ b/apps/client/src/common/components/navigation-menu/floating-navigation/FloatingNavigation.module.scss
@@ -14,7 +14,8 @@
   display: flex;
   flex-direction: column;
   row-gap: 1rem;
-  padding: 0.5em;
+  padding-top: 0.75rem;
+  padding-left: 0.5em;
 
   position: fixed;
   left: 0;
diff --git a/apps/client/src/features/operator/status-bar/StatusBar.module.scss b/apps/client/src/features/operator/status-bar/StatusBar.module.scss
index d41fa24ed..7ff6d6889 100644
--- a/apps/client/src/features/operator/status-bar/StatusBar.module.scss
+++ b/apps/client/src/features/operator/status-bar/StatusBar.module.scss
@@ -7,8 +7,8 @@
 }
 
 .timers {
-  padding-block: 0.75rem 0.5rem;
-  padding-inline: 1rem 0;
+  padding-block: 1rem 0.5rem;
+  padding-inline: 1rem 0.5rem;
 
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -18,11 +18,21 @@
 .runningTimer {
   grid-area: timers;
   justify-self: center;
+
+  :nth-child(2) {
+    font-size: 2.5rem;
+    line-height: 1.2;
+  }
 }
 
 .timeNow {
   grid-area: clock;
   justify-self: right;
+
+  :nth-child(2) {
+    font-size: 2.5rem;
+    line-height: 1.2;
+  }
 }
 
 .progressOverride {
diff --git a/apps/client/src/features/overview/composite/TimeElements.tsx b/apps/client/src/features/overview/composite/TimeElements.tsx
index 60bfcef48..2a64a5633 100644
--- a/apps/client/src/features/overview/composite/TimeElements.tsx
+++ b/apps/client/src/features/overview/composite/TimeElements.tsx
@@ -144,11 +144,15 @@ function FlagTimes() {
       <span className={title ? style.labelTitle : style.label}>{`${title ? title : 'Flag'} `}</span>
       <div className={style.labelledElement}>
         <Tooltip text='Time to next flag planned start' render={<TbFlagPin className={style.icon} />} />
-        <span data-testid='flag-plannedStart' className={cx([style.time, !entry && style.muted])}>{plannedTimeUntilDisplay}</span>
+        <span data-testid='flag-plannedStart' className={cx([style.time, !entry && style.muted])}>
+          {plannedTimeUntilDisplay}
+        </span>
       </div>
       <div className={style.labelledElement}>
         <Tooltip text='Time to next flag expected start' render={<TbFlagStar className={style.icon} />} />
-        <span data-testid='flag-expectedStart' className={cx([style.time, expectedTimeUntil === null && style.muted])}>{expectedTimeUntilDisplay}</span>
+        <span data-testid='flag-expectedStart' className={cx([style.time, expectedTimeUntil === null && style.muted])}>
+          {expectedTimeUntilDisplay}
+        </span>
       </div>
     </div>
   );