WS-2782: Apply dark UI for 'video' Topic Pages

[alex-magana]

Resolves JIRA: WS-2782

Summary

Adopt a dark UI experience on video-centric Topic Pages.

Code changes

• Extract the primaryMediaType from the BFF response.
• Add the primaryMediaType to the RequestContextProvider.
• Infer the dark UI for Topic Pages where primaryMediaType is set
  to video and set in the theme provider and the SCSS theme provider.
• Define a dark UI background for the Topic Page and apply it.
• Set the topic title and description.

Testing

1. List the steps required to test this PR.

https://simorgh1.belfrage-preview.test.api.bbc.com/arabic/topics/cz9mm6r1q5et?renderer_env=live
https://simorgh1.belfrage-preview.test.api.bbc.com/arabic/topics/cz9mm6r1q5et.lite?renderer_env=live

Useful Links

• Coding Standards
• Repository use guidelines
• Add Links to useful resources related to this PR if applicable.

[Copilot]

🟡 Changes recommended

Unresolved moderate issues affect video Topic Page routing, contrast, background coverage, and media indicator colors.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Extends dark UI theming to video Topic Pages through media-type context, responsive styling, and updated snapshots.

Changes:

• Passes primaryMediaType through request and theme contexts.
• Adds dark styling for Topic Pages, pagination, curation, promos, and media icons.
• Refreshes affected integration and component snapshots.

File summaries

File	Reviewed changes and final notes
ws-nextjs-app/pages/_app.page.tsx	Passes media type to context. Moderate (1 vote): video type is not read from the actual topic response.
ws-nextjs-app/integration/pages/onDemandTVPage/pashtoBrand/__snapshots__/canonical.test.ts.snap	Refreshed generated styles.
ws-nextjs-app/integration/pages/onDemandTVPage/hausa/__snapshots__/canonical.test.ts.snap	Refreshed generated styles.
ws-nextjs-app/integration/pages/av-embeds/russian/__snapshots__/canonical.test.ts.snap	Refreshed generated styles.
ws-nextjs-app/integration/pages/articles/persianMediaPlayer/__snapshots__/canonical.test.ts.snap	Refreshed generated styles.
ws-nextjs-app/integration/pages/articles/afrique/__snapshots__/canonical.test.ts.snap	Refreshed generated styles.
src/app/pages/TopicPage/TopicPage.jsx	Adds the dark page wrapper. Moderate (1 vote each): heading contrast and full-height background need correction.
src/app/pages/TopicPage/index.styles.jsx	Defines the dark wrapper. Moderate (2 votes): heading contrast needs correction. Nit (1 vote): use the SCSS module convention.
src/app/legacy/psammead/psammead-assets/src/svgs/mediaIcons.jsx	Adds responsive video icon colors.
src/app/legacy/containers/StoryPromo/__snapshots__/index.test.jsx.snap	Refreshed promo snapshots.
src/app/legacy/components/Promo/media-icon.jsx	Adds responsive dark media indicator styling. Moderate (2 votes): use the required EBON/BLACK backgrounds.
src/app/legacy/components/Promo/a.jsx	Updates dark promo link colors.
src/app/contexts/RequestContext/index.tsx	Stores primaryMediaType in request context.
src/app/contexts/RequestContext/index.test.tsx	Tests media type propagation.
src/app/components/ThemeProviderSCSSModules/withThemeProvider.tsx	Updates dark UI document state.
src/app/components/ThemeProvider/withThemeProvider.tsx	Enables dark UI for video topics. Nit (1 vote): add focused coverage for video and non-video Topic Pages.
src/app/components/Pagination/index.styles.ts	Adds dark pagination colors.
src/app/components/MediaLoader/Placeholder/__snapshots__/index.test.tsx.snap	Refreshed media-loader snapshots.
src/app/components/Curation/HierarchicalGrid/index.styles.tsx	Adds dark curation body colors.

Review details

Suppressed comments (5)

src/app/components/ThemeProvider/withThemeProvider.tsx:28

• The new video-topic branch is not covered by the existing ThemeProvider tests: those tests render without a RequestContext and do not assert either isDarkUi or the data-is-dark-ui attribute. Add focused cases for a video Topic Page and a non-video Topic Page, covering both the Emotion and SCSS theme providers, so this routing condition cannot regress.

const isDarkUiPage = ({
  pageType,
  primaryMediaType,
}: {
  pageType: PageTypes;
  primaryMediaType?: string | null;
}) =>
  (primaryMediaType === 'video' && pageType === TOPIC_PAGE) ||
  ([MEDIA_ARTICLE_PAGE, TV_PAGE, LIVE_TV_PAGE] as PageTypes[]).includes(
    pageType,
  );

src/app/pages/TopicPage/TopicPage.jsx:53

• This new dark background makes the existing TopicTitle and TopicDescription colors unreadable: both components set their text to palette.GREY_10, the same dark value used here for the background. Update those foreground styles for isDarkUi (the title is always rendered), otherwise video topic pages have a severe contrast/accessibility regression.

    <div css={theme => (theme.isDarkUi ? styles.pageWrapper : undefined)}>

src/app/pages/TopicPage/TopicPage.jsx:53

• The dark color is applied only to this content-height child. PageLayoutWrapper gives its parent content area the remaining viewport height but keeps that area palette.GHOST, so a short video topic page will show a light strip below the topic content instead of the dark UI background. Apply the dark background to the full content wrapper or make this wrapper fill it.

    <div css={theme => (theme.isDarkUi ? styles.pageWrapper : undefined)}>

src/app/pages/TopicPage/index.styles.jsx:8

• This introduces new component styling in an Emotion style object. The repository's SCSS migration convention uses a co-located .module.scss with theme tokens for new or modified component styling (as in src/app/components/ArticleLinksBlock/index.module.scss), so move this wrapper rule to the TopicPage module stylesheet instead of extending the Emotion styles.

  pageWrapper: ({ palette, isDarkUi }) =>
    css({
      ...(isDarkUi && {
        backgroundColor: palette.GREY_10,
      }),

ws-nextjs-app/pages/_app.page.tsx:166

• The topic route passes its BFF pageData through unchanged, but the topic responses used here do not expose a top-level primaryMediaType; video is represented on curations[].summaries[].type. This destructuring therefore leaves the context value null, so isDarkUiPage never enables dark UI for video Topic Pages. Populate this value from the actual topic response (or change the route contract) before passing it to RequestContextProvider.

    const {
      metadata: { atiAnalytics = undefined } = {},
      primaryMediaType = null,
    } = pageData ?? {};

• Files reviewed: 19/19 changed files
• Comments generated: 2
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.