From b04996df016fde8f13d111991104524471efdf55 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Thu, 17 Oct 2024 23:03:37 +0200
Subject: [PATCH] refactor: simplify styling

---
 .../event-block/EventBlock.module.scss        |  6 +--
 .../rundown/event-block/EventBlockInner.tsx   |  4 +-
 .../composite/EventBlockReporter.module.scss  | 51 +++----------------
 .../composite/EventBlockReporter.tsx          |  9 ++--
 4 files changed, 15 insertions(+), 55 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 140a918dbe..56f2259b4c 100644
--- a/apps/client/src/features/rundown/event-block/EventBlock.module.scss
+++ b/apps/client/src/features/rundown/event-block/EventBlock.module.scss
@@ -8,8 +8,8 @@ $skip-opacity: 0.2;
 
   display: grid;
   grid-template-areas:
-    'binder ...        ...     report'
-    'binder pb-actions times   ...'
+    'binder ...        ...     ...'
+    'binder pb-actions times   report'
     'binder pb-actions title   title'
     'binder pb-actions estatus estatus'
     'binder ...        ...     ...';
@@ -82,7 +82,7 @@ $skip-opacity: 0.2;
   }
 }
 
-.repotSection {
+.reportSection {
   grid-area: report;
 }
 
diff --git a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx b/apps/client/src/features/rundown/event-block/EventBlockInner.tsx
index 5f89459b4a..fba76c8d07 100644
--- a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx
+++ b/apps/client/src/features/rundown/event-block/EventBlockInner.tsx
@@ -93,8 +93,8 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
           linkStart={linkStart}
         />
       </div>
-      <div className={style.repotSection}>
-        <EventBlockReporter id={eventId} timeStart={timeStart}></EventBlockReporter>
+      <div className={style.reportSection}>
+        <EventBlockReporter id={eventId} timeStart={timeStart} />
       </div>
       <div className={style.titleSection}>
         <EditableBlockTitle title={title} eventId={eventId} placeholder='Event title' className={style.eventTitle} />
diff --git a/apps/client/src/features/rundown/event-block/composite/EventBlockReporter.module.scss b/apps/client/src/features/rundown/event-block/composite/EventBlockReporter.module.scss
index 025c524db6..8fe05d83ac 100644
--- a/apps/client/src/features/rundown/event-block/composite/EventBlockReporter.module.scss
+++ b/apps/client/src/features/rundown/event-block/composite/EventBlockReporter.module.scss
@@ -1,47 +1,10 @@
 .chip {
-  position: relative;
-  width: 8rem;
-}
-.even {
-  animation: 5s blink-even linear alternate infinite;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.odd {
-  animation: 5s blink-odd linear alternate infinite;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-@keyframes blink-even {
-  0% {
-    opacity: 0%;
-  }
-  48% {
-    opacity: 0%;
-  }
-  52% {
-    opacity: 100%;
-  }
-  100% {
-    opacity: 100%;
-  }
-}
+  background-color: $gray-1100;
+  white-space: nowrap;
 
-@keyframes blink-odd {
-  0% {
-    opacity: 100%;
-  }
-  48% {
-    opacity: 100%;
-  }
-  52% {
-    opacity: 0%;
-  }
-  100% {
-    opacity: 0%;
-  }
+  font-size: calc(1rem - 3px);
+  color: $label-gray;
+  padding: 0.125rem 0.5rem;
+  border-radius: 2px;
+  margin-top: 2px;
 }
diff --git a/apps/client/src/features/rundown/event-block/composite/EventBlockReporter.tsx b/apps/client/src/features/rundown/event-block/composite/EventBlockReporter.tsx
index 996a621c8e..22ae347e27 100644
--- a/apps/client/src/features/rundown/event-block/composite/EventBlockReporter.tsx
+++ b/apps/client/src/features/rundown/event-block/composite/EventBlockReporter.tsx
@@ -20,10 +20,7 @@ export default function EventBlockReporter(props: { id: string; timeStart: numbe
 
   const timeUntil = formatDuration(getTimeToStart(clock, timeStart, 0, offset), false);
 
-  return (
-    <div className={style.chip}>
-      <div className={style.even}>{reportDisplay}</div>
-      <div className={style.odd}>{timeUntil}</div>
-    </div>
-  );
+  // we show report display if the event is over
+  // otherwise we show time until
+  return <div className={style.chip}>{report ? reportDisplay : timeUntil}</div>;
 }