Show the correct messaging on recommendations heading and correct fon…

…tsize
Automattic · Sep 28, 2024 · 019f88d · 019f88d
1 parent 322c4c3
commit 019f88d
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 6 deletions.
diff --git a/client/hosting/performance/style.scss b/client/hosting/performance/style.scss
@@ -20,6 +20,20 @@ $section-max-width: 1224px;
 		gap: 0;
 	}
 
+	.performance-profiler-insights-section {
+		.subtitle {
+			font-size: $font-body-small;
+		}
+
+		.insight-header-container {
+			font-size: $font-body-small;
+		}
+
+		.description-area {
+			font-size: $font-body-small;
+		}
+	}
+
 	.performance-profiler-content .container {
 		padding-top: 0;
 		gap: 16px;

diff --git a/client/performance-profiler/components/dashboard-content/index.tsx b/client/performance-profiler/components/dashboard-content/index.tsx
@@ -109,6 +109,7 @@ export const PerformanceProfilerDashboardContent = ( {
 						ref={ insightsRef }
 						hash={ hash }
 						filter={ filter }
+						isLoggedInVersion={ showV2 }
 						onRecommendationsFilterChange={ onRecommendationsFilterChange }
 					/>
 				) }

diff --git a/client/performance-profiler/components/insights-section/index.tsx b/client/performance-profiler/components/insights-section/index.tsx
@@ -18,6 +18,7 @@ type InsightsSectionProps = {
 	isWpcom: boolean;
 	hash: string;
 	filter?: string;
+	isLoggedInVersion?: boolean;
 	onRecommendationsFilterChange?: ( filter: string ) => void;
 };
 
@@ -50,12 +51,18 @@ export const InsightsSection = forwardRef(
 				setSelectedFilter( filter );
 			}
 		}, [ selectedFilter, filter ] );
-
+		const siteOrPageSubtitle = props.isLoggedInVersion
+			? translate( 'your page' )
+			: translate( 'your site' );
 		return (
 			<div className="performance-profiler-insights-section" ref={ ref }>
 				<div className="header">
 					<div>
-						<h2 className="title">{ translate( 'Improve your site‘s performance' ) }</h2>
+						<h2 className="title">
+							{ props.isLoggedInVersion
+								? translate( 'Recommendations' )
+								: translate( 'Improve your site‘s performance' ) }
+						</h2>
 						<p className="subtitle">
 							{ filteredAudits.length
 								? translate(
@@ -66,7 +73,7 @@ export const InsightsSection = forwardRef(
 												quantity: filteredAudits.length,
 												metric:
 													selectedFilter === 'all'
-														? translate( 'your site' )
+														? siteOrPageSubtitle
 														: metricsNames[ selectedFilter as keyof typeof metricsNames ]?.name,
 											},
 											count: filteredAudits.length,

diff --git a/client/performance-profiler/components/insights-section/style.scss b/client/performance-profiler/components/insights-section/style.scss
@@ -28,6 +28,9 @@
 		color: var(--studio-gray-70);
 		font-size: $font-body;
 		margin-bottom: 0;
+		@media (max-width: $break-xlarge) {
+			max-width: 360px;
+		}
 	}
 
 	.metrics-insight-item.foldable-card {

diff --git a/client/performance-profiler/components/metrics-insight/index.tsx b/client/performance-profiler/components/metrics-insight/index.tsx
@@ -60,10 +60,10 @@ const Header = styled.div`
 
 	.impact {
 		padding: 4px 10px;
-		border-radius: 14px;
+		border-radius: 4px;
 		border: 1px solid transparent;
 		float: right;
-		font-size: 14px;
+		font-size: 12px;
 		color: var( --studio-black );
 
 		&.fail {

diff --git a/client/performance-profiler/components/metrics-insight/insight-content.tsx b/client/performance-profiler/components/metrics-insight/insight-content.tsx
@@ -36,6 +36,8 @@ export const InsightContent: React.FC< InsightContentProps > = ( props ) => {
 		setFeedbackSent( true );
 	};
 
+	const isPerformancePage = window.location.pathname.includes( '/sites/performance/' );
+
 	const renderFeedbackForm = () => {
 		if ( feedbackSent ) {
 			return <div className="survey">{ translate( 'Thanks for the feedback!' ) }</div>;
@@ -94,7 +96,14 @@ export const InsightContent: React.FC< InsightContentProps > = ( props ) => {
 	return (
 		<div className="metrics-insight-content">
 			{ isLoading ? (
-				<LLMMessage message={ translate( 'Finding the best solution for your site…' ) } rotate />
+				<LLMMessage
+					message={
+						isPerformancePage
+							? translate( 'Finding the best solution for your page…' )
+							: translate( 'Finding the best solution for your site…' )
+					}
+					rotate
+				/>
 			) : (
 				<>
 					<div className="description-area">