feat(uxcore): dark mode across UX Core + layout/context fixes

[manager]

Summary

Dark-mode pass across UX Core (now in this repo post-consolidation), plus the layout/context plumbing fixes that had to land alongside it.

• Dark theme across UXCP (decision table, country/bias map, pagination, persona, selection, suggested questions, switchers, tab headers), UXCG (stage filters, panel/tag), UXCat (start-test / ongoing / result / certificate, achievements, completion bar, tooltips, footer, accordion), plus shared chrome: modals (Log In, Our Projects, Magic Link, UXCP Log In), tooltips, dropdowns, user profile, language flags, inputs/textareas, tags, buttons, tables.
• Layout & context fixes that unblocked the dark work: route-split _app so UX Core pages get UX Core's Layout; real GlobalContext.Provider bridged in _app; bias data passed as prop to /uxcore/[slug] and /uxcg/[slug]; UX Core @font-face consolidated into globals.scss; App-Router usePathname() dropped from a Pages-Router layout; router.asPath hydration leaks on /uxcore#hr fixed.
• Cross-realm theme sync so the toggle stays consistent between keepsimple and UX Core surfaces.
• Polish: kill modal-open layout shift, modal scroll + fade transitions, visible X icon in Log In modal, clickable View-type + Use-cases switchers, selected navbar icons stay visible on hover, cycling subtitle word visible on dark, stage-pill label visible, /uxcat accordion chevron + section titles + tooltip body visible.
• next.config.js: allow the flag CDN host needed by the country/bias map.

Test plan

• DEV (keepsimple.administration.ae) pointed at this branch and refreshed
• Dark mode on /uxcore, /uxcg, /uxcat, /uxcp — no white flashes, readable text, modals intact
• /uxcat full flow start → ongoing → result → certificate in dark
• /uxcp decision table + country/bias map + pagination in dark
• Log In + Our Projects + Magic Link modals in dark, no layout shift on open
• Theme persists when crossing keepsimple ↔ UX Core routes
• Language flags still coloured; bias-popup tooltip readable in dark
• next build clean (Strapi guardrails still pass)

[MaryWylde]

---

This is a large, well-structured PR. The dark-mode coverage is thorough and the architectural fixes (router.asPath → router.pathname, uxcgLocalizedData as prop, cross-realm sync) are sound. A few issues worth addressing before merge.

---

Issues

1. Duplicate @font-face declarations (Medium)

src/uxcore/styles/globals.scss still retains the full set of font-face rules (Lato, IBM Plex Mono, Oswald, RedHatDisplay, Tomorrow*, DelaGothicOne, Manrope, IBMPlexSans, etc.) — the same block that was also added to src/styles/globals.scss. The deleted file was uxcore-fonts.scss; the uxcore globals itself was only modified, not cleaned up.

Since no TypeScript/TSX file explicitly imports src/uxcore/styles/globals.scss and no sassOptions.additionalData was found in next.config.js, it's unclear whether that file is still loaded at runtime. If it is still loaded (e.g., via a sub-app config or dynamic import chain), browsers will parse the same @font-face descriptors twice — harmless but wasteful. If it isn't loaded, the block is dead weight.

The safe path is to remove the @font-face declarations from src/uxcore/styles/globals.scss (they now live in the canonical src/styles/globals.scss) and leave only the rules that are uxcore-specific (body resets, scrollbar styles, dark-theme body rules). And keep in mind that all the font families are stored in global.scss

Fix this →

---

2. Stale closure in keyboard handler — CustomModal.tsx (Low-Medium)

CustomModal.tsx registers the Escape listener with an empty [] dependency array, so it captures the handleClose function at mount time. But handleClose closes over closing state. During the 180ms fade-out window, pressing Escape a second time calls the stale handleClose which sees closing === false and starts a second close cycle.

// CustomModal.tsx — useEffect with [] captures initial handleClose
useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'Escape') handleClose(); // stale closure over `closing`
  };
  // …
}, []);

The window is short and in practice harmless, but adding handleClose to the dependency array (or using a ref) would make the guard if (closing) return reliable. Modal.tsx has the same pattern.

Fix this →

---

3. UserProfile.module.scss — split dark-theme block (Low)

The dark theme rules are split into two separate :global(body.darkTheme) .userProfile selectors instead of one. The second block's rules would merge cleanly into the first.

// Two separate :global(body.darkTheme) .userProfile blocks
// at src/uxcore/components/UserProfile/UserProfile.module.scss
:global(body.darkTheme) .userProfile { background-image: none !important; … }
:global(body.darkTheme) .userProfile { .wrapper { … } }  // ← can be merged

No runtime impact, but it's slightly confusing.

---

4. scrollbar-gutter: stable + overflow-y: overlay interaction (Low, known limitation)

Setting scrollbar-gutter: stable on <html> while overflow-y: overlay is also set may not prevent layout shift on macOS/Chrome where overlay scrollbars don't occupy space — the gutter reservation only applies to "classic" (non-overlay) scrollbars per the CSS spec. On those platforms, the old margin-right: 8px trick (now removed) was actually more reliable. Worth testing on a Windows/Linux browser with classic scrollbars as the primary validation platform for this fix.

---

5. Oswald-Bold missing file extension (Pre-existing, now duplicated)

src: url('/fonts/biases/Oswald-Bold') format('truetype');

No .ttf extension. This was already in uxcore/styles/globals.scss and is now also copied to src/styles/globals.scss. The browser may still load it (some are lenient), but it's technically incorrect. Not a regression in this PR but worth a follow-up.

---

Positives

• background: #1b1e26 vs background-color — Correct fix. Setting only background-color left the light gradient image composited on top of it. Using the shorthand clears the image component.
• router.pathname instead of router.asPath — Correct fix for both ToolHeader.tsx and MobileHeader.tsx. asPath includes the hash on the client but not on SSR, causing hydration mismatches on /uxcore#hr.
• usePathname() → router.pathname in Layout.tsx — Correct; usePathname() is App Router-only and shouldn't be used in a Pages Router layout.
• uxcgLocalizedData as prop in /uxcore/[slug] — Moving from useContext(GlobalContext) to a static prop is cleaner and removes a context timing dependency. The Promise.all([getStrapiBiases(), getStrapiQuestions()]) in getStaticProps is also a good parallel-fetch improvement.
• FlagImage emoji fallback — Well-implemented resilience: onError triggers emoji rendering via Unicode regional indicator codepoints, avoiding broken-image icons when flagcdn.com is blocked.
• XIcon with currentColor — Makes the icon theme-aware without any JS, the correct approach for SVG icons.
• Cross-realm theme sync — The darktheme:change CustomEvent pattern is pragmatic and correct. The if (state.isDarkTheme !== next) guard prevents re-dispatch loops. The cold-load bootstrap in _app.tsx's useEffect correctly syncs state on deep-links.
• Modal animation system — The closing state + 180ms setTimeout pattern for fade-out before unmount is clean. Both Modal.tsx and CustomModal.tsx apply it consistently.
• CSP update — Adding https://flagcdn.com to img-src is the correct companion change for FlagImage.
• handleSnackbarOpening guard in ViewSwitcher — Adding && handleSnackbarOpening before calling it prevents a potential undefined call. The new handleFirstClick/handleSecondClick refactor produces identical behavior to the old data-type-based switch but is more readable.

---

Summary

The dark-mode coverage is comprehensive and the approach (:global(body.darkTheme) selectors in scoped SCSS modules) is consistent throughout. The layout/context fixes are individually correct and well-commented. The two things most worth addressing before merging are the duplicate @font-face block in uxcore/styles/globals.scss (cleanup the leftover from the consolidation) and the stale closure in the modal keyboard handlers (minor risk but easy to tighten up).

[MaryWylde]

We use classnames for these cases.