Update NewsletterSignupCard styling for better responsiveness on small devices

Author: georgerichmond

dotcom-rendering/src/components/NewsletterSignupCard.tsx

@@ -4,7 +4,7 @@ import {
 	headlineMedium20,
 	space,
 	textSans14,
-	textSans15,
+	textSansBold15,
 } from '@guardian/source/foundations';
 import { SvgNewsletterFilled } from '@guardian/source/react-components';
 import { palette as themePalette } from '../palette';
@@ -54,24 +54,44 @@ const titleStyles = css`
 
 const frequencyTagStyles = css`
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
+	gap: ${space[1]}px;
 	color: ${themePalette('--newsletter-card-frequency-tag')};
-	${textSans15};
-	margin-left: -1px;
-	margin-top: -1px;
-	margin-bottom: ${space[1]}px;
+	${textSansBold15};
+	margin-bottom: ${space[2]}px;
+`;
+
+const frequencyLabelStyles = css`
+	white-space: nowrap;
+`;
+
+const badgeStyles = css`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	background-color: ${themePalette('--newsletter-card-badge-background')};
 
 	svg {
-		fill: currentColor;
-		height: 20px;
-		width: 20px;
+		fill: ${themePalette('--newsletter-card-badge-icon')};
+		height: 14px;
+		width: 14px;
 	}
 `;
 
+const innerDividerStyles = css`
+	border: none;
+	border-top: 1px solid ${themePalette('--newsletter-card-divider')};
+	margin: 0 0 ${space[2]}px;
+`;
+
 const descriptionStyles = css`
 	${textSans14};
 	line-height: 1.15;
-	margin-bottom: ${space[2]}px;
 	clear: both;
 	color: ${themePalette('--newsletter-card-description')};
 `;
@@ -92,27 +112,33 @@ const illustrationStyles = css`
 const NewsletterSignupHeader = (
 	props: Omit<NewsletterSignupCardProps, 'children'>,
 ) => (
-	<div css={headerStyles}>
-		<div css={titleAndMetaStyles}>
-			<div css={frequencyTagStyles}>
+	<>
+		<div css={frequencyTagStyles}>
+			<span css={badgeStyles}>
 				<SvgNewsletterFilled />
-				Free newsletter | {props.frequency}
+			</span>
+			<span css={frequencyLabelStyles}>Free newsletter |</span>
+			<span css={frequencyLabelStyles}>{props.frequency}</span>
+		</div>
+		<hr css={innerDividerStyles} />
+		<div css={headerStyles}>
+			<div css={titleAndMetaStyles}>
+				<p css={titleStyles}>
+					Sign up to <span>{props.name}</span>
+				</p>
+				<p css={descriptionStyles}>{props.description}</p>
 			</div>
-			<p css={titleStyles}>
-				Sign up to <span>{props.name}</span>
-			</p>
-			<p css={descriptionStyles}>{props.description}</p>
+			{!!props.illustrationSquare && (
+				<img
+					css={illustrationStyles}
+					src={props.illustrationSquare}
+					alt=""
+					loading="lazy"
+					decoding="async"
+				/>
+			)}
 		</div>
-		{!!props.illustrationSquare && (
-			<img
-				css={illustrationStyles}
-				src={props.illustrationSquare}
-				alt=""
-				loading="lazy"
-				decoding="async"
-			/>
-		)}
-	</div>
+	</>
 );
 
 export const NewsletterSignupCard = ({

dotcom-rendering/src/paletteDeclarations.ts

@@ -7965,6 +7965,14 @@ const paletteColours = {
 		light: () => '#F3F7FF',
 		dark: () => sourcePalette.brand[100],
 	},
+	'--newsletter-card-badge-background': {
+		light: () => sourcePalette.brand[400],
+		dark: () => sourcePalette.brand[600],
+	},
+	'--newsletter-card-badge-icon': {
+		light: () => sourcePalette.neutral[100],
+		dark: () => sourcePalette.neutral[100],
+	},
 	'--newsletter-card-description': {
 		light: () => sourcePalette.neutral[20],
 		dark: () => sourcePalette.neutral[86],
@@ -7974,8 +7982,8 @@ const paletteColours = {
 		dark: () => sourcePalette.neutral[46],
 	},
 	'--newsletter-card-frequency-tag': {
-		light: () => sourcePalette.neutral[38],
-		dark: () => sourcePalette.neutral[73],
+		light: () => sourcePalette.brand[400],
+		dark: () => sourcePalette.neutral[100],
 	},
 	'--newsletter-card-title': {
 		light: () => sourcePalette.neutral[7],