fix: fixing the select styles

heroui-inc · Feb 13, 2025 · 9b1b860 · 9b1b860
1 parent c33522b
commit 9b1b860
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/apps/docs/components/marketing/hero/hero.tsx b/apps/docs/components/marketing/hero/hero.tsx
@@ -34,7 +34,7 @@ export const Hero = () => {
         <div className="flex justify-center w-full md:hidden">
           <Chip
             as={NextLink}
-            className="bg-foreground-100/50 border-1 hover:bg-foreground-100/80 border-foreground-200/50 cursor-pointer"
+            className="bg-default-200/50 border-1 hover:bg-default-200/80 border-default-400/50 cursor-pointer"
             classNames={{
               content: "font-semibold text-foreground text-xs ",
             }}

diff --git a/apps/docs/components/navbar.tsx b/apps/docs/components/navbar.tsx
@@ -215,7 +215,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
           {versionDropdown}
           <Chip
             as={NextLink}
-            className="hidden sm:flex bg-foreground-100/50 border-1 hover:bg-foreground-100/80 border-foreground-200/50 cursor-pointer"
+            className="hidden sm:flex bg-default-200/50 border-1 hover:bg-default-200/80 border-default-400/50 cursor-pointer"
             classNames={{
               content: "font-semibold text-foreground text-xs ",
             }}

diff --git a/apps/docs/components/themes/components/select-template.tsx b/apps/docs/components/themes/components/select-template.tsx
@@ -1,4 +1,4 @@
-import {Select, SelectItem} from "@heroui/react";
+import {cn, Select, SelectItem} from "@heroui/react";
 
 import {templates} from "../templates";
 import {Template, TemplateType} from "../types";
@@ -33,6 +33,7 @@ export function SelectTemplate({name, onChange, currentTheme}: SelectTemplatePro
         className="my-3"
         classNames={{
           trigger: "bg-default-200",
+          popoverContent: "bg-white dark:bg-[#18181B]",
         }}
         placeholder="Select a theme"
         selectedKeys={name === null ? [] : [name]}
@@ -41,6 +42,10 @@ export function SelectTemplate({name, onChange, currentTheme}: SelectTemplatePro
         {templates.map((template, index) => (
           <SelectItem
             key={template.name}
+            className={cn(
+              "data-[hover=true]:transition-none dark:data-[hover=true]:bg-[#26262A] dark:text-white dark:data-[hover=true]:text-white dark:data-[selectable=true]:focus:bg-[#26262A] dark:data-[selectable=true]:focus:text-white",
+              "data-[hover=true]:bg-white text-black data-[hover=true]:text-black data-[selectable=true]:focus:bg-[#F4F4F5] data-[selectable=true]:focus:text-black",
+            )}
             startContent={
               <Swatch
                 colors={