Site Profiler: Update styles for Results Header section (#91016)

* Change color of the button when is busy

* Remove flag from new components as it is not needed

* Site Profiler: Add initial version of Results Header component

* Update styles of header and display form when clicking CTA

* Add the green background svg and logic to display it

* update top spacing

* fix type conversion issues

* Update client/site-profiler/components/get-report-form/index.tsx

Co-authored-by: Wesley Berrêdo <Wberredo@gmail.com>

* update text class names

* accept prettier suggestion

---------

Co-authored-by: Gergely Csécsey <gcsecsey@gmail.com>
Co-authored-by: Gergely Csécsey <gergely.csecsey@automattic.com>
Co-authored-by: Wesley Berrêdo <Wberredo@gmail.com>

client/data/site-profiler/types.ts

@@ -98,3 +98,7 @@ export interface UrlBasicMetricsQueryResponse {
 	advanced: Record< string, string >;
 	token: string;
 }
+
+export interface BasicMetricsResult extends Omit< UrlBasicMetricsQueryResponse, 'basic' > {
+	basic: BasicMetricsScored;
+}

client/site-profiler/components/get-report-form/index.tsx

@@ -109,13 +109,13 @@ export function GetReportForm( {
 		>
 			<div className="get-report-form__container">
 				<div className="get-report-form__title">
-					<span className="title">{ translate( 'Get full report' ) }</span>
+					<span className="title">{ translate( 'Full site report' ) }</span>
 				</div>
 				<div className="get-report-form__body">
 					<div className="get-report-form__header">
 						<span className="description">
 							{ translate(
-								'Enter your details below to receive the full report with detailed insights and recommendations for your site.'
+								"To access a detailed report complete with insights and tailored recommendations for improving your site's performance, please provide your details below. We'll send you an exclusive link to view the full analysis, helping you make informed decisions for optimizing your site."
 							) }
 						</span>
 						<span>
@@ -171,8 +171,7 @@ export function GetReportForm( {
 								busy={ isSubmitting }
 								disabled={ responseSuccess }
 							>
-								{ translate( 'Get my report' ) }
-								<Gridicon icon="product-downloadable" />
+								{ translate( 'Access full report' ) }
 							</Button>
 						</div>
 						{ responseError && <FormInputValidation isError text={ responseError } /> }

client/site-profiler/components/get-report-form/styles.scss

@@ -1,4 +1,5 @@
 .get-report-form__wrapper {
+	color: #000;
 	position: fixed;
 	bottom: 0;
 	left: 0;
@@ -44,6 +45,8 @@
 
 	.description {
 		color: #3c4043;
+		//stylelint-disable-next-line scales/font-weights
+		font-weight: 300;
 	}
 	.gridicon {
 		cursor: pointer;
@@ -73,37 +76,25 @@
 	}
 }
 
-input[type="text"].form-text-input.get-report-form__form {
-	&-name,
-	&-email {
-		border-top: none;
-		border-left: none;
-		border-right: none;
-
-		&:focus,
-		&:hover,
-		&:focus:hover {
-			box-shadow: none;
-		}
-	}
-}
 
 .get-report-form__form-footer {
+	--wp-components-color-accent: var(--color-button);
 	display: flex;
 	gap: 20px;
 	align-items: center;
 	flex-wrap: wrap;
 	justify-content: space-between;
 	& fieldset {
 		margin-bottom: 0;
-		flex-basis: 70%;
+		flex-basis: 735px;
 	}
 	.terms-checkbox {
+		color: #000;
 		font-size: 0.75rem;
 		line-height: 1.5;
 	}
 	.submit-button {
-		background-color: var(--color-accent);
+		background-color: var(--color-button);
 		color: #fff;
 		border-radius: 4px;
 		font-weight: 500;

client/site-profiler/components/results-header/index.tsx

@@ -0,0 +1,51 @@
+import { Button, Gridicon } from '@automattic/components';
+import { translate } from 'i18n-calypso';
+import './styles.scss';
+import { BasicMetricsResult } from 'calypso/data/site-profiler/types';
+
+type Props = {
+	domain: string;
+	basicMetrics: BasicMetricsResult;
+	onGetReport: () => void;
+};
+
+function getIcon() {
+	// TODO: Implement the functionality to get the correct Icon
+	// https://github.com/Automattic/dotcom-forge/issues/7281
+	return <Gridicon icon="time" size={ 24 } />;
+}
+
+function getDomainMessage() {
+	// TODO: Implement the functionality to get the correct Icon
+	// https://github.com/Automattic/dotcom-forge/issues/7281
+	return translate( 'This site is not hosted on WordPress.com' );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function getTitleMessage( basicMetrics: BasicMetricsResult ) {
+	// TODO: Implement the functionality to get the correct title
+	// https://github.com/Automattic/dotcom-forge/issues/7298
+	return translate( 'Your site needs a boost. Let’s improve it.' );
+}
+
+export const ResultsHeader = ( { domain, basicMetrics, onGetReport }: Props ) => {
+	return (
+		<div className="results-header--container">
+			<div className="results-header--domain-container">
+				<span className="domain-title">{ domain }</span>
+				{ getIcon() }
+				<span className="domain-message">{ getDomainMessage() }</span>
+			</div>
+			<h1>{ getTitleMessage( basicMetrics ) }</h1>
+			<div className="results-header--button-container">
+				<Button onClick={ onGetReport }>
+					{ translate( 'Access full site report - It’s free' ) }
+				</Button>
+				<div className="link-component">
+					<a href="/site-profiler">{ translate( 'Check another site' ) }</a>
+					<Gridicon icon="chevron-right" size={ 18 } />
+				</div>
+			</div>
+		</div>
+	);
+};

client/site-profiler/components/results-header/styles.scss

@@ -0,0 +1,67 @@
+
+@import "@wordpress/base-styles/breakpoints";
+@import "@automattic/typography/styles/variables";
+
+.results-header--container {
+	display: flex;
+	flex-direction: column;
+	margin-top: 8rem;
+
+	h1 {
+		margin-top: 12px;
+		font-weight: 500;
+	}
+
+	@media (max-width: $break-small ) {
+		margin-top: 30px;
+		h1 {
+			margin-top: 20px;
+		}
+	}
+
+}
+
+.results-header--domain-container {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	align-items: center;
+	font-family: "SF Pro Display", $sans;
+
+	.domain-title {
+		font-weight: 500;
+	}
+	.domain-message {
+		color: #a8aaad;
+
+	}
+
+}
+.results-header--button-container {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 26px;
+	align-items: center;
+	margin-top: 48px;
+
+	@media (max-width: $break-small ) {
+		gap: 16px;
+	}
+
+	button {
+		background-color: var(--color-button);
+		border: none;
+		color: #fff;
+		padding: 10px 24px;
+
+		&:hover {
+			color: #fff;
+			background-color: var(--color-button-60);
+		}
+	}
+	.link-component {
+		display: flex;
+		gap: 10px;
+		align-items: center;
+	}
+}