style: user feedback tweaks

cpvalente · Sep 2, 2023 · ca9e49a · ca9e49a
1 parent b869fa5
commit ca9e49a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 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
@@ -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
@@ -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 (