chore: Updated hover-pop typography, plus letter case on duration strings.

Author: hummelstrand

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUp.scss

@@ -12,6 +12,7 @@
 
 	&--large {
 		width: 482px;
+		padding-bottom: 10px;
 		--preview-max-dimension: 480;
 	}
 
@@ -28,20 +29,19 @@
 
 	font-style: normal;
 	font-weight: 500;
-	font-size: 15px;
+	font-size: 16px;
 	line-height: 110%;
 	/* identical to box height, or 15px */
-	letter-spacing: 0.01em;
+	letter-spacing: 0.02em;
 	font-feature-settings:
-		'tnum' on,
-		'lnum' off,
+		'tnum',
 		'liga' off;
 	color: #ffffff;
-	font-stretch: 25;
 	font-variation-settings:
 		'GRAD' 0,
 		'opsz' 15,
 		'slnt' 0,
+		'wdth' 30,
 		'XOPQ' 96,
 		'XTRA' 468,
 		'YOPQ' 79,
@@ -66,16 +66,15 @@
 		line-height: 120%;
 		letter-spacing: 0.03em;
 		font-feature-settings:
-			'tnum' on,
-			'lnum' off,
+			'tnum',
 			'liga' off;
 
 		color: #ffffff;
-		font-stretch: 75;
 		font-variation-settings:
 			'GRAD' 0,
 			'opsz' 16,
 			'slnt' -10,
+			'wdth' 75,
 			'XOPQ' 96,
 			'XTRA' 468,
 			'YOPQ' 79,
@@ -108,13 +107,13 @@
 		width: 100%;
 		display: flex;
 
-		margin-bottom: 5px;
+		margin-bottom: 7px;
 
 		.preview-popUp__element-with-time-info__layer-color {
-			height: 15px;
+			height: 13px;
 			aspect-ratio: 1;
 			margin-left: 2%;
-			margin-top: 10px;
+			margin-top: 7px;
 			flex-shrink: 0;
 			@include item-type-colors();
 		}
@@ -136,27 +135,27 @@
 			line-height: 100%; /* 15px */
 
 			.label {
-				font-weight: 300;
+				font-weight: 100;
 				line-height: 100%;
 				/* identical to box height, or 15px */
-				letter-spacing: 0.01em;
+				letter-spacing: 0.02em;
 				font-feature-settings:
-					'tnum' on,
-					'lnum' off,
+					'tnum',
 					'liga' off;
-				color: #ffffff;
+				color: #b2b2b2;
 				font-variation-settings:
 					'GRAD' 0,
+					'opsz' 30,
+					'slnt' 0,
+					'wdth' 25,
 					'XOPQ' 96,
 					'XTRA' 468,
 					'YOPQ' 79,
 					'YTAS' 750,
 					'YTDE' -203,
 					'YTFI' 738,
 					'YTLC' 548,
-					'YTUC' 712,
-					'opsz' 20,
-					'slnt' 0;
+					'YTUC' 712;
 			}
 		}
 	}
@@ -287,7 +286,27 @@
 	}
 
 	.preview-popUp__in-out-words {
-		letter-spacing: 0em;
+		font-weight: 300;
+		font-size: 16px;
+		line-height: 100%;
+		letter-spacing: 0.02em;
+		font-feature-settings:
+			'tnum',
+			'liga' off;
+		color: #ffffff;
+		font-variation-settings:
+			'GRAD' 0,
+			'opsz' 16,
+			'slnt' -10,
+			'wdth' 75,
+			'XOPQ' 96,
+			'XTRA' 468,
+			'YOPQ' 79,
+			'YTAS' 750,
+			'YTDE' -203,
+			'YTFI' 738,
+			'YTLC' 548,
+			'YTUC' 712;
 
 		width: 100%;
 		overflow: hidden;
@@ -302,7 +321,7 @@
 			width: 100%;
 			height: 1px;
 			background-color: #5b5b5b;
-			margin-bottom: 5px;
+			margin-bottom: 7px;
 		}
 
 		.in-words,

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUpContent.tsx

@@ -112,17 +112,17 @@ function getDurationText(
 function getLifeSpanText(t: TFunction, lifespan: PieceLifespan): string {
 	switch (lifespan) {
 		case PieceLifespan.WithinPart:
-			return t('Until next take')
+			return t('Until Next Take')
 		case PieceLifespan.OutOnSegmentChange:
-			return t('Until next segment')
+			return t('Until Next Segment')
 		case PieceLifespan.OutOnSegmentEnd:
-			return t('Until end of segment')
+			return t('Until End of Segment')
 		case PieceLifespan.OutOnRundownChange:
-			return t('Until next rundown')
+			return t('Until Next Rundown')
 		case PieceLifespan.OutOnRundownEnd:
-			return t('Until end of rundown')
+			return t('Until End of Rundown')
 		case PieceLifespan.OutOnShowStyleEnd:
-			return t('Until end of showstyle')
+			return t('Until End of Showstyle')
 		default:
 			return ''
 	}