wip: diffirentiate css between pieceIcons and ClockView Piece icons

Author: olzzon

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

@@ -103,6 +103,7 @@ input {
 @import '../ui/SegmentList/LinePartSecondaryPiece/LinePartSecondaryPiece.scss';
 @import '../ui/PieceIcons/IconColors.scss';
 @import '../ui/PieceIcons/PieceIcons';
+@import '../ui/ClockView/ClockViewPieceIcons/ClockViewPieceIcons';
 @import '../ui/ClockView/CameraScreen/CameraScreen.scss';
 @import '../ui/RundownView/MediaStatusPopUp/MediaStatusPopUpItem.scss';
 @import '../ui/RundownView/MediaStatusPopUp/MediaStatusPopUp.scss';

packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewIconColors.scss

@@ -5,63 +5,63 @@ $text-shadow: 0 2px 9px rgba(0, 0, 0, 0.5);
 $letter-spacing: 0.02em;
 
 @mixin layer-type-backgrounds {
-  @each $layer-type in $layer-types {
-    &.#{$layer-type} {
-      // Background:
-      display: inline-block;
-      width: 207px;
-      height: 126px;
-      line-height: 126px;
+	@each $layer-type in $layer-types {
+		&.#{$layer-type} {
+			// Background:
+			display: inline-block;
+			width: 207px;
+			height: 126px;
+			line-height: 126px;
 
-      background-color: var(--segment-layer-background-#{$layer-type});
-      
-      &.second {
-        background-color: var(--segment-layer-background-#{$layer-type}--second);
-      }
-    }
-  }
+			background-color: var(--segment-layer-background-#{$layer-type});
+
+			&.second {
+				background-color: var(--segment-layer-background-#{$layer-type}--second);
+			}
+		}
+	}
 }
 
 // Base icon styles
-.piece-icon {
-    // Text styles:
-    fill: $text-color;
-    font-family: Roboto Flex;
-    filter: drop-shadow($text-shadow);
-    font-size: $font-size-base;
-    font-weight: 300;
-    letter-spacing: $letter-spacing;
+.clock-view-piece-icon {
+	// Text styles:
+	fill: $text-color;
+	font-family: Roboto Flex;
+	filter: drop-shadow($text-shadow);
+	font-size: $font-size-base;
+	font-weight: 300;
+	letter-spacing: $letter-spacing;
 
-  span {
-    // Common styles
-    @include layer-type-backgrounds; // Apply to all span elements that have layer type classes
-  }
+	span {
+		// Common styles
+		@include layer-type-backgrounds; // Apply to all span elements that have layer type classes
+	}
 
-  .live-speak {
-    fill: url(#background-gradient);
-  }
+	.live-speak {
+		fill: url(#background-gradient);
+	}
 
-  // Gradient styles for live-speak
-  #background-gradient {
-    .stop1 {
-      stop-color: #954c4c;
-    }
-    .stop2 {
-      stop-color: #4c954c;
-    }
-  }
+	// Gradient styles for live-speak
+	#background-gradient {
+		.stop1 {
+			stop-color: #954c4c;
+		}
+		.stop2 {
+			stop-color: #4c954c;
+		}
+	}
 
-  // Split view specific styles
-  .upper, .lower {
-    
-    &.camera {
-      @include item-type-colors-svg();
-    }
-    &.remote {
-      @include item-type-colors-svg();
-    }
-    &.remote.second {
-      @include item-type-colors-svg();
-    }
-  }
-}
+	// Split view specific styles
+	.upper,
+	.lower {
+		&.camera {
+			@include item-type-colors-svg();
+		}
+		&.remote {
+			@include item-type-colors-svg();
+		}
+		&.remote.second {
+			@include item-type-colors-svg();
+		}
+	}
+}

packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewPieceIcons.scss

@@ -7,7 +7,7 @@ export function CamInputIcon({
 	abbreviation?: string
 }): JSX.Element {
 	return (
-		<div className="piece-icon">
+		<div className="clock-view-piece-icon">
 			<span className="camera">
 				{abbreviation !== undefined ? abbreviation : 'C'}
 				{inputIndex !== undefined ? inputIndex : ''}

packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewRenderers/CamInputIcon.tsx

@@ -1,6 +1,6 @@
 export function GraphicsInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
 	return (
-		<div className="piece-icon">
+		<div className="clock-view-piece-icon">
 			<span className="graphics">{abbreviation !== undefined ? abbreviation : 'G'}</span>
 		</div>
 	)

packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewRenderers/GraphicsInputIcon.tsx

@@ -1,6 +1,6 @@
 export function LiveSpeakInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
 	return (
-		<div className="piece-icon">
+		<div className="clock-view-piece-icon">
 			<span className="live-speak">{abbreviation !== undefined ? abbreviation : 'LSK'}</span>
 		</div>
 	)

packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewRenderers/LiveSpeakInputIcon.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 export function BaseRemoteInputIcon(props: Readonly<React.PropsWithChildren<{ className: string }>>): JSX.Element {
-	return <div className="piece-icon">{props.children}</div>
+	return <div className="clock-view-piece-icon">{props.children}</div>
 }
 
 export function RemoteInputIcon({
@@ -12,7 +12,7 @@ export function RemoteInputIcon({
 	abbreviation?: string
 }): JSX.Element {
 	return (
-		<BaseRemoteInputIcon className="piece-icon">
+		<BaseRemoteInputIcon className="clock-view-piece-icon">
 			<span className="remote">
 				{abbreviation !== undefined ? abbreviation : 'LIVE'}
 				{inputIndex ?? ''}

packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewRenderers/RemoteInputIcon.tsx

@@ -54,7 +54,7 @@ export default class SplitInputIcon extends React.Component<{
 	render(): JSX.Element {
 		return (
 			<svg
-				className="piece-icon"
+				className="clock-view-piece-icon"
 				version="1.1"
 				viewBox="0 0 126.5 89"
 				xmlns="http://www.w3.org/2000/svg"

packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewRenderers/SplitInputIcon.tsx

@@ -1,6 +1,6 @@
 export function UnknownInputIcon(): JSX.Element {
 	return (
-		<div className="piece-icon">
+		<div className="clock-view-piece-icon">
 			<span className="unknown">?</span>
 		</div>
 	)

packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewRenderers/UnknownInputIcon.tsx

@@ -1,6 +1,6 @@
 export function VTInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
 	return (
-		<div className="piece-icon">
+		<div className="clock-view-piece-icon">
 			<span className="vt">{abbreviation !== undefined ? abbreviation : 'VT'}</span>
 		</div>
 	)