fix: Fund and Disconnect hover styling in mobile (#1211)

coinbase · Sep 5, 2024 · 5afc2be · 5afc2be
1 parent 63742da
commit 5afc2be
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/great-dolls-kiss.md b/.changeset/great-dolls-kiss.md
@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+-**fix**: fixed hover styling for the Fund and Disconnect wallet components during the mobile view. By @cpcramer #1211
diff --git a/playground/nextjs-app-router/components/demo/Swap.tsx b/playground/nextjs-app-router/components/demo/Swap.tsx
@@ -83,7 +83,7 @@ function SwapComponent() {
         </div>
       ) : null}
 
-      <Swap className="border bg-[#ffffff]" onStatus={handleOnStatus}>
+      <Swap className="border" onStatus={handleOnStatus}>
         <SwapAmountInput
           label="Sell"
           swappableTokens={swappableTokens}

diff --git a/src/wallet/components/WalletDropdownDisconnect.tsx b/src/wallet/components/WalletDropdownDisconnect.tsx
@@ -19,7 +19,7 @@ export function WalletDropdownDisconnect({
       type="button"
       className={cn(
         pressable.default,
-        'relative flex items-center px-4 pt-3 pb-4',
+        'relative flex w-full items-center px-4 pt-3 pb-4',
         className,
       )}
       onClick={handleDisconnect}

diff --git a/src/wallet/components/WalletDropdownFundLink.tsx b/src/wallet/components/WalletDropdownFundLink.tsx
@@ -46,7 +46,7 @@ export function WalletDropdownFundLink({
 
   const overrideClassName = cn(
     pressable.default,
-    'relative flex items-center px-4 py-3',
+    'relative flex items-center px-4 py-3 w-full',
     className,
   );