feat: implement Layer colors in group selectors

Author: olzzon

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

@@ -1,3 +1,4 @@
+@import '../styles/itemTypeColors';
 @import '_colorScheme';
 @import '_variables';
 
@@ -121,7 +122,11 @@
 				margin-top: 0.5em;
 				margin-bottom: 0.5em;
 
+				
+				
 				> .propertiespanel-pop-up__groupselector__button {
+					@include item-type-colors();
+
 					width: 50px;
 					height: 30px;
 					border: 0px;
@@ -132,6 +137,8 @@
 				}
 
 				> .propertiespanel-pop-up__groupselector__button-active {
+					@include item-type-colors();
+
 					width: 50px;
 					height: 30px;
 					border: 0px;
@@ -141,39 +148,6 @@
 					opacity: 1;
 				}
 
-				> .propertiespanel-pop-up__groupselector__button-svg {
-					width: 50px;
-					height: 30px;
-					border: 0;
-					margin: 3px;
-					color: #ddd;
-					padding: 0;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					opacity: 0.2; // default state
-				
-					&-active {
-					@extend .propertiespanel-pop-up__groupselector__button-svg;
-					opacity: 1;
-					}
-				
-					> .svg-icon {
-					width: 100%;
-					height: 100%;
-					margin-top: -1px;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					
-					svg {
-						width: 100%;
-						height: 100%;
-						display: block;
-					}
-					}
-				}
-
 			}
 
 			> .propertiespanel-pop-up__action {

packages/webui/src/client/ui/UserEditOperations/PropertiesPanel.tsx

@@ -27,13 +27,15 @@ import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
 import { DBPart } from '@sofie-automation/corelib/dist/dataModel/Part'
 import { RundownId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { SchemaFormInPlace } from '../../lib/forms/SchemaFormInPlace'
+import { RundownUtils } from '../../lib/rundown'
 
 interface PendingChange {
 	operationId: string
 	userEditingType: UserEditingType
 	sourceLayerType?: SourceLayerType
 	value?: Record<string, any>
 	switchState?: boolean
+	cssTypeClass?: string
 }
 
 export function PropertiesPanel(): JSX.Element {
@@ -449,12 +451,12 @@ function EditingTypeChangeSourceLayerSource(props: {
 				{Object.values<UserEditingSourceLayer>(groups).map((group, index) => {
 					return (
 						<button
-							className={
+							className={classNames(
+								RundownUtils.getSourceLayerClassName(group.sourceLayerType),
 								selectedSourceGroup !== group.sourceLayerType
 									? `propertiespanel-pop-up__groupselector__button`
 									: `propertiespanel-pop-up__groupselector__button-active`
-							}
-							style={{ backgroundColor: 'blue' }}
+							)}
 							key={index}
 							onClick={() => {
 								setSelectedSourceButton(group.sourceLayerType)
@@ -474,18 +476,6 @@ function EditingTypeChangeSourceLayerSource(props: {
 						translationNamespaces={props.userEditOperation.translationNamespaces}
 					/>
 					<br />
-					{/* <select
-						title="Sources in the selected group"
-						className="propertiespanel-pop-up__select"
-						value={selectedSource[selectedGroup] || ''}
-						onChange={handleSourceChange}
-					>
-						{sourceList.enum.map((source, index) => (
-							<option key={index} value={source}>
-								{sourceList.tsEnumNames[index]}
-							</option>
-						))}
-					</select> */}
 					<hr />
 				</div>
 			)}