wip: backgrounds, headers, media popup

Author: Mint de Wit

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

@@ -16,7 +16,6 @@ h4,
 h5,
 h6 {
 	font-weight: 300;
-	color: var(--bs-body-color);
 }
 
 h1,
@@ -145,6 +144,7 @@ header {
 	h3,
 	h4 {
 		margin: 0;
+		color: var(--bs-body-color);
 	}
 
 	&:hover,

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

@@ -27,7 +27,7 @@ input {
 @import 'afterBroadcastForm';
 // @import 'collapseJSON';
 @import 'colorPicker';
-// @import 'contextMenu';
+@import 'contextMenu';
 @import 'datePicker';
 // @import 'editAttribute';
 @import 'externalMessagesStatus';

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

@@ -164,6 +164,10 @@ $break-width: 35rem;
 			transition: 0s padding-right 1s;
 		}
 	}
+
+	.dark {
+		background: #343434;
+	}
 }
 
 body.vertical-overflow-only {

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

@@ -49,6 +49,10 @@
 			transition: 0.2s color;
 			color: #777;
 		}
+
+		&.dark {
+			background: #343434;
+		}
 	}
 
 	&.moving {

packages/webui/src/client/ui/RundownView/MediaStatusPopUp/MediaStatusPopUpHeader.scss

@@ -16,7 +16,9 @@
 		padding: 0;
 		text-align: center;
 		min-width: 1.5em;
-		
+		color: #141517;
+		font-weight: 500;
+
 		> svg {
 			vertical-align: top;
 			margin-top: 0.4em;
@@ -63,7 +65,7 @@
 			border-bottom: 1px solid #d7d7d7;
 			border-top: 1px solid #d7d7d7;
 		}
-	}	
+	}
 
 	.media-status-item__label {
 		&::after {
@@ -78,7 +80,7 @@
 		width: 12em;
 		border: none;
 		border-radius: 1em;
-		background: #F5F5F5;
+		background: #f5f5f5;
 		font-weight: 400;
 		padding: 0.1em 0.5em;
 		margin: 0;

packages/webui/src/client/ui/RundownView/MediaStatusPopUp/MediaStatusPopUpItem.scss

@@ -30,7 +30,7 @@
 
 	&:first-child {
 		> td {
-			padding-top: 3px;	
+			padding-top: 3px;
 		}
 
 		> .media-status-popup-item__countdown {
@@ -112,6 +112,19 @@
 			min-width: 2em;
 			text-align: center;
 		}
+
+		.media-status-popup-item__segment-identifier {
+			display: inline-block;
+			background: #095709;
+			border: none;
+			border-radius: 3px;
+			padding: 0 0.25em;
+			color: #fff;
+			font-weight: 300;
+			font-size: 0.9em;
+			min-width: 2em;
+			text-align: center;
+		}
 	}
 
 	.media-status-popup-item__label {

packages/webui/src/client/ui/Settings/SystemManagement.tsx

@@ -212,7 +212,7 @@ function SystemManagementEvaluationsMessage({ coreSystem }: Readonly<WithCoreSys
 					label={t('Enabled')}
 					item={wrappedItem}
 					// @ts-expect-error deep property
-					itemKey={'evaluations.enabled'}
+					itemKey={'evaluationsMessage.enabled'}
 					overrideHelper={overrideHelper}
 				>
 					{(value, handleUpdate) => <CheckboxControl value={!!value} handleUpdate={handleUpdate} />}
@@ -222,7 +222,7 @@ function SystemManagementEvaluationsMessage({ coreSystem }: Readonly<WithCoreSys
 					label={t('Heading')}
 					item={wrappedItem}
 					// @ts-expect-error deep property
-					itemKey={'evaluations.heading'}
+					itemKey={'evaluationsMessage.heading'}
 					overrideHelper={overrideHelper}
 				>
 					{(value, handleUpdate) => (
@@ -239,7 +239,7 @@ function SystemManagementEvaluationsMessage({ coreSystem }: Readonly<WithCoreSys
 					label={t('Message')}
 					item={wrappedItem}
 					// @ts-expect-error deep property
-					itemKey={'evaluations.message'}
+					itemKey={'evaluationsMessage.message'}
 					overrideHelper={overrideHelper}
 					hint={t('Message shown to users in the Evaluations form')}
 				>