wip: split background on VO

Author: olzzon

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

@@ -38,17 +38,13 @@ $letter-spacing: 0.02em;
 	}
 
 	.live-speak {
-		fill: url(#background-gradient);
-	}
+		--vt-color-light: color-mix(in srgb, var(--segment-layer-background-#{'vt'}) 90%, white);
+		--camera-color-light: color-mix(in srgb, var(--segment-layer-background-#{'camera'}) 90%, white);
 
-	// Gradient styles for live-speak
-	#background-gradient {
-		.stop1 {
-			stop-color: #954c4c;
-		}
-		.stop2 {
-			stop-color: #4c954c;
-		}
+		background-image: linear-gradient(to bottom, var(--vt-color-light) 50%, var(--camera-color-light) 50%);
+		display: flex;
+		justify-content: center;
+		align-items: center;
 	}
 
 	// Split view specific styles

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

@@ -1,35 +1,12 @@
 export function RemoteSpeakInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
 	return (
-		<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
+		<div className="clock-view-piece-icon">
 			<rect width="126.5" height="89" className="remote-speak" />
 			<linearGradient id="background-gradient" gradientTransform="rotate(90)">
 				<stop className="stop1" offset={0.5} />
 				<stop className="stop2" offset={0.5} />
 			</linearGradient>
-			<text
-				x="5"
-				y="66.514"
-				textLength="116.5"
-				style={{
-					fill: '#ffffff',
-					fontFamily: 'open-sans',
-					fontSize: '40px',
-					letterSpacing: '0px',
-					lineHeight: '1.25',
-					wordSpacing: '0px',
-					textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
-				}}
-				xmlSpace="preserve"
-			>
-				<tspan
-					x="5"
-					y="66.514"
-					style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '62px', fontWeight: 100 }}
-					className="label"
-				>
-					{abbreviation !== undefined ? abbreviation : 'RSK'}
-				</tspan>
-			</text>
-		</svg>
+			<span className="remote-speak">{abbreviation !== undefined ? abbreviation : 'RSK'}</span>
+		</div>
 	)
 }

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

@@ -21,7 +21,7 @@ export default class SplitInputIcon extends React.Component<{
 				return (
 					<React.Fragment>
 						{label && label[1] ? label[1].substr(0, 1).toUpperCase() + ' ' : ''}
-						<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>{label ? label[2] : ''}</tspan>
+						<span className="camera">{label ? label[2] : ''}</span>
 					</React.Fragment>
 				)
 			} else {
@@ -53,35 +53,16 @@ export default class SplitInputIcon extends React.Component<{
 
 	render(): JSX.Element {
 		return (
-			<svg
-				className="clock-view-piece-icon"
-				version="1.1"
-				viewBox="0 0 126.5 89"
-				xmlns="http://www.w3.org/2000/svg"
-				preserveAspectRatio="none"
-			>
+			<div className="clock-view-piece-icon">
 				<rect width="126.5" height="44.5" className={classNames('upper', this.getLeftSourceType(this.props.piece))} />
 				<rect
 					width="126.5"
 					height="44.5"
 					y="44.5"
 					className={classNames('lower', this.getRightSourceType(this.props.piece))}
 				/>
-				{!this.props.hideLabel && (
-					<text
-						x="63.25"
-						y="71.513954"
-						textAnchor="middle"
-						textLength="126.5"
-						className="piece-icon-text"
-						xmlSpace="preserve"
-					>
-						<tspan lengthAdjust="spacing" className="label">
-							{this.getCameraLabel(this.props.piece)}
-						</tspan>
-					</text>
-				)}
-			</svg>
+				{!this.props.hideLabel && <span className="piece-icon-text">{this.getCameraLabel(this.props.piece)}</span>}
+			</div>
 		)
 	}
 }