Skip to content

fix(misc): make webinar banner theme-aware with light mode support #35029

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jaysoo merged 1 commit into from
Mar 26, 2026
Merged

fix(misc): make webinar banner theme-aware with light mode support #35029

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions nx-dev/ui-common/src/lib/webinar-notifier.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -88,15 +88,17 @@ 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
href={secondaryCtaUrl}
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"
Expand All @@ -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"
Expand Down
Loading