From eed6373dbff7aba088aadcfcd72b1adaba27d114 Mon Sep 17 00:00:00 2001
From: Shobhit Nagpal <74096450+Shobhit-Nagpal@users.noreply.github.com>
Date: Fri, 16 May 2025 23:30:40 +0530
Subject: [PATCH] refactor: change offset classes depending on playback state
 (#1611)

* refactor: assign offsetClasses based on playback state
---
 apps/client/src/features/overview/Overview.module.scss | 4 ++++
 apps/client/src/features/overview/Overview.tsx         | 5 +++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/features/overview/Overview.module.scss b/apps/client/src/features/overview/Overview.module.scss
index e178d95f5..923642a80 100644
--- a/apps/client/src/features/overview/Overview.module.scss
+++ b/apps/client/src/features/overview/Overview.module.scss
@@ -45,6 +45,10 @@
   @include ellipsis-overflow;
 }
 
+.offset {
+  color: $muted-gray;
+}
+
 .ahead {
   color: $playback-ahead;
 }
diff --git a/apps/client/src/features/overview/Overview.tsx b/apps/client/src/features/overview/Overview.tsx
index a2eee0ea8..a29c1d69d 100644
--- a/apps/client/src/features/overview/Overview.tsx
+++ b/apps/client/src/features/overview/Overview.tsx
@@ -1,4 +1,5 @@
 import { memo, PropsWithChildren, ReactNode, useMemo } from 'react';
+import { Playback } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
@@ -163,10 +164,10 @@ function ProgressOverview() {
 }
 
 function RuntimeOverview() {
-  const { clock, offset } = useRuntimePlaybackOverview();
+  const { clock, offset, playback } = useRuntimePlaybackOverview();
 
   const offsetText = getOffsetText(offset);
-  const offsetClasses = offset === null ? undefined : offset <= 0 ? style.behind : style.ahead;
+  const offsetClasses = cx([style.offset, playback !== Playback.Stop && (offset < 0 ? style.behind : style.ahead)]);
 
   return (
     <>