refactor: tweek color

apps/client/src/features/rundown/entry-editor/GroupEditor.tsx

@@ -81,7 +81,7 @@ export default function GroupEditor({ group }: GroupEditorProps) {
           <div>
             <Editor.Label htmlFor='eventId'>Plan offset</Editor.Label>
             <TextLikeInput
-              offset={planOffsetLabel}
+              offset={planOffsetLabel === 'under' ? 'over' : planOffsetLabel}
               className={cx([style.textLikeInput, planOffset === null && style.inactive])}
               disabled
             >

apps/client/src/features/rundown/rundown-group/RundownGroup.module.scss

@@ -74,47 +74,36 @@
   .metaLabel {
     color: $muted-gray;
     font-size: calc(1rem - 3px);
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
   }
 }
 
-.strike {
-  text-decoration: wavy underline;
-  margin-right: 0.25rem;
-  color: $ui-white;
-}
-
 .duration {
   display: flex;
   align-items: center;
   gap: 0.25rem;
+  color: $ui-white;
+
+  &.warning {
+    .strike {
+      // color: $playback-over;
+      text-decoration: wavy underline;
+      text-decoration-color: $playback-over;
+    }
+    .offsetLabel {
+      background-color: $playback-over;
+    }
+  }
 }
 
 .lockIcon {
-  &.inactive {
+  color: $muted-gray;
-    color: $muted-gray;
-  }
-  &.active {
-    color: $active-indicator;
-  }
 }
 
-.over {
+.target {
-  color: $playback-over;
+  display: contents;
-  .strike {
-    text-decoration-color: $playback-over;
-  }
-  .offsetLabel {
-    background-color: $playback-over;
-  }
-}
-.under {
-  color: $playback-under;
-  .strike {
-    text-decoration-color: $playback-under;
-  }
-  .offsetLabel {
-    background-color: $playback-under;
-  }
 }
 
 .drag {

apps/client/src/features/rundown/rundown-group/RundownGroup.tsx

@@ -19,7 +19,6 @@ import { useEntryActionsContext } from '../../../common/context/EntryActionsCont
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
 import { useEntryCopy } from '../../../common/stores/entryCopyStore';
 import { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils';
-import { getOffsetState } from '../../../common/utils/offset';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import { formatDuration, formatTime } from '../../../common/utils/time';
 import TitleEditor from '../common/TitleEditor';
@@ -48,6 +47,19 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
 
   const isDurationMatching = data.targetDuration !== null && data.targetDuration === data.duration;
 
+  const [planOffset, offset] = (() => {
+    if (data.targetDuration === null) {
+      return [null, 0];
+    }
+
+    const offset = data.duration - data.targetDuration;
+    if (offset === 0) {
+      return [null, 0];
+    }
+    const absOffset = Math.abs(offset);
+    return [`${offset < 0 ? '-' : '+'}${formatDuration(absOffset, absOffset > 2 * MILLIS_PER_MINUTE)}`, offset];
+  })();
+
   const matchDuration = useCallback(() => {
     updateEntry({ id: data.id, targetDuration: data.duration });
   }, [data.duration, data.id, updateEntry]);
@@ -74,7 +86,10 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
       icon: TbClockPin,
       onClick: matchDuration,
       disabled: isDurationMatching,
-      description: "Change group target duration to match it's contents",
+      description:
+        offset > 0
+          ? "Increase group target duration to match it's contents"
+          : "Decrease group target duration to match it's contents",
     },
     { type: 'divider' },
     {
@@ -120,22 +135,6 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
   const binderColours = data.colour && getAccessibleColour(data.colour);
   const isValidDrop = isDragging && over?.id && canDrop(over.data.current?.type, over.data.current?.parent);
 
-  const [planOffset, planOffsetLabel] = (() => {
-    if (data.targetDuration === null) {
-      return [null, null];
-    }
-
-    const offset = data.duration - data.targetDuration;
-    if (offset === 0) {
-      return [null, 'under'];
-    }
-    const absOffset = Math.abs(offset);
-    return [
-      `${offset < 0 ? '-' : '+'}${formatDuration(absOffset, absOffset > 2 * MILLIS_PER_MINUTE)}`,
-      getOffsetState(offset),
-    ];
-  })();
-
   const dragStyle = {
     zIndex: isDragging ? 2 : 'inherit',
     transform: CSS.Translate.toString(transform),
@@ -191,19 +190,13 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
             <div>{formatTime(data.timeEnd)}</div>
           </div>
           <div className={style.metaEntry}>
-            <div className={style.metaLabel}>Duration</div>
+            <div className={style.metaLabel}>
-            <div className={style.duration}>
+              Duration
-              {planOffset === null ? (
+              {data.targetDuration !== null && <TbTargetArrow className={style.lockIcon} />}
-                formatDuration(data.duration)
+            </div>
-              ) : (
+            <div className={cx([style.duration, planOffset && style.warning])}>
-                <span className={cx([planOffsetLabel && style[planOffsetLabel]])}>
+              <span className={style.strike}>{formatDuration(data.duration)}</span>
-                  <span className={style.strike}>{formatDuration(data.duration)}</span>
+              {planOffset && <Tag className={style.offsetLabel}>{planOffset}</Tag>}
-                  <Tag className={style.offsetLabel}>{planOffset}</Tag>
-                </span>
-              )}
-              {data.targetDuration !== null && (
-                <TbTargetArrow className={cx([style.lockIcon, isDurationMatching ? style.active : style.inactive])} />
-              )}
             </div>
           </div>
         </div>