refactor(rundown): improve visibility of count to end

apps/client/src/features/rundown/rundown-event/RundownEvent.module.scss

@@ -7,6 +7,7 @@ $skip-opacity: 0.2;
   background-color: $block-bg;
   margin-block: 0.25rem;
   overflow: initial;
+  position: relative;
 
   display: grid;
   grid-template-areas:
@@ -35,6 +36,10 @@ $skip-opacity: 0.2;
     background-color: $gray-1325;
   }
 
+  &.countToEnd {
+    --status-color-active-override: #{$orange-400};
+  }
+
   &.play {
     background-color: $active-green;
     @include declare-overrides;
@@ -155,7 +160,7 @@ $skip-opacity: 0.2;
   align-items: center;
   justify-content: space-between;
 
-  .nextTag {
+  .warningMeta {
     font-size: 1rem;
     color: $orange-500;
     letter-spacing: 0.03px;

apps/client/src/features/rundown/rundown-event/RundownEvent.tsx

@@ -253,6 +253,7 @@ export default function RundownEvent({
 
   const blockClasses = cx([
     style.rundownEvent,
+    countToEnd && style.countToEnd,
     skip && style.skip,
     isPast && style.past,
     loaded && style.loaded,

apps/client/src/features/rundown/rundown-event/RundownEventInner.tsx

@@ -120,7 +120,8 @@ function RundownEventInner({
       </div>
       <div className={style.titleSection}>
         <TitleEditor title={title} entryId={eventId} placeholder='Event title' className={style.eventTitle} />
-        {isNext && <span className={style.nextTag}>UP NEXT</span>}
+        {isNext && <span className={style.warningMeta}>UP NEXT</span>}
+        {!isNext && countToEnd && <span className={style.warningMeta}>COUNT TO END</span>}
       </div>
       <EventBlockPlayback
         eventId={eventId}

apps/client/src/features/rundown/time-input-flow/TimeInputFlow.tsx

@@ -27,7 +27,6 @@ interface TimeInputFlowProps {
 export default memo(TimeInputFlow);
 function TimeInputFlow({
   eventId,
-  countToEnd,
   timeStart,
   timeEnd,
   duration,
@@ -56,10 +55,6 @@ function TimeInputFlow({
     warnings.push('Over midnight');
   }
 
-  if (countToEnd) {
-    warnings.push('Count to End');
-  }
-
   const hasDelay = delay !== 0;
   const isLockedEnd = timeStrategy === TimeStrategy.LockEnd;
   const isLockedDuration = timeStrategy === TimeStrategy.LockDuration;