From e3b25abccb3b3152396611e6957477b75ba1088b Mon Sep 17 00:00:00 2001 From: Henry Date: Wed, 23 Jul 2025 21:57:55 +0100 Subject: [PATCH] feat: tweak nav styling for light mode --- apps/web/src/components/ReactiveButton.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/apps/web/src/components/ReactiveButton.tsx b/apps/web/src/components/ReactiveButton.tsx index f409d352..73340f73 100644 --- a/apps/web/src/components/ReactiveButton.tsx +++ b/apps/web/src/components/ReactiveButton.tsx @@ -5,10 +5,6 @@ import { twMerge } from "tailwind-merge"; import LottieIcon from "~/components/LottieIcon"; import { useIsMobile } from "~/hooks/useMediaQuery"; -function classNames(...classes: string[]): string { - return classes.filter(Boolean).join(" "); -} - const Button: React.FC<{ href: string; current: boolean; @@ -37,11 +33,11 @@ const Button: React.FC<{ href={href} onMouseEnter={handleMouseEnter} onClick={handleClick} - className={classNames( - "group flex h-[34px] items-center rounded-md p-1.5 text-sm font-normal leading-6 text-neutral-900 hover:bg-light-200 dark:hover:bg-dark-200 dark:hover:text-dark-1000", + className={twMerge( + "group flex h-[34px] items-center rounded-md p-1.5 text-sm font-normal leading-6 hover:bg-light-200 hover:text-light-1000 dark:hover:bg-dark-200 dark:hover:text-dark-1000", current - ? "bg-light-200 dark:bg-dark-200 dark:text-dark-1000" - : "dark:bg-dark-100 dark:text-dark-900", + ? "bg-light-200 text-light-1000 dark:bg-dark-200 dark:text-dark-1000" + : "text-neutral-600 dark:bg-dark-100 dark:text-dark-900", isCollapsed ? "justify-start gap-x-3 md:justify-center md:gap-x-0" : "gap-x-3",