From 259e53dc23a4a14f83a06ee14faebc88bf54c76f Mon Sep 17 00:00:00 2001 From: Matt West Date: Wed, 25 Sep 2024 19:00:16 +0100 Subject: [PATCH] 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. --- .../circular-performance-score.tsx | 8 +++++++- .../circular-performance-score/style.scss | 15 +++++++++------ .../core-web-vitals-accordion-v2.tsx | 6 ++++-- .../core-web-vitals-details_v2.tsx | 2 +- .../components/core-web-vitals-display/style.scss | 2 +- .../components/status-section/style.scss | 12 ++++-------- 6 files changed, 26 insertions(+), 19 deletions(-) diff --git a/client/hosting/performance/components/circular-performance-score/circular-performance-score.tsx b/client/hosting/performance/components/circular-performance-score/circular-performance-score.tsx index 8e3ad864e8cec..e31f078e1b009 100644 --- a/client/hosting/performance/components/circular-performance-score/circular-performance-score.tsx +++ b/client/hosting/performance/components/circular-performance-score/circular-performance-score.tsx @@ -29,7 +29,13 @@ export const CircularPerformanceScore = ( { numberOfSteps={ steps } showProgressText={ false } /> -
{ score }
+
48 && 'circular-performance-score--large' + } ` } + > + { score } +
); }; diff --git a/client/hosting/performance/components/circular-performance-score/style.scss b/client/hosting/performance/components/circular-performance-score/style.scss index cbc0179edc732..35e2e018f219b 100644 --- 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/client/performance-profiler/components/core-web-vitals-accordion/core-web-vitals-accordion-v2.tsx b/client/performance-profiler/components/core-web-vitals-accordion/core-web-vitals-accordion-v2.tsx index 312f7e04b2099..1f1302b43ded4 100644 --- a/client/performance-profiler/components/core-web-vitals-accordion/core-web-vitals-accordion-v2.tsx +++ b/client/performance-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 ? (
- +
) : ( { displayName={ displayName } metricKey={ key as Metrics } metricValue={ props[ key as Metrics ] } + isActive={ key === activeTab } /> } hideSummary diff --git a/client/performance-profiler/components/core-web-vitals-display/core-web-vitals-details_v2.tsx b/client/performance-profiler/components/core-web-vitals-display/core-web-vitals-details_v2.tsx index 92f5c8a1ee4e1..5f31f3bc9c322 100644 --- a/client/performance-profiler/components/core-web-vitals-display/core-web-vitals-details_v2.tsx +++ b/client/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', } } > - + ) : ( 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 index 75d19e697156f..24d888a18ba22 100644 --- 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 index f86a83730c475..6cf485e83e7cc 100644 --- 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; } }