From ca9e49a26f3aa726616de45a9673565f4ab7b924 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Sat, 2 Sep 2023 12:56:53 +0200
Subject: [PATCH] style: user feedback tweaks

---
 .../src/features/operator/status-bar/StatusBar.module.scss   | 4 ++++
 apps/client/src/features/operator/status-bar/StatusBar.tsx   | 5 ++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

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 4b6225169f..30582f2f31 100644
--- a/apps/client/src/features/operator/status-bar/StatusBar.module.scss
+++ b/apps/client/src/features/operator/status-bar/StatusBar.module.scss
@@ -31,6 +31,10 @@
   grid-area: playback;
   font-size: 2rem;
   color: $gray-700;
+
+  &.active {
+    color: $ui-white;
+  }
 }
 
 .timeNow {
diff --git a/apps/client/src/features/operator/status-bar/StatusBar.tsx b/apps/client/src/features/operator/status-bar/StatusBar.tsx
index cb75b770f3..cf76d886f7 100644
--- a/apps/client/src/features/operator/status-bar/StatusBar.tsx
+++ b/apps/client/src/features/operator/status-bar/StatusBar.tsx
@@ -4,6 +4,7 @@ import { millisToString } from 'ontime-utils';
 
 import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
 import { useTimer } from '../../../common/hooks/useSocket';
+import { cx } from '../../../common/utils/styleUtils';
 import { formatTime } from '../../../common/utils/time';
 
 import styles from './StatusBar.module.scss';
@@ -58,7 +59,9 @@ export default function StatusBar(props: StatusBarProps) {
   const elapsedTime = millisToString(timer.elapsed);
 
   const PlaybackIconComponent = useMemo(() => {
-    return <PlaybackIcon state={playback} skipTooltip className={styles.playbackIcon} />;
+    const isPlaying = playback === Playback.Play || playback === Playback.Roll;
+    const classes = cx([styles.playbackIcon, isPlaying ? styles.active : null]);
+    return <PlaybackIcon state={playback} skipTooltip className={classes} />;
   }, [playback]);
 
   return (