Fix variants

onflow · Dec 17, 2024 · 30eb208 · 30eb208
1 parent bc8e95d
commit 30eb208
Showing 1 changed file with 13 additions and 11 deletions.
diff --git a/src/ui/design-system/src/lib/Components/Dropdown/index.tsx b/src/ui/design-system/src/lib/Components/Dropdown/index.tsx
@@ -6,13 +6,16 @@ const BASE_CLASSES =
   'inline-flex items-center justify-center font-semibold text-center border transition duration-200 cursor-pointer';
 
 const VARIANTS = {
-  black: 'bg-black text-white hover:bg-gray-800 active:bg-gray-900',
-  white: 'bg-white text-black border border-gray-300 hover:bg-gray-100 active:bg-gray-200',
+  black: `
+    bg-black text-white border-transparent hover:bg-gray-800 active:bg-gray-900
+    dark:bg-white dark:text-black dark:hover:bg-gray-200 dark:active:bg-gray-300
+  `,
+  menu: `
+    bg-black text-white border border-gray-700 shadow-lg hover:bg-gray-800
+    dark:bg-white dark:text-black dark:border-gray-300 dark:hover:bg-gray-200
+  `,
 };
 
-const MENU_CLASSES =
-  'text-white bg-gray-900 border border-gray-600 shadow-lg dark:shadow-gray-800 hover:bg-gray-700 transition duration-200';
-
 export interface DropdownItem {
   label: string;
   onClick: () => void;
@@ -21,15 +24,14 @@ export interface DropdownItem {
 interface DropdownProps {
   buttonLabel: string;
   items: DropdownItem[];
-  buttonVariant?: 'black' | 'white';
 }
 
-const Dropdown: React.FC<DropdownProps> = ({ buttonLabel, items, buttonVariant = 'black' }) => {
+const Dropdown: React.FC<DropdownProps> = ({ buttonLabel, items }) => {
   return (
     <Menu as="div" className="relative inline-block text-left">
       {/* Button */}
       <MenuButton
-        className={clsx(BASE_CLASSES, VARIANTS[buttonVariant], 'px-4 py-2 rounded-md text-sm')}
+        className={clsx(BASE_CLASSES, VARIANTS.black, 'px-4 py-2 rounded-md text-sm')}
       >
         {buttonLabel}
       </MenuButton>
@@ -38,17 +40,17 @@ const Dropdown: React.FC<DropdownProps> = ({ buttonLabel, items, buttonVariant =
       <MenuItems
         anchor="bottom end"
         className="absolute right-0 mt-1 w-52 rounded-md shadow-lg focus:outline-none z-[999]"
-        style={{ position: 'absolute', zIndex: 999, top: '100%' }}
       >
         {items.map((item, index) => (
           <MenuItem key={`${index}${item.label}`}>
             {({ active }) => (
               <button
                 onClick={item.onClick}
                 className={clsx(
-                  MENU_CLASSES,
+                  VARIANTS.menu,
                   'w-full px-4 py-2 cursor-pointer',
-                  active && 'bg-gray-800',
+                  active &&
+                  'hover:bg-gray-800 dark:hover:bg-gray-200',
                   index === 0 && 'rounded-t-md',
                   index === items.length - 1 && 'rounded-b-md'
                 )}