diff --git a/src/client/components/MainBodyText.tsx b/src/client/components/MainBodyText.tsx index e8061e9ed..bda6897a7 100644 --- a/src/client/components/MainBodyText.tsx +++ b/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) => ( -

{children}

+

+ {children} +

); diff --git a/src/client/components/MainForm.tsx b/src/client/components/MainForm.tsx index de6eb2d66..703446213 100644 --- a/src/client/components/MainForm.tsx +++ b/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 && ( diff --git a/src/client/layouts/MinimalLayout.tsx b/src/client/layouts/MinimalLayout.tsx index 0441ca5c8..e69c1effa 100644 --- a/src/client/layouts/MinimalLayout.tsx +++ b/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,9 +66,16 @@ 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; `; @@ -76,7 +83,6 @@ export const MinimalLayout = ({ children, wide = false, pageHeader, - subduedHeadingStyle = false, leadText, imageId, successOverride, @@ -99,7 +105,7 @@ export const MinimalLayout = ({ return ; }; - const amIIframed = overrideTheme?.includes('iframe'); + const amIIframed = !!overrideTheme?.includes('iframe'); const ConditionalIframeThemeWrapper = ({ children, @@ -121,11 +127,11 @@ export const MinimalLayout = ({ {pageHeader && (
-

{pageHeader}

+

{pageHeader}

)} {leadText && typeof leadText === 'string' ? ( - {leadText} + {leadText} ) : ( leadText )} diff --git a/src/client/lib/hooks/useRecaptcha.tsx b/src/client/lib/hooks/useRecaptcha.tsx index 5a0f56e1d..6ef5f8500 100644 --- a/src/client/lib/hooks/useRecaptcha.tsx +++ b/src/client/lib/hooks/useRecaptcha.tsx @@ -187,7 +187,8 @@ export const RecaptchaWrapper: React.FC<{ setRecaptchaState: React.Dispatch< React.SetStateAction >; -}> = ({ 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 ; + return ( + + ); }; /** * Provides a standardised way to bind Recaptcha to your page. */ +interface RecaptchaElementProps extends React.HTMLProps { + gapCountractValue: number | string; +} + const RecaptchaElement = React.forwardRef< HTMLDivElement, - React.HTMLProps + RecaptchaElementProps >(function RecaptchaElement(props, ref) { + const { gapCountractValue, ...otherProps } = props; return (
); }); diff --git a/src/client/pages/IframedPasscodeEmailSent.tsx b/src/client/pages/IframedPasscodeEmailSent.tsx index 1955deaa1..20a66680e 100644 --- a/src/client/pages/IframedPasscodeEmailSent.tsx +++ b/src/client/pages/IframedPasscodeEmailSent.tsx @@ -188,7 +188,6 @@ export const IframedPasscodeEmailSent = ({ } pageHeader={text.title} shortRequestId={shortRequestId} - subduedHeadingStyle={true} overrideTheme="iframe-light" > {email ? ( diff --git a/src/client/pages/IframedRegisterWithEmail.tsx b/src/client/pages/IframedRegisterWithEmail.tsx index e7dc521ee..1a18b1e02 100644 --- a/src/client/pages/IframedRegisterWithEmail.tsx +++ b/src/client/pages/IframedRegisterWithEmail.tsx @@ -58,7 +58,6 @@ export const IframedRegisterWithEmail = ({ shortRequestId={shortRequestId} errorContext={getErrorContext(pageError)} errorOverride={pageError} - subduedHeadingStyle={true} overrideTheme="iframe-light" > {/* AuthProviderButtons component with show boolean */}