wip: finish rundown list page

Author: Julusian

packages/webui/src/client/styles/bootstrap-customise.scss

@@ -7,3 +7,5 @@ $body-tertiary-bg-dark: #343434;
 $font-weight-base: 300; // lighter
 
 $navbar-brand-font-size: 1rem;
+
+$line-height-base: 1.2;

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

@@ -10,15 +10,32 @@ input {
 
 @use 'fonts';
 
-// @import 'colorScheme';
-// @import '_variables';
-// @import '_colorScheme';
-
 @use 'defaultColors';
 @use 'itemTypeColors';
 
 @use 'bootstrap';
 
+ul {
+	margin: 20px;
+	padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: 300;
+}
+h1 {
+	font-size: 3rem;
+}
+
+@import 'colorScheme';
+@import '_variables';
+@import '_colorScheme';
+
 @import '_header';
 
 // @import 'afterBroadcastForm';
@@ -37,11 +54,11 @@ input {
 // @import 'overflowingContainer';
 // @import 'pieceStatusIcon';
 // @import 'prompter';
-// @import 'rundownList';
+@import 'rundownList';
 // @import 'rundownSystemStatus';
 // @import 'settings';
 // @import 'splitDropdown';
-// @import 'statusbar';
+@import 'statusbar';
 // @import 'statusNotification';
 // @import 'studioScreenSaver';
 // @import 'supportAndSwitchboardPanel';
@@ -149,10 +166,10 @@ input {
 // 	// position: relative;
 // 	// z-index: 500;
 // }
-// .header-clear {
-// 	padding-top: 4rem;
-// 	padding-right: $statusbar-width;
-// }
+.header-clear {
+	padding-top: 4rem;
+	padding-right: $statusbar-width;
+}
 
 // #render-target {
 // 	font-weight: 300;

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

@@ -1,4 +1,3 @@
-
 // Root playlist/rundown list, see RundownList.tsx
 .rundown-list {
 	--defaultSpacing: 20px;
@@ -77,6 +76,7 @@
 		}
 
 		.rundown-name {
+			font-weight: bold;
 			> a > svg {
 				margin-right: 0;
 			}
@@ -375,6 +375,20 @@
 			display: flex;
 		}
 	}
+
+	.rundown-progress-bar {
+		height: 2px;
+		position: relative;
+		transition: height 0.25s;
+	}
+
+	.rundown-progress-bar-indicator {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		background: linear-gradient(90deg, #1769ff, #3593ff);
+	}
 }
 
 .create-testing-rundown {

packages/webui/src/client/ui/Header.tsx

@@ -127,7 +127,7 @@ class Header extends React.Component<Translated<IPropsHeader & ITrackedPropsHead
 						<SupportPopUpToggle onClick={this.onToggleSupportPanel} isOpen={this.state.isSupportPanelOpen} />
 					</div>
 				</ErrorBoundary>
-				<Navbar data-bs-theme="dark" fixed="top" expand="lg" className="bg-body-tertiary">
+				<Navbar data-bs-theme="dark" fixed="top" expand className="bg-body-tertiary">
 					<Container fluid>
 						<Navbar.Brand>
 							<Link className="badge-sofie" to="/">

packages/webui/src/client/ui/RundownList.tsx

@@ -144,12 +144,12 @@ export function RundownList(): JSX.Element {
 
 			{showGettingStarted === true ? <GettingStarted step={step} /> : null}
 
-			<section className="mtl gutter has-statusbar">
-				<header className="mvs">
+			<section className="mt-5 mx-5 has-statusbar">
+				<header className="my-2">
 					<h1>{t('Rundowns')}</h1>
 				</header>
 				{subsReady ? (
-					<section className="mod mvl rundown-list" role="treegrid">
+					<section className="my-5 rundown-list" role="treegrid">
 						<header className="rundown-list__header">
 							<span className="rundown-list-item__name" role="columnheader">
 								<Tooltip

packages/webui/src/client/ui/RundownList/ActiveProgressBar.tsx

@@ -13,8 +13,8 @@ export function ActiveProgressBar({
 		const progress = Math.min(((currentTime - startedPlayback) / expectedDuration) * 100, 100)
 
 		return (
-			<div className="progress-bar">
-				<div className="pb-indicator" style={{ width: `${progress}%` }} />
+			<div className="rundown-progress-bar">
+				<div className="rundown-progress-bar-indicator" style={{ width: `${progress}%` }} />
 			</div>
 		)
 	}

packages/webui/src/client/ui/RundownList/CreateAdlibTestingRundownPanel.tsx

@@ -42,7 +42,7 @@ export const CreateAdlibTestingRundownPanel = memo(function CreateAdlibTestingRu
 	if (options.length === 0) return null
 
 	return (
-		<div className="mtl gutter create-testing-rundown">
+		<div className="mt-5 mx-5 create-testing-rundown">
 			<h2>{t('Create Adlib Testing Rundown')}</h2>
 			<p>
 				{options.map((option) => (

packages/webui/src/client/ui/RundownList/RundownListFooter.tsx

@@ -44,14 +44,14 @@ export function RundownListFooter(): JSX.Element {
 	const versionExtended = APP_VERSION_EXTENDED || version
 
 	return (
-		<div className="mtl gutter version-info">
+		<div className="mt-5 mx-5 version-info">
 			<p>
 				{t('Sofie Automation')} {t('version')}:&nbsp;
 				<Tooltip overlay={versionExtended} placement="top" mouseEnterDelay={TOOLTIP_DEFAULT_DELAY}>
 					<span>{version}</span>
 				</Tooltip>
 			</p>
-			<div className="mod">
+			<div>
 				{systemStatus ? (
 					<>
 						<div>

packages/webui/src/client/ui/RundownList/RundownListItemView.tsx

@@ -97,7 +97,7 @@ export default React.memo(function RundownListItemView({
 							</Tooltip>
 						</span>
 					) : null}
-					<b className="rundown-name">{rundownNameContent}</b>
+					<span className="rundown-name">{rundownNameContent}</span>
 					{rundown.description ? (
 						<Tooltip overlay={rundown.description} trigger={['hover']} placement="right">
 							<span className="rundown-list-description__icon">