SOFIE-261 | change alignment of t-timers in rundown screen

Author: anteeek

packages/webui/src/client/styles/rundownView.scss

@@ -275,6 +275,7 @@ body.no-overflow {
 		}
 
 		.timing__header__center {
+			position: relative;
 			display: flex;
 			justify-content: center;
 			align-items: center;
@@ -3585,25 +3586,29 @@ svg.icon {
 @import 'rundownOverview';
 
 .rundown-header .timing__header_t-timers {
+	position: absolute;
+	right: 100%;
+	top: 50%;
+	transform: translateY(-38%);
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
+	align-items: flex-end;
 	margin-right: 1em;
-	padding-left: 1em;
-	text-align: right;
-	align-self: center;
-	width: fit-content;
 
 	.timing__header_t-timers__timer {
 		display: flex;
 		gap: 0.5em;
 		justify-content: space-between;
 		align-items: baseline;
+		white-space: nowrap;
+		line-height: 1.3;
 
 		.timing__header_t-timers__timer__label {
 			font-size: 0.7em;
 			color: #b8b8b8;
 			text-transform: uppercase;
+			white-space: nowrap;
 		}
 
 		.timing__header_t-timers__timer__value {
@@ -3614,20 +3619,24 @@ svg.icon {
 				sans-serif;
 			font-variant-numeric: tabular-nums;
 			font-weight: 500;
-			color: $general-clock;
+			color: #fff;
 			font-size: 1.1em;
 		}
 
 		.timing__header_t-timers__timer__sign {
-			margin-right: 0.2em;
-			font-weight: 700;
+			display: inline-block;
+			width: 0.6em;
+			text-align: center;
+			font-weight: 500;
+			font-size: 0.9em;
 			color: #fff;
+			margin-right: 0.3em;
 		}
 
 		.timing__header_t-timers__timer__part {
-			color: white;
+			color: #fff;
 			&.timing__header_t-timers__timer__part--dimmed {
-				color: #888; // Dimmed color for "00"
+				color: #888;
 				font-weight: 400;
 			}
 		}

packages/webui/src/client/ui/RundownView/RundownHeader/RundownHeaderTimers.tsx

@@ -11,30 +11,6 @@ interface IProps {
 export const RundownHeaderTimers: React.FC<IProps> = ({ tTimers }) => {
 	useTiming()
 
-	// TODO: Remove this mock data once verified
-	const mockTimers = React.useMemo<[RundownTTimer, RundownTTimer, RundownTTimer]>(() => {
-		const now = Date.now()
-		return [
-			{
-				index: 1,
-				label: 'Timer 1',
-				mode: { type: 'freeRun', startTime: now - 60000 },
-			},
-			{
-				index: 2,
-				label: 'Timer 2',
-				mode: { type: 'countdown', startTime: now, duration: 300000, pauseTime: null, stopAtZero: false },
-			},
-			{
-				index: 3,
-				label: 'Timer 3',
-				mode: { type: 'countdown', startTime: now - 10000, duration: 5000, pauseTime: null, stopAtZero: true },
-			},
-		]
-	}, [])
-
-	tTimers = mockTimers
-
 	const hasActiveTimers = tTimers.some((t) => t.mode)
 
 	if (!hasActiveTimers) return null

packages/webui/src/client/ui/RundownView/RundownHeader/TimingDisplay.tsx

@@ -51,9 +51,9 @@ export function TimingDisplay({
 			<div className="timing__header__left">
 				<PlaylistStartTiming rundownPlaylist={rundownPlaylist} hideDiff={true} />
 				<RundownName rundownPlaylist={rundownPlaylist} currentRundown={currentRundown} rundownCount={rundownCount} />
-				<RundownHeaderTimers tTimers={rundownPlaylist.tTimers} />
 			</div>
 			<div className="timing__header__center">
+				<RundownHeaderTimers tTimers={rundownPlaylist.tTimers} />
 				<TimeOfDay />
 			</div>
 			<div className="timing__header__right">