From 9611722a6dafa03211eef74f7c5d3505a746c65c Mon Sep 17 00:00:00 2001
From: Alex Christoffer Rasmussen <ac@omnivox.dk>
Date: Tue, 9 Jan 2024 16:42:50 +0100
Subject: [PATCH] fix: use background-color: transparent; for overlap
 indicators (#699)

---
 .../event-block/EventBlock.module.scss        | 10 ++---
 .../rundown/event-block/EventBlockInner.tsx   | 39 +++++++++----------
 2 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/apps/client/src/features/rundown/event-block/EventBlock.module.scss b/apps/client/src/features/rundown/event-block/EventBlock.module.scss
index 7ad792686..a28bfe09d 100644
--- a/apps/client/src/features/rundown/event-block/EventBlock.module.scss
+++ b/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 {
diff --git a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx b/apps/client/src/features/rundown/event-block/EventBlockInner.tsx
index 65e31c61a..e6d31d510 100644
--- a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx
+++ b/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