add restest button on mobile layout (#94907)

Automattic · Sep 25, 2024 · 58fe2dc · 58fe2dc
1 parent 259e53d
commit 58fe2dc
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 39 deletions.
diff --git a/client/hosting/performance/components/MobileHeader.tsx b/client/hosting/performance/components/MobileHeader.tsx
@@ -1,15 +1,16 @@
 import { Gridicon, ScreenReaderText } from '@automattic/components';
 import { Button } from '@wordpress/components';
 import { translate } from 'i18n-calypso';
-import React, { useState } from 'react';
+import { ReactNode, useState } from 'react';
 import NavigationHeader from 'calypso/components/navigation-header';
 
 type MobileHeaderProps = {
 	pageTitle: string;
 	pageSelector: JSX.Element;
+	subtitle?: ReactNode;
 };
 
-export const MobileHeader = ( { pageTitle, pageSelector }: MobileHeaderProps ) => {
+export const MobileHeader = ( { pageTitle, pageSelector, subtitle }: MobileHeaderProps ) => {
 	const [ isPageSelectorVisible, setIsPageSelectorVisible ] = useState( false );
 
 	const togglePageSelector = () => {
@@ -40,6 +41,15 @@ export const MobileHeader = ( { pageTitle, pageSelector }: MobileHeaderProps ) =
 					} }
 				>
 					{ pageSelector }
+					<div
+						css={ {
+							marginTop: '20px',
+							fontSize: '14px',
+							color: 'var(--color-neutral-50)',
+						} }
+					>
+						{ subtitle }
+					</div>
 				</div>
 			) }
 		</>

diff --git a/client/hosting/performance/site-performance.tsx b/client/hosting/performance/site-performance.tsx
@@ -221,51 +221,53 @@ export const SitePerformance = () => {
 		/>
 	);
 
+	const subtitle = performanceReport.performanceReport
+		? translate( 'Tested on %(testedDate)s. {{button}}Test again{{/button}}', {
+				args: {
+					testedDate: moment( performanceReport.performanceReport.timestamp ).format(
+						'MMMM Do, YYYY h:mm:ss A'
+					),
+				},
+				components: {
+					button: (
+						<Button
+							css={ {
+								textDecoration: 'none !important',
+								':hover': {
+									textDecoration: 'underline !important',
+								},
+								fontSize: 'inherit',
+								whiteSpace: 'nowrap',
+							} }
+							variant="link"
+							onClick={ retestPage }
+						/>
+					),
+				},
+		  } )
+		: translate(
+				'Optimize your site for lightning-fast performance. {{link}}Learn more.{{/link}}',
+				{
+					components: {
+						link: <InlineSupportLink supportContext="site-monitoring" showIcon={ false } />,
+					},
+				}
+		  );
+
 	return (
 		<div className="site-performance">
 			<div className="site-performance-device-tab-controls__container">
 				{ isMobile ? (
-					<MobileHeader pageTitle={ currentPage?.label ?? '' } pageSelector={ pageSelector } />
+					<MobileHeader
+						pageTitle={ currentPage?.label ?? '' }
+						pageSelector={ pageSelector }
+						subtitle={ subtitle }
+					/>
 				) : (
 					<NavigationHeader
 						className="site-performance__navigation-header"
 						title={ translate( 'Performance' ) }
-						subtitle={
-							performanceReport.performanceReport
-								? translate( 'Tested on %(testedDate)s. {{button}}Test again{{/button}}', {
-										args: {
-											testedDate: moment( performanceReport.performanceReport.timestamp ).format(
-												'MMMM Do, YYYY h:mm:ss A'
-											),
-										},
-										components: {
-											button: (
-												<Button
-													css={ {
-														textDecoration: 'none !important',
-														':hover': {
-															textDecoration: 'underline !important',
-														},
-														fontSize: 'inherit',
-														whiteSpace: 'nowrap',
-													} }
-													variant="link"
-													onClick={ retestPage }
-												/>
-											),
-										},
-								  } )
-								: translate(
-										'Optimize your site for lightning-fast performance. {{link}}Learn more.{{/link}}',
-										{
-											components: {
-												link: (
-													<InlineSupportLink supportContext="site-monitoring" showIcon={ false } />
-												),
-											},
-										}
-								  )
-						}
+						subtitle={ subtitle }
 					/>
 				) }
 				{ ! isMobile && pageSelector }