fix for MultiPartProgressBar styling (#1022)

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

@@ -7,10 +7,6 @@ $progress-bar-br: 3px;
   position: relative;
   width: 100%;
   height: $progress-bar-size;
-  border-radius: $progress-bar-br;
-  background-color: var(--timer-progress-bg-override, $viewer-card-bg-color);
-  display: flex;
-  overflow: hidden;
 
   &--hidden {
     display: none;
@@ -18,31 +14,42 @@ $progress-bar-br: 3px;
   }
 }
 
+.multiprogress-bar__bg {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: var(--progress-bar-br, $progress-bar-br);
+
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
 .multiprogress-bar__indicator {
   position: absolute;
-  height: inherit;
+  inset: 0;
-  background-color: black;
+  margin: -1px;
+  margin-left: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.multiprogress-bar__indicator-bar {
+  background-color: var(--background-color-override, $ui-black);
   opacity: 0.8;
   transition: 1s linear;
   transition-property: width;
-  right: 0;
+
+  .multiprogress-bar--ignore-css-override & {
+    background-color: $ui-black;
+  }
 }
 
 .multiprogress-bar__bg-normal {
-  position: absolute;
+  flex: 1;
-  height: inherit;
-  right: 0;
-  width: 100%;
-}
-
-.multiprogress-bar__bg-warning {
-  position: absolute;
-  height: inherit;
-  right: 0;
 }
 
 .multiprogress-bar__bg-danger {
-  position: absolute;
+  flex-shrink: 0;
-  height: inherit;
-  right: 0;
 }

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

@@ -13,31 +13,51 @@ interface MultiPartProgressBar {
   danger?: MaybeNumber;
   dangerColor: string;
   hidden?: boolean;
+  ignoreCssOverride?: boolean;
   className?: string;
 }
 
 export default function MultiPartProgressBar(props: MultiPartProgressBar) {
-  const { now, complete, normalColor, warning, warningColor, danger, dangerColor, hidden, className = '' } = props;
+  const {
+    now,
+    complete,
+    normalColor,
+    warning,
+    warningColor,
+    danger,
+    dangerColor,
+    hidden,
+    ignoreCssOverride,
+    className = '',
+  } = props;
 
   const percentRemaining = complete === 0 ? 0 : 100 - clamp(100 - (Math.max(now ?? 0, 0) * 100) / complete, 0, 100);
 
   const dangerWidth = danger ? clamp((danger / complete) * 100, 0, 100) : 0;
-  const warningWidth = warning ? clamp((warning / complete) * 100, 0, 100) : 0;
+  const warningWidth = warning ? clamp((warning / complete) * 100 - dangerWidth, 0, 100) : 0;
 
   return (
-    <div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
+    <div
+      className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${
+        ignoreCssOverride ? 'multiprogress-bar--ignore-css-override' : ''
+      } ${className}`}
+    >
       {now !== null && (
         <>
-          <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
+          <div className='multiprogress-bar__bg'>
-          <div
+            <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
-            className='multiprogress-bar__bg-warning'
+            <div
-            style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
+              className='multiprogress-bar__bg-warning'
-          />
+              style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
-          <div
+            />
-            className='multiprogress-bar__bg-danger'
+            <div
-            style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
+              className='multiprogress-bar__bg-danger'
-          />
+              style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
-          <div className='multiprogress-bar__indicator' style={{ width: `${percentRemaining}%` }} />
+            />
+          </div>
+          <div className='multiprogress-bar__indicator'>
+            <div className='multiprogress-bar__indicator-bar' style={{ width: `${percentRemaining}%` }} />
+          </div>
         </>
       )}
     </div>

apps/client/src/features/cuesheet/cuesheet-progress/CuesheetProgress.tsx

@@ -19,6 +19,7 @@ export default function CuesheetProgress() {
       danger={timeDanger}
       dangerColor={data!.dangerColor}
       className={styles.progressOverride}
+      ignoreCssOverride
     />
   );
 }

apps/client/src/features/operator/status-bar/StatusBar.module.scss

@@ -105,5 +105,5 @@
 }
 
 .progressOverride {
-  border-radius: 0;
+  --progress-bar-br: 0;
 }

apps/client/src/features/operator/status-bar/StatusBarProgress.tsx

@@ -24,6 +24,7 @@ export default function StatusBarProgress(props: StatusBarProgressProps) {
       danger={timeDanger}
       dangerColor={viewSettings.dangerColor}
       className={styles.progressOverride}
+      ignoreCssOverride
     />
   );
 }