Support onboarding iframed pages design amends (#3296)

Design amends to the iframed signin, register and passcode pages. Font
sizes and spacing;

- Headline (h1) responsive font size changes
- body copy font size change
- spacing between standfirst text and email address input field 

## Images
Before             |  After
:-------------------------:|:-------------------------:

![](https://github.com/user-attachments/assets/92f6fd8e-d58e-4c3c-bbb3-167196bfc5e6)
|
![](https://github.com/user-attachments/assets/95b3f806-2077-4385-beaf-adae9807cb80)

---------

Co-authored-by: Richard Bangay <[email protected]>

Author: rBangay

src/client/components/MainBodyText.tsx

@@ -1,9 +1,15 @@
 import React, { PropsWithChildren } from 'react';
 import { css, SerializedStyles } from '@emotion/react';
-import { textSans15, textSansBold15 } from '@guardian/source/foundations';
+import {
+	textSans15,
+	textSans17,
+	textSansBold15,
+	textSansBold17,
+} from '@guardian/source/foundations';
 
 interface Props {
 	cssOverrides?: SerializedStyles;
+	isIframed?: boolean;
 }
 
 export const mainBodyTextStyles = css`
@@ -26,9 +32,37 @@ export const mainBodyTextStyles = css`
 	}
 `;
 
+export const iframeMainBodyTextStyles = css`
+	${textSans17};
+	color: var(--color-text);
+	margin: 0;
+
+	strong {
+		${textSansBold17};
+		color: var(--color-strong-text);
+	}
+
+	a {
+		${textSansBold17};
+		color: var(--color-link);
+
+		strong {
+			color: var(--color-link);
+		}
+	}
+`;
+
 export const MainBodyText = ({
 	children,
 	cssOverrides,
+	isIframed = false,
 }: PropsWithChildren<Props>) => (
-	<p css={[mainBodyTextStyles, cssOverrides]}>{children}</p>
+	<p
+		css={[
+			isIframed ? iframeMainBodyTextStyles : mainBodyTextStyles,
+			cssOverrides,
+		]}
+	>
+		{children}
+	</p>
 );

src/client/components/MainForm.tsx

@@ -41,6 +41,7 @@ import {
 import locations from '@/shared/lib/locations';
 import { GatewayErrorSummary } from '@/client/components/GatewayErrorSummary';
 import { NoScript } from './NoScript';
+import { CONTAINER_GAP } from '../models/Style';
 
 type TermsStyle = 'primary' | 'secondary';
 
@@ -382,6 +383,7 @@ export const MainForm = ({
 			)}
 			{recaptchaEnabled && (
 				<RecaptchaWrapper
+					overrideGapCounteract={isIframed ? CONTAINER_GAP : undefined}
 					recaptchaSiteKey={recaptchaSiteKey}
 					setRecaptchaState={setRecaptchaState}
 				/>

src/client/layouts/MinimalLayout.tsx

@@ -4,6 +4,7 @@ import MinimalHeader from '@/client/components/MinimalHeader';
 import {
 	from,
 	headlineBold28,
+	headlineMedium24,
 	headlineMedium28,
 	remSpace,
 } from '@guardian/source/foundations';
@@ -30,7 +31,6 @@ interface MinimalLayoutProps {
 	children?: React.ReactNode;
 	wide?: boolean;
 	pageHeader: string;
-	subduedHeadingStyle?: boolean;
 	leadText?: React.ReactNode;
 	imageId?: DecorativeImageId;
 	successOverride?: string;
@@ -66,17 +66,23 @@ const iframeThemeWrapperStyles = css`
 	gap: ${remSpace[2]};
 `;
 
-const pageHeaderStyles = (subduedHeadingStyle: boolean) => css`
+const pageHeaderStyles = (amIIframed: boolean) => css`
 	color: var(--color-heading);
-	${subduedHeadingStyle ? headlineMedium28 : headlineBold28};
+	${amIIframed
+		? `
+            ${headlineMedium24};
+            ${from.mobileLandscape} {
+                ${headlineMedium28};
+            }
+        `
+		: headlineBold28};
 	margin: 0;
 `;
 
 export const MinimalLayout = ({
 	children,
 	wide = false,
 	pageHeader,
-	subduedHeadingStyle = false,
 	leadText,
 	imageId,
 	successOverride,
@@ -99,7 +105,7 @@ export const MinimalLayout = ({
 		return <Theme />;
 	};
 
-	const amIIframed = overrideTheme?.includes('iframe');
+	const amIIframed = !!overrideTheme?.includes('iframe');
 
 	const ConditionalIframeThemeWrapper = ({
 		children,
@@ -121,11 +127,11 @@ export const MinimalLayout = ({
 				<ConditionalIframeThemeWrapper>
 					{pageHeader && (
 						<header>
-							<h1 css={pageHeaderStyles(subduedHeadingStyle)}>{pageHeader}</h1>
+							<h1 css={pageHeaderStyles(amIIframed)}>{pageHeader}</h1>
 						</header>
 					)}
 					{leadText && typeof leadText === 'string' ? (
-						<MainBodyText>{leadText}</MainBodyText>
+						<MainBodyText isIframed={amIIframed}>{leadText}</MainBodyText>
 					) : (
 						leadText
 					)}

src/client/lib/hooks/useRecaptcha.tsx

@@ -187,7 +187,8 @@ export const RecaptchaWrapper: React.FC<{
 	setRecaptchaState: React.Dispatch<
 		React.SetStateAction<UseRecaptchaReturnValue | undefined>
 	>;
-}> = ({ recaptchaSiteKey, setRecaptchaState }) => {
+	overrideGapCounteract?: number | string;
+}> = ({ recaptchaSiteKey, setRecaptchaState, overrideGapCounteract }) => {
 	const { error, executeCaptcha, expired, requestCount, token, widgetId } =
 		useRecaptcha(recaptchaSiteKey, 'recaptcha');
 	React.useEffect(() => {
@@ -208,26 +209,36 @@ export const RecaptchaWrapper: React.FC<{
 		token,
 		widgetId,
 	]);
-	return <RecaptchaElement id="recaptcha" />;
+	return (
+		<RecaptchaElement
+			id="recaptcha"
+			gapCountractValue={overrideGapCounteract ?? SECTION_GAP}
+		/>
+	);
 };
 
 /**
  * Provides a standardised way to bind Recaptcha to your page.
  */
+interface RecaptchaElementProps extends React.HTMLProps<HTMLDivElement> {
+	gapCountractValue: number | string;
+}
+
 const RecaptchaElement = React.forwardRef<
 	HTMLDivElement,
-	React.HTMLProps<HTMLDivElement>
+	RecaptchaElementProps
 >(function RecaptchaElement(props, ref) {
+	const { gapCountractValue, ...otherProps } = props;
 	return (
 		<div
 			ref={ref}
 			className="g-recaptcha"
-			{...props}
+			{...otherProps}
 			// TODO: This is a fix for when the reCAPTCHA badge is not visible in the DOM.
 			// In these cases, the wrapper is still visible, which means it gets affected
 			// by the `gap` spacing applied to its parent flex container in `MainForm`.
 			// We set a negative margin here to counteract what looks like an overly large gap.
-			css={{ marginTop: `-${SECTION_GAP}` }}
+			css={{ marginTop: `-${gapCountractValue}` }}
 		></div>
 	);
 });

src/client/pages/IframedPasscodeEmailSent.tsx

@@ -188,7 +188,6 @@ export const IframedPasscodeEmailSent = ({
 			}
 			pageHeader={text.title}
 			shortRequestId={shortRequestId}
-			subduedHeadingStyle={true}
 			overrideTheme="iframe-light"
 		>
 			{email ? (

src/client/pages/IframedRegisterWithEmail.tsx

@@ -58,7 +58,6 @@ export const IframedRegisterWithEmail = ({
 			shortRequestId={shortRequestId}
 			errorContext={getErrorContext(pageError)}
 			errorOverride={pageError}
-			subduedHeadingStyle={true}
 			overrideTheme="iframe-light"
 		>
 			<MainForm

src/client/pages/IframedSignIn.tsx

@@ -158,7 +158,6 @@ export const IframedSignIn = ({
 			pageHeader="Sign in to your account"
 			leadText="This unlocks your premium experience, online and in the app."
 			shortRequestId={shortRequestId}
-			subduedHeadingStyle={true}
 			overrideTheme="iframe-light"
 		>
 			{/* AuthProviderButtons component with show boolean */}