From 514567ec34ff9db20083e294a0e70f770650b7e5 Mon Sep 17 00:00:00 2001
From: Jack Hsu <jack.hsu@gmail.com>
Date: Thu, 26 Mar 2026 16:23:02 -0400
Subject: [PATCH] fix(misc): make webinar banner theme-aware with light mode
 support

## Current Behavior
The webinar banner has a hardcoded dark background (`bg-zinc-950`) with
white text, making the close button barely visible in light mode since
Starlight's global styles can override inherited text colors.

## Expected Behavior
The banner adapts to the current theme: light mode shows a white
background with dark text and a dark CTA button (matching the Framer
marketing site), while dark mode retains the existing dark background
with white text and pink CTA.

## Related Issue(s)
Fixes DOC-457
---
 nx-dev/ui-common/src/lib/webinar-notifier.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/nx-dev/ui-common/src/lib/webinar-notifier.tsx b/nx-dev/ui-common/src/lib/webinar-notifier.tsx
index 3952e331310..d08a4a6ee97 100644
--- a/nx-dev/ui-common/src/lib/webinar-notifier.tsx
+++ b/nx-dev/ui-common/src/lib/webinar-notifier.tsx
@@ -65,13 +65,13 @@ export function WebinarNotifier({
         damping: 30,
         mass: 1,
       }}
-      className="fixed bottom-0 left-0 right-0 z-30 w-full overflow-hidden bg-zinc-950 text-white shadow-lg md:bottom-4 md:left-auto md:right-4 md:w-[512px] md:rounded-lg"
+      className="fixed bottom-0 left-0 right-0 z-30 w-full overflow-hidden border border-zinc-200 bg-white text-zinc-900 shadow-lg md:bottom-4 md:left-auto md:right-4 md:w-[512px] md:rounded-lg dark:border-transparent dark:bg-zinc-950 dark:text-white"
       style={{ originY: 1 }}
     >
       <div className="relative p-4">
         <button
           onClick={closeNotifier}
-          className="absolute right-2 top-2 flex h-9 w-9 cursor-pointer items-center justify-center !rounded-full bg-transparent p-1 hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-white"
+          className="absolute right-2 top-2 flex h-9 w-9 cursor-pointer items-center justify-center !rounded-full bg-transparent p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 focus:outline-none focus:ring-2 focus:ring-zinc-400 dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white dark:focus:ring-white"
         >
           <XMarkIcon className="size-5" aria-hidden="true" />
           <span className="sr-only">Close</span>
@@ -88,7 +88,9 @@ export function WebinarNotifier({
             <span>{title}</span>
           </motion.h3>
           <motion.div key="banner-content" className="mt-4 space-y-4">
-            <p className="mb-2 text-sm">{description}</p>
+            <p className="mb-2 text-sm text-zinc-500 dark:text-zinc-300">
+              {description}
+            </p>
             <div className="flex flex-wrap items-center justify-end gap-1 sm:gap-4">
               {secondaryCtaUrl && secondaryCtaText && (
                 <a
@@ -96,7 +98,7 @@ export function WebinarNotifier({
                   target="_blank"
                   title={secondaryCtaText}
                   rel="noopener noreferrer"
-                  className="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-700 bg-zinc-800 px-2 py-2 text-sm font-semibold text-white no-underline transition hover:bg-zinc-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 md:px-4"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-300 bg-zinc-100 px-2 py-2 text-sm font-semibold text-zinc-900 no-underline transition hover:bg-zinc-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 md:px-4 dark:border-zinc-700 dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700"
                 >
                   <ArrowTopRightOnSquareIcon
                     aria-hidden="true"
@@ -110,7 +112,7 @@ export function WebinarNotifier({
                 href={primaryCtaUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center justify-center gap-2 rounded-lg bg-pink-600 px-2 py-2 text-sm font-semibold text-white no-underline transition hover:bg-pink-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-black/70 md:px-4"
+                className="inline-flex items-center justify-center gap-2 rounded-lg bg-zinc-900 px-2 py-2 text-sm font-semibold text-white no-underline transition hover:bg-zinc-800 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-white/70 md:px-4 dark:bg-pink-600 dark:hover:bg-pink-700 dark:active:text-black/70"
               >
                 <ArrowTopRightOnSquareIcon
                   aria-hidden="true"