fix: use background-color: transparent; for overlap indicators (#699)

apps/client/src/features/rundown/event-block/EventBlock.module.scss

@@ -207,7 +207,7 @@ $skip-opacity: 0.1;
   gap: 0.5rem;
 
   .indicator {
-    background-color: $gray-1250;
+    background-color: transparent;
     margin: 0.4rem;
     margin-right: 0;
     border-radius: 0.7rem;
@@ -217,15 +217,11 @@ $skip-opacity: 0.1;
   .indicator.delay {
     background-color: $ontime-delay;
   }
-  .indicator.overlap {
-    background-color: $gray-600;
-  }
+  .indicator.nextDay,
+  .indicator.overlap,
   .indicator.spacing {
     background-color: $gray-600;
   }
-  .indicator.nextDay {
-    background-color: $gray-600;
-  }
 }
 
 .eventStatus {

apps/client/src/features/rundown/event-block/EventBlockInner.tsx

@@ -137,29 +137,28 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
         </Tooltip>
       ) : (
         <span className={style.indicators}>
-          <Tooltip
-            label={
-              delayTime && (
+          {delayTime && (
+            <Tooltip
+              label={
                 <div>
-                  {delayTime}
-                  <br />
+                  {delayTime} <br />
                   New Time: {newTime}
                 </div>
-              )
-            }
-          >
-            <div className={`${style.indicator} ${delayTime ? style.delay : ''}`} />
-          </Tooltip>
-          <Tooltip label={overlapTime}>
-            <div
-              className={`${style.indicator} ${
-                overlap > 0 ? style.overlap : overlap < 0 && overlapTime !== null ? style.spacing : ''
-              }`}
-            />
-          </Tooltip>
-          <Tooltip label='Start time is later than end'>
-            <div className={`${style.indicator} ${timeStart > timeEnd ? style.nextDay : ''}`} />
-          </Tooltip>
+              }
+            >
+              <div className={`${style.indicator} ${style.delay}`} />
+            </Tooltip>
+          )}
+          {overlapTime && (
+            <Tooltip label={overlapTime}>
+              <div className={`${style.indicator} ${overlap > 0 ? style.overlap : style.spacing}`} />
+            </Tooltip>
+          )}
+          {timeStart > timeEnd && (
+            <Tooltip label='Start time is later than end'>
+              <div className={`${style.indicator} ${style.nextDay}`} />
+            </Tooltip>
+          )}
         </span>
       )}
       <EventBlockPlayback