From bc8e95d9668679053a6af484ebaaf75059899ce4 Mon Sep 17 00:00:00 2001
From: Chase Fleming <1666730+chasefleming@users.noreply.github.com>
Date: Tue, 17 Dec 2024 14:31:27 -0800
Subject: [PATCH] Button to white

---
 src/components/connect-button.tsx                |  2 +-
 .../src/lib/Components/Dropdown/index.tsx        | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/connect-button.tsx b/src/components/connect-button.tsx
index 7b2ceed8f6..cab9e6c511 100644
--- a/src/components/connect-button.tsx
+++ b/src/components/connect-button.tsx
@@ -28,7 +28,7 @@ const ConnectButton: React.FC = () => {
   const fullAddress = user.addr ?? 'Unknown';
   const displayAddress = shortenAddress(fullAddress, isMobile);
 
-  return <Dropdown buttonLabel={displayAddress} items={dropdownItems} />;
+  return <Dropdown buttonLabel={displayAddress} items={dropdownItems} buttonVariant="white" />;
 };
 
 export default ConnectButton;
diff --git a/src/ui/design-system/src/lib/Components/Dropdown/index.tsx b/src/ui/design-system/src/lib/Components/Dropdown/index.tsx
index 2cb9a30490..f542bd9a20 100644
--- a/src/ui/design-system/src/lib/Components/Dropdown/index.tsx
+++ b/src/ui/design-system/src/lib/Components/Dropdown/index.tsx
@@ -4,9 +4,14 @@ 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 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',
+};
+
 const MENU_CLASSES =
-  'text-white bg-black border border-gray-700 hover:bg-gray-800 active:bg-gray-900 transition duration-200';
+  '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;
@@ -16,14 +21,15 @@ export interface DropdownItem {
 interface DropdownProps {
   buttonLabel: string;
   items: DropdownItem[];
+  buttonVariant?: 'black' | 'white';
 }
 
-const Dropdown: React.FC<DropdownProps> = ({ buttonLabel, items }) => {
+const Dropdown: React.FC<DropdownProps> = ({ buttonLabel, items, buttonVariant = 'black' }) => {
   return (
     <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[buttonVariant], 'px-4 py-2 rounded-md text-sm')}
       >
         {buttonLabel}
       </MenuButton>
@@ -57,4 +63,4 @@ const Dropdown: React.FC<DropdownProps> = ({ buttonLabel, items }) => {
   );
 };
 
-export default Dropdown;
\ No newline at end of file
+export default Dropdown;