fix: live speak and remote speak align split to base of font

Author: olzzon

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

@@ -6,6 +6,18 @@ $font-size-base: 19.5em;
 $text-shadow: 0 2px 9px rgba(0, 0, 0, 0.5);
 $letter-spacing: 0.03em;
 
+$background-live-speak: linear-gradient(
+	to bottom,
+	$segment-layer-background-live-speak-1 74%,
+	$segment-layer-background-live-speak-2 74%
+);
+
+$background-remote-speak: linear-gradient(
+	to bottom,
+	$segment-layer-background-remote-speak-1 74%,
+	$segment-layer-background-remote-speak-2 74%
+);
+
 @mixin layer-type-backgrounds {
 	@each $layer-type in $layer-types {
 		&.#{$layer-type} {
@@ -81,15 +93,19 @@ $letter-spacing: 0.03em;
 	}
 
 	.live-speak {
-		--vt-color-light: #954c4c; 
-		--camera-color-light:  #4c954c;
-
-		background-image: linear-gradient(to bottom, var(--vt-color-light) 50%, var(--camera-color-light) 50%);
+		background-image: $background-live-speak;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 	}
 
+	.remote-speak {
+			background-image: $background-remote-speak;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+	}
+
 	// Split view container and layers
 	.split-view {
 		position: absolute;

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

@@ -1,11 +1,6 @@
 export function RemoteSpeakInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
 	return (
 		<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>
 			<span className="remote-speak">{abbreviation !== undefined ? abbreviation : 'RSK'}</span>
 		</div>
 	)