refactor: review timer styles

apps/client/src/views/timer/Timer.scss

@@ -101,7 +101,7 @@
     .timer {
       opacity: 1;
       font-family: var(--timer-font, var(--font-family-override, $viewer-font-family));
-      color: var(--timer-colour, var(--timer-color-override, var(--phase-color)));
+      color: var(--timer-colour, var(--timer-color-override, $ui-white));
       line-height: 0.9em;
       text-align: center;
       letter-spacing: 0.05em;
@@ -117,14 +117,14 @@
 
       // use a class instead of a phase, to allow suppressing overtime style
       &--finished {
-        color: var(--timer-overtime-color-override, $timer-finished-color);
+        color: var(--timer-colour, var(--timer-overtime-color-override, $timer-finished-color));
       }
 
       &[data-phase="warning"] {
-        color: var(--timer-warning-color-override, var(--phase-color));
+        color: var(--timer-colour, var(--timer-warning-color-override));
       }
       &[data-phase="danger"] {
-        color: var(--timer-danger-color-override, var(--phase-color));
+        color: var(--timer-colour, var(--timer-danger-color-override));
       }
     }
   }

apps/client/src/views/timer/Timer.tsx

@@ -68,7 +68,7 @@ export default function Timer({
     timerType,
     freezeOvertime,
     freezeMessage,
-    hideOvertime,
+    hidePhase,
     font,
     keyColour,
     textColour,
@@ -88,7 +88,7 @@ export default function Timer({
     time.phase,
     freezeOvertime,
     freezeMessage,
-    hideOvertime,
+    hidePhase,
   );
   const isPlaying = getIsPlaying(time.playback);
   const showClock = !hideClock && getShowClock(viewTimerType);
@@ -136,11 +136,11 @@ export default function Timer({
   );
 
   // gather presentation styles
-  const timerColour = getTimerColour(viewSettings, showWarning, showDanger);
+  const timerColour = getTimerColour(viewSettings, textColour, showWarning, showDanger);
   const { timerFontSize, externalFontSize } = getEstimatedFontSize(display, secondaryContent);
   const userStyles = {
     ...(keyColour && { '--timer-bg': keyColour }),
-    ...(textColour && { '--timer-colour': textColour }),
+    ...(textColour && { '--timer-colour': timerColour }),
     ...(font && { '--timer-font': font }),
   };
 
@@ -183,10 +183,7 @@ export default function Timer({
         ) : (
           <div
             className={cx(['timer', !isPlaying && 'timer--paused', showFinished && 'timer--finished'])}
-            style={{
-              fontSize: `${timerFontSize}vw`,
-              '--phase-color': timerColour,
-            }}
+            style={{ fontSize: `${timerFontSize}vw` }}
             data-phase={time.phase}
           >
             {display}

apps/client/src/views/timer/timer.options.ts

@@ -65,9 +65,9 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           placeholder: 'e.g. Time is up!',
         },
         {
-          id: 'hideOvertime',
-          title: 'Hide Overtime',
-          description: 'Whether to suppress overtime styles (red borders and red text)',
+          id: 'hidePhase',
+          title: 'Hide progress styles',
+          description: 'Whether to suppress the progress styles (warning, danger and overtime)',
           type: 'boolean',
           defaultValue: false,
         },
@@ -187,7 +187,7 @@ type TimerOptions = {
   timerType?: TimerType;
   freezeOvertime: boolean;
   freezeMessage: string;
-  hideOvertime: boolean;
+  hidePhase: boolean;
   font?: string;
   keyColour?: string;
   textColour?: string;
@@ -217,7 +217,7 @@ function getOptionsFromParams(searchParams: URLSearchParams): TimerOptions {
     timerType: timerType === TimerType.None ? undefined : timerType,
     freezeOvertime: isStringBoolean(searchParams.get('freezeOvertime')),
     freezeMessage: searchParams.get('freezeMessage') ?? '',
-    hideOvertime: isStringBoolean(searchParams.get('hideOvertime')),
+    hidePhase: isStringBoolean(searchParams.get('hidePhase')),
 
     font: searchParams.get('font') ?? undefined,
     keyColour: makeColourString(searchParams.get('keyColour')),

apps/client/src/views/timer/timer.utils.ts

@@ -83,15 +83,32 @@ export function getShowModifiers(
   phase: TimerPhase,
   freezeOvertime: boolean,
   freezeMessage: string,
-  hideOvertime: boolean,
+  hidePhase: boolean,
 ) {
+  if (hidePhase) {
+    return {
+      showEndMessage: false,
+      showFinished: false,
+      showWarning: false,
+      showDanger: false,
+    };
+  }
+
   const showModifiers = timerType === TimerType.CountDown || countToEnd;
-  const finished = phase === TimerPhase.Overtime;
+  if (!showModifiers) {
+    return {
+      showEndMessage: false,
+      showFinished: false,
+      showWarning: false,
+      showDanger: false,
+    };
+  }
+
   return {
-    showEndMessage: showModifiers && finished && freezeOvertime && freezeMessage !== '',
-    showFinished: showModifiers && !hideOvertime && finished,
-    showWarning: showModifiers && phase === TimerPhase.Warning,
-    showDanger: showModifiers && phase === TimerPhase.Danger,
+    showEndMessage: freezeOvertime && freezeMessage !== '',
+    showFinished: phase === TimerPhase.Overtime,
+    showWarning: phase === TimerPhase.Warning,
+    showDanger: phase === TimerPhase.Danger,
   };
 }