rename

Author: Julusian

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

@@ -31,8 +31,8 @@ $general-timecode-color: var(--general-timecode-color);
 $part-identifier: var(--part-identifier);
 $part-identifier-text: var(--part-identifier-text);
 
-$segment-event-identifier: var(--segment-event-identifier);
-$segment-event-identifier-text: var(--segment-event-identifier-text);
+$segment-header-note-identifier: var(--segment-header-note-identifier);
+$segment-header-note-identifier-text: var(--segment-header-note-identifier-text);
 
 $ui-button-primary: var(--ui-button-primary);
 $ui-button-primary--hover: var(--ui-button-primary--hover);

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

@@ -32,8 +32,8 @@
 	--part-identifier: #363636;
 	--part-identifier-text: #eee;
 
-	--segment-event-identifier: #363636;
-	--segment-event-identifier-text: #fff;
+	--segment-header-note-identifier: #363636;
+	--segment-header-note-identifier-text: #fff;
 
 	--general-timecode-color: #ffff00;
 

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

@@ -605,7 +605,7 @@ svg.icon {
 				background-color: $part-identifier;
 				color: $part-identifier-text;
 				border-radius: 99px;
-				font-family: "Roboto Flex", "Roboto", sans-serif;
+				font-family: 'Roboto Flex', 'Roboto', sans-serif;
 				font-style: normal;
 				font-size: 0.9rem;
 				letter-spacing: 0.03em;
@@ -635,17 +635,17 @@ svg.icon {
 				}
 			}
 		}
-		.segment-timeline__segment-event-identifier{
+		.segment-timeline__segment-header-note-identifier {
 			// The pill-shaped labels that appear in the segment header, showing extra information about the segment.
 			align-self: flex-start;
 			display: inline-block;
 			margin-top: auto;
 			margin: 0.25rem;
 			padding: 0.1rem 0.35rem 0.1rem 0.35rem;
-			background-color: $segment-event-identifier;
-			color: $segment-event-identifier-text;
+			background-color: $segment-header-note-identifier;
+			color: $segment-header-note-identifier-text;
 			border-radius: 99px;
-			font-family: "Roboto Flex", "Roboto", sans-serif;
+			font-family: 'Roboto Flex', 'Roboto', sans-serif;
 			font-style: normal;
 			font-size: 0.9rem;
 			letter-spacing: 0.03em;
@@ -1169,7 +1169,8 @@ svg.icon {
 		}
 		.segment-timeline__part {
 			.segment-timeline__part__invalid-cover {
-				background-image: repeating-linear-gradient(
+				background-image:
+					repeating-linear-gradient(
 						45deg,
 						var(--invalid-reason-color-transparent) 0%,
 						var(--invalid-reason-color-transparent) 4px,
@@ -1451,7 +1452,8 @@ svg.icon {
 						left: 2px;
 						right: 2px;
 						z-index: 3;
-						background: repeating-linear-gradient(
+						background:
+							repeating-linear-gradient(
 								45deg,
 								var(--invalid-reason-color-opaque) 0,
 								var(--invalid-reason-color-opaque) 5px,
@@ -1633,7 +1635,8 @@ svg.icon {
 				right: 1px;
 				z-index: 10;
 				pointer-events: all;
-				background-image: repeating-linear-gradient(
+				background-image:
+					repeating-linear-gradient(
 						45deg,
 						var(--invalid-reason-color-transparent) 0%,
 						var(--invalid-reason-color-transparent) 5px,
@@ -2565,7 +2568,7 @@ svg.icon {
 
 				background-color: $part-identifier;
 				color: $part-identifier-text;
-				font-family: "Roboto Flex", "Roboto", sans-serif;
+				font-family: 'Roboto Flex', 'Roboto', sans-serif;
 				font-style: normal;
 				font-size: 0.9rem;
 				letter-spacing: 0.03em;

packages/webui/src/client/ui/SegmentHeader/SegmentHeaderNotes.tsx

@@ -66,7 +66,7 @@ export function SegmentHeaderNotes({ classname, segmentId, onHeaderNoteClick }:
 			)}
 
 			{headerNotes.map((event, index) => (
-				<div key={index} className="segment-timeline__segment-event-identifier">
+				<div key={index} className="segment-timeline__segment-header-note-identifier">
 					{event.key}
 				</div>
 			))}