refactor: allow overriding progress bar phases

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss

@@ -53,3 +53,6 @@ $progress-bar-br: 3px;
 .multiprogress-bar__bg-danger {
   flex-shrink: 0;
 }
+.multiprogress-bar__bg-danger--overtime {
+  background: var(--timer-overtime-color-override, $timer-finished-color);
+}

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx

@@ -14,6 +14,7 @@ interface MultiPartProgressBar {
   danger?: MaybeNumber;
   dangerColor: string;
   hidden?: boolean;
+  hideOvertime?: boolean;
   ignoreCssOverride?: boolean;
   className?: string;
 }
@@ -28,6 +29,7 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
     danger,
     dangerColor,
     hidden,
+    hideOvertime,
     ignoreCssOverride,
     className = '',
   } = props;
@@ -35,6 +37,8 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
   const percentRemaining = 100 - getProgress(now, complete);
   const dangerWidth = danger ? 100 - getProgress(danger, complete) : 0;
   const warningWidth = warning ? 100 - dangerWidth - getProgress(warning, complete) : 0;
+  const isOvertime = now !== null && now < 0;
+  const showOvertime = isOvertime && !hideOvertime;
 
   return (
     <div
@@ -54,8 +58,8 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
               style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
             />
             <div
-              className='multiprogress-bar__bg-danger'
-              style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
+              className={cx(['multiprogress-bar__bg-danger', showOvertime && 'multiprogress-bar__bg-danger--overtime'])}
+              style={{ width: `${dangerWidth}%`, backgroundColor: showOvertime ? undefined : dangerColor }}
             />
           </div>
           <div className='multiprogress-bar__indicator'>

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

@@ -18,7 +18,7 @@
   flex-direction: column;
 
   &--finished {
-    outline: clamp(4px, 1vw, 16px) solid $timer-finished-color;
+    outline: clamp(4px, 1vw, 16px) solid var(--timer-overtime-color-override, $timer-finished-color);
     outline-offset: calc(clamp(4px, 1vw, 16px) * -1);
     transition: $viewer-transition-time;
   }
@@ -95,7 +95,7 @@
       font-size: 11.5vw;
       line-height: 0.9em;
       font-weight: 600;
-      color: $timer-finished-color;
+      color: var(--timer-overtime-color-override, $timer-finished-color);
       padding: 0;
     }
 
@@ -116,8 +116,16 @@
         transition: $viewer-transition-time;
       }
 
+      // use a class instead of a phase, to allow suppressing overtime style
       &--finished {
-        color: $timer-finished-color;
+        color: var(--timer-overtime-color-override, $timer-finished-color);
+      }
+
+      &[data-phase="warning"] {
+        color: var(--timer-warning-color-override, var(--phase-color));
+      }
+      &[data-phase="danger"] {
+        color: var(--timer-danger-color-override, var(--phase-color));
       }
     }
   }

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

@@ -153,6 +153,7 @@ export default function Timer(props: TimerProps) {
               fontSize: `${timerFontSize}vw`,
               '--phase-color': timerColour,
             }}
+            data-phase={time.phase}
           >
             {display}
           </div>
@@ -175,6 +176,7 @@ export default function Timer(props: TimerProps) {
           warningColor={viewSettings.warningColor}
           danger={eventNow?.timeDanger}
           dangerColor={viewSettings.dangerColor}
+          hideOvertime={!showFinished}
         />
       )}