Update NewsletterSignupCard styling for better responsiveness on small devices

[georgerichmond]

What does this change?

Updates the styling of the NewsletterSignupCard header to match the latest design

Why?

On small/narrow devices the frequency text ("Free newsletter | Around 2-3 times a day") could wrap awkwardly, and Dani created a new visual design (circular icon badge, bold frequency text, and a divider between the badge row and the heading).

How has this change been tested?

Styling-only change — verified manually in Storybook (Default and new LongFrequencyNarrow stories) across mobile/wide viewports and in light/dark mode. Existing Storybook stories can be used for Chromatic visual regression testing.

Screenshots

Before	After

New LongFrequencyNarrow story, showing the text wrapping after the "|" divider with the icon centred against the two-line block:

[github-actions]

🚀 Image pushed to AWS ECR

Image digest: sha256:21be5ec64bbd8a5f5a01f6636e0998362bdb8328a8b9ecad9ebd72d5c0b06283

🐛 Run the image locally

The following can be used to run the image locally:

# Refer to image using the immutable digest. Find alternatives below.
IMAGE_IDENTIFIER="@sha256:21be5ec64bbd8a5f5a01f6636e0998362bdb8328a8b9ecad9ebd72d5c0b06283"

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-1024-bug-newsletter-in-article-signup-card-styling-issue-on-small-devices"

# Refer to image using build tag
# IMAGE_IDENTIFIER=":build-31075"

# Refer to image via the GitHub commit SHA tag
# IMAGE_IDENTIFIER=":sha-dfae429efffd430b9333d61264db315adca210c6"

# Set environment variables for the AWS CLI
AWS_PROFILE="<A_PROFILE_FROM_JANUS>"
AWS_DEFAULT_REGION="eu-west-1"

IMAGE_ACCOUNT_ID=$(aws ssm get-parameter --name /organisation/accounts/artifacts --query "Parameter.Value" --output text)
REGISTRY="${IMAGE_ACCOUNT_ID}.dkr.ecr.${AWS_DEFAULT_REGION}.amazonaws.com"
IMAGE="${REGISTRY}/guardian/dotcom-rendering${IMAGE_IDENTIFIER}"

# Login to AWS ECR https://docs.aws.amazon.com/AmazonECR/latest/userguide/registry_auth.html
aws ecr get-login-password | docker login --username AWS --password-stdin $REGISTRY

# Pull the image
docker pull $IMAGE

# Run the image. You'll likely need to set additional flags. See https://docs.docker.com/reference/cli/docker/container/run.
docker run $IMAGE

---

From guardian/actions-publish-image.

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[github-actions]

Deploy build 3122 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 3122 of dotcom:ab-testing to CODE
• Deploy parts of build 3122 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 31075 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 31075 of dotcom:rendering-all to CODE
• Deploy parts of build 31075 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[gu-prout]

Seen on PROD (merged by @georgerichmond 7 minutes and 56 seconds ago) Please check your changes!