refactor: improve fallback timer consistency

apps/client/src/features/control/playback/timer-display/TimerDisplay.module.scss

@@ -16,4 +16,8 @@
   &.finished {
     color: $timer-finished-color;
   }
+
+  &.muted {
+    color: $muted-gray;
+  }
 }

apps/client/src/features/control/playback/timer-display/TimerDisplay.tsx

@@ -19,7 +19,7 @@ export default function TimerDisplay(props: TimerDisplayProps) {
   const isNegative = (time ?? 0) < 0;
   const display =
     time == null ? timerPlaceholder : millisToString(time, { fallback: timerPlaceholder }).replace('-', '');
-  const classes = cx([style.timer, isNegative ? style.finished : null]);
+  const classes = cx([style.timer, isNegative ? style.finished : null, time === null && style.muted]);
 
   return <div className={classes}>{display}</div>;
 }

apps/client/src/features/overview/Overview.tsx

@@ -4,7 +4,7 @@ import { millisToString } from 'ontime-utils';
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import { useIsOnline, useRuntimeOverview, useRuntimePlaybackOverview, useTimer } from '../../common/hooks/useSocket';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import { cx, enDash } from '../../common/utils/styleUtils';
+import { cx, enDash, timerPlaceholder } from '../../common/utils/styleUtils';
 
 import { TimeColumn, TimeRow } from './composite/TimeLayout';
 import { calculateEndAndDaySpan, formatedTime, getOffsetText } from './overviewUtils';
@@ -26,15 +26,37 @@ function _EditorOverview({ children }: PropsWithChildren) {
     <OverviewWrapper navElements={children}>
       <TitlesOverview />
       <div>
-        <TimeRow label='Planned start' value={formatedTime(plannedStart)} className={style.start} />
+        <TimeRow
-        <TimeRow label='Actual start' value={formatedTime(actualStart)} className={style.start} />
+          label='Planned start'
+          value={formatedTime(plannedStart)}
+          className={style.start}
+          muted={plannedStart === null}
+        />
+        <TimeRow
+          label='Actual start'
+          value={formatedTime(actualStart)}
+          className={style.start}
+          muted={actualStart === null}
+        />
       </div>
       <ProgressOverview />
       <CurrentBlockOverview />
       <RuntimeOverview />
       <div>
-        <TimeRow label='Planned end' value={plannedEndText} className={style.end} daySpan={maybePlannedDaySpan} />
+        <TimeRow
-        <TimeRow label='Expected end' value={expectedEndText} className={style.end} daySpan={maybeExpectedDaySpan} />
+          label='Planned end'
+          value={plannedEndText}
+          className={style.end}
+          daySpan={maybePlannedDaySpan}
+          muted={maybePlannedEnd === null}
+        />
+        <TimeRow
+          label='Expected end'
+          value={expectedEndText}
+          className={style.end}
+          daySpan={maybeExpectedDaySpan}
+          muted={maybeExpectedEnd === null}
+        />
       </div>
     </OverviewWrapper>
   );
@@ -57,8 +79,20 @@ function _CuesheetOverview({ children }: PropsWithChildren) {
       <TimerOverview />
       <RuntimeOverview />
       <div>
-        <TimeRow label='Planned end' value={plannedEndText} className={style.end} daySpan={maybePlannedDaySpan} />
+        <TimeRow
-        <TimeRow label='Expected end' value={expectedEndText} className={style.end} daySpan={maybeExpectedDaySpan} />
+          label='Planned end'
+          value={plannedEndText}
+          className={style.end}
+          daySpan={maybePlannedDaySpan}
+          muted={maybePlannedEnd === null}
+        />
+        <TimeRow
+          label='Expected end'
+          value={expectedEndText}
+          className={style.end}
+          daySpan={maybeExpectedDaySpan}
+          muted={maybeExpectedEnd === null}
+        />
       </div>
     </OverviewWrapper>
   );
@@ -100,15 +134,22 @@ function CurrentBlockOverview() {
 
   const timeInBlock = formatedTime(currentBlock.startedAt === null ? null : clock - currentBlock.startedAt);
 
-  return <TimeColumn label='Time in block' value={timeInBlock} className={style.clock} />;
+  return (
+    <TimeColumn
+      label='Time in block'
+      value={timeInBlock}
+      className={style.clock}
+      muted={currentBlock.startedAt === null}
+    />
+  );
 }
 
 function TimerOverview() {
   const { current } = useTimer();
 
-  const display = millisToString(current);
+  const display = millisToString(current, { fallback: timerPlaceholder });
 
-  return <TimeColumn label='Running timer' value={display} />;
+  return <TimeColumn label='Running timer' value={display} muted={current === null} />;
 }
 
 function ProgressOverview() {

apps/client/src/features/overview/composite/TimeLayout.module.scss

@@ -44,6 +44,10 @@
     content: "*";
     vertical-align: super;
     font-size: 0.75em;
-    color: $blue-500;
+    color: $info-blue;
   }
 }
+
+.muted {
+  color: $muted-gray;
+}

apps/client/src/features/overview/composite/TimeLayout.tsx

@@ -7,20 +7,21 @@ import style from './TimeLayout.module.scss';
 interface TimeLayoutProps {
   label: string;
   value: string;
+  muted?: boolean;
   daySpan?: number;
   className?: string;
 }
 
-export function TimeColumn({ label, value, className }: TimeLayoutProps) {
+export function TimeColumn({ label, value, muted, className }: TimeLayoutProps) {
   return (
     <div className={style.column}>
       <span className={style.label}>{label}</span>
-      <span className={cx([style.clock, className])}>{value}</span>
+      <span className={cx([style.clock, muted && style.muted, className])}>{value}</span>
     </div>
   );
 }
 
-export function TimeRow({ label, value, daySpan, className }: TimeLayoutProps) {
+export function TimeRow({ label, value, daySpan, muted, className }: TimeLayoutProps) {
   return (
     <div className={style.row}>
       <span className={style.label}>{label}</span>
@@ -29,7 +30,7 @@ export function TimeRow({ label, value, daySpan, className }: TimeLayoutProps) {
           <span className={cx([style.clock, style.daySpan, className])}>{value}</span>
         </Tooltip>
       ) : (
-        <span className={cx([style.clock, className])}>{value}</span>
+        <span className={cx([style.clock, muted && style.muted, className])}>{value}</span>
       )}
     </div>
   );

apps/client/src/theme/_ontimeStyles.scss

@@ -52,6 +52,7 @@ $main-spacing: 2rem;
 $ontime-font-family: "Open Sans", "Segoe UI", sans-serif;
 $label-gray: $gray-400;
 $secondary-text-gray: $gray-400;
+$muted-gray: $gray-600;
 $section-white: $ui-white;
 $inner-section-text-size: calc(1rem - 2px);
 $text-body-size: calc(1rem - 1px);