wip: properties panel selection glow on segment header

Author: olzzon

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

@@ -1,18 +1,18 @@
 @import '_variables';
 
+$glow-color: rgba(255, 255, 255, 0.58);
+
 .element-selected {
-    // Base glow
-    box-shadow: inset 0 0 15px var(--primary-color, #ffffff7a);
-    // Changed animation name from 'blinker' to 'glow' to better reflect its purpose
-    animation: glow 1s ease-in-out infinite;
+    box-shadow: inset 0 0 15px $glow-color;
+    animation: subtle-glow 1s ease-in-out infinite;
 
-    @keyframes glow {
+    @keyframes subtle-glow {
         0%, 100% {
-            box-shadow: inset 0 0 15px var(--primary-color, #ffffff7b);
+            box-shadow: inset 0 0 15px $glow-color;
         }
         50% {
-            box-shadow: inset 0 0 20px var(--primary-color, #ffffff84),
-                        inset 0 0 30px var(--primary-light-color, #ffffff86);
+            box-shadow: inset 0 0 25px $glow-color,
+                        inset 0 0 35px $glow-color;
         }
     }
 }

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

@@ -57,6 +57,7 @@ import { logger } from '../../lib/logging'
 import * as RundownResolver from '../../lib/RundownResolver'
 import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
 import { SelectedElementsContext } from '../RundownView/SelectedElementsContext'
+import classNames from 'classnames'
 
 interface IProps {
 	id: string
@@ -1051,17 +1052,20 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 				aria-roledescription={t('segment')}
 				aria-labelledby={`segment-name-${this.props.segment._id}`}
 			>
-				<ContextMenuTrigger
-					id="segment-timeline-context-menu"
-					collect={this.getSegmentContext}
-					attributes={{
-						className: 'segment-timeline__title',
-					}}
-					holdToDisplay={contextMenuHoldToDisplayTime()}
-					renderTag="div"
-				>
-					<SelectedElementsContext.Consumer>
-						{(selectElementContext) => (
+				<SelectedElementsContext.Consumer>
+					{(selectElementContext) => (
+						<ContextMenuTrigger
+							id="segment-timeline-context-menu"
+							collect={this.getSegmentContext}
+							attributes={{
+								className: classNames(
+									'segment-timeline__title',
+									selectElementContext.isSelected(this.props.segment._id) ? 'element-selected' : ''
+								),
+							}}
+							holdToDisplay={contextMenuHoldToDisplayTime()}
+							renderTag="div"
+						>
 							<div
 								onDoubleClick={() => {
 									if (this.props.studio.settings.enableUserEdits) {
@@ -1076,8 +1080,7 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 								<h2
 									id={`segment-name-${this.props.segment._id}`}
 									className={ClassNames(
-										'segment-timeline__title__label' + (this.props.segment.identifier ? ' identifier' : ''),
-										selectElementContext.isSelected(this.props.segment._id) ? 'element-selected' : ''
+										'segment-timeline__title__label' + (this.props.segment.identifier ? ' identifier' : '')
 									)}
 									data-identifier={this.props.segment.identifier}
 								>
@@ -1128,9 +1131,9 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 								)}
 								<HeaderEditStates userEditOperations={this.props.segment.userEditOperations} />
 							</div>
-						)}
-					</SelectedElementsContext.Consumer>
-				</ContextMenuTrigger>
+						</ContextMenuTrigger>
+					)}
+				</SelectedElementsContext.Consumer>
 				<div className="segment-timeline__duration" tabIndex={0}>
 					{this.props.playlist &&
 						this.props.parts &&