Logged-in Performance Profiler: Fix UI issues with status badges and …

…performance score ring (#94880) * Fixed status badge positioning and alignment. * Fix text color in performance score ring. Also update the code to pull color variables from the color-studio package to make future maintenance easier. * Fix sizing of text in performance score ring. * Increase the size of the performance score ring when the tab is selected on mobile.
Automattic · Sep 25, 2024 · 259e53d · 259e53d
1 parent 1d8d7e8
commit 259e53d
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 19 deletions.
diff --git a/.../hosting/performance/components/circular-performance-score/circular-performance-score.tsx b/.../hosting/performance/components/circular-performance-score/circular-performance-score.tsx
@@ -29,7 +29,13 @@ export const CircularPerformanceScore = ( {
 				numberOfSteps={ steps }
 				showProgressText={ false }
 			/>
-			<div className="circular-performance-score">{ score }</div>
+			<div
+				className={ `circular-performance-score ${
+					size > 48 && 'circular-performance-score--large'
+				} ` }
+			>
+				{ score }
+			</div>
 		</div>
 	);
 };
diff --git a/client/hosting/performance/components/circular-performance-score/style.scss b/client/hosting/performance/components/circular-performance-score/style.scss
@@ -1,27 +1,26 @@
+@import "@automattic/color-studio/dist/color-variables";
 @import "@automattic/components/src/styles/typography";
 
 .circular-performance-bar {
 	position: relative;
 	display: inline-block;
+	color: $studio-black;
 
 	&.good {
-		color: #00ba37;
 		.circular__progress-bar .circular__progress-bar-fill-circle {
-			stroke: #00ba37;
+			stroke: $studio-green-30;
 		}
 	}
 
 	&.needs-improvement {
-		color: #d67709;
 		.circular__progress-bar .circular__progress-bar-fill-circle {
-			stroke: #d67709;
+			stroke: $studio-orange-40;
 		}
 	}
 
 	&.poor {
-		color: #d63638;
 		.circular__progress-bar .circular__progress-bar-fill-circle {
-			stroke: #d63638;
+			stroke: $studio-red-50;
 		}
 	}
 }
@@ -34,5 +33,9 @@
 	font-family: $font-sf-pro-display;
 	font-size: $font-size-header-small;
 	font-weight: 400;
+
+	&--large {
+		font-size: 1.75rem;
+	}
 }
 
diff --git a/...erformance-profiler/components/core-web-vitals-accordion/core-web-vitals-accordion-v2.tsx b/...erformance-profiler/components/core-web-vitals-accordion/core-web-vitals-accordion-v2.tsx
@@ -20,10 +20,11 @@ type HeaderProps = {
 	displayName: string;
 	metricKey: Metrics;
 	metricValue: number;
+	isActive?: boolean;
 };
 
 const CardHeader = ( props: HeaderProps ) => {
-	const { displayName, metricKey, metricValue } = props;
+	const { displayName, metricKey, metricValue, isActive } = props;
 	const status = mapThresholdsToStatus( metricKey, metricValue );
 	const isPerformanceScoreSelected = metricKey === 'overall';
 
@@ -35,7 +36,7 @@ const CardHeader = ( props: HeaderProps ) => {
 
 				{ isPerformanceScoreSelected ? (
 					<div className="metric-tab-bar-v2__tab-metric" style={ { marginTop: '6px' } }>
-						<CircularPerformanceScore score={ metricValue } size={ 48 } />
+						<CircularPerformanceScore score={ metricValue } size={ isActive ? 72 : 48 } />
 					</div>
 				) : (
 					<span
@@ -91,6 +92,7 @@ export const CoreWebVitalsAccordionV2 = ( props: Props ) => {
 								displayName={ displayName }
 								metricKey={ key as Metrics }
 								metricValue={ props[ key as Metrics ] }
+								isActive={ key === activeTab }
 							/>
 						}
 						hideSummary

diff --git a/...nt/performance-profiler/components/core-web-vitals-display/core-web-vitals-details_v2.tsx b/...nt/performance-profiler/components/core-web-vitals-display/core-web-vitals-details_v2.tsx
@@ -129,7 +129,7 @@ export const CoreWebVitalsDetailsV2: React.FC< CoreWebVitalsDetailsProps > = ( {
 											marginTop: '16px',
 										} }
 									>
-										<CircularPerformanceScore score={ value } size={ 76 } />
+										<CircularPerformanceScore score={ value } size={ 72 } />
 									</div>
 								) : (
 									displayValue( activeTab as Metrics, value )

diff --git a/client/performance-profiler/components/core-web-vitals-display/style.scss b/client/performance-profiler/components/core-web-vitals-display/style.scss
@@ -178,7 +178,7 @@ $blueberry-color: #3858e9;
 	display: flex;
 	gap: 24px;
 
-	@media (max-width: $break-mobile) {
+	@media (max-width: $break-large) {
 		flex-direction: column;
 		gap: 0;
 	}

diff --git a/client/performance-profiler/components/status-section/style.scss b/client/performance-profiler/components/status-section/style.scss
@@ -6,10 +6,9 @@
 	color: #000;
 	display: flex;
 	flex-direction: column;
-	align-items: center;
+	align-items: flex-end;
 	gap: 12px;
 
-
 	.status-badge {
 		display: flex;
 		padding: 2px 10px;
@@ -19,11 +18,6 @@
 		border-radius: 4px;
 		font-weight: 500;
 		flex-shrink: 0;
-		width: 100%;
-
-		@media (max-width: $break-mobile) {
-			width: unset;
-		}
 
 		&.poor {
 			background: var(--studio-red-5);
@@ -47,8 +41,10 @@
 		}
 	}
 
-	@media (max-width: $break-mobile) {
+	@media (max-width: $break-large) {
 		flex-direction: row;
+		width: 100%;
+		align-items: center;
 		margin-bottom: 24px;
 	}
 }