Fix button/dropdown dark mode issues (#1056)

* Button to white

* Fix variants

* Remove

---------

Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>

src/ui/design-system/src/lib/Components/Dropdown/index.tsx

@@ -4,9 +4,17 @@ import clsx from 'clsx';
 
 const BASE_CLASSES =
   'inline-flex items-center justify-center font-semibold text-center border transition duration-200 cursor-pointer';
-const VARIANT_CLASSES = 'bg-black text-white hover:bg-gray-800 active:bg-gray-900';
-const MENU_CLASSES =
-  'text-white bg-black border border-gray-700 hover:bg-gray-800 active:bg-gray-900 transition duration-200';
+
+const VARIANTS = {
+  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
+  `,
+};
 
 export interface DropdownItem {
   label: string;
@@ -23,7 +31,7 @@ const Dropdown: React.FC<DropdownProps> = ({ buttonLabel, items }) => {
     <Menu as="div" className="relative inline-block text-left">
       {/* Button */}
       <MenuButton
-        className={clsx(BASE_CLASSES, VARIANT_CLASSES, 'px-4 py-2 rounded-md text-sm')}
+        className={clsx(BASE_CLASSES, VARIANTS.black, 'px-4 py-2 rounded-md text-sm')}
       >
         {buttonLabel}
       </MenuButton>
@@ -32,17 +40,17 @@ const Dropdown: React.FC<DropdownProps> = ({ buttonLabel, items }) => {
       <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'
                 )}
@@ -57,4 +65,4 @@ const Dropdown: React.FC<DropdownProps> = ({ buttonLabel, items }) => {
   );
 };
 
-export default Dropdown;
+export default Dropdown;