From 27320d902d7bf8ca9494c7eed7f88e5174ee6d9e Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Tue, 17 Dec 2024 14:50:08 -0800
Subject: [PATCH] adjust styling

---
 src/buy/components/Buy.tsx            |  4 +++-
 src/buy/components/BuyAmountInput.tsx | 13 ++++++++++---
 src/buy/components/BuyButton.tsx      | 15 ++++++++++++---
 src/buy/components/BuyDropdown.tsx    |  4 ++--
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/buy/components/Buy.tsx b/src/buy/components/Buy.tsx
index 693ed6bfdb..302b16caef 100644
--- a/src/buy/components/Buy.tsx
+++ b/src/buy/components/Buy.tsx
@@ -1,5 +1,6 @@
 import { useOutsideClick } from '@/ui-react/internal/hooks/useOutsideClick';
 import { useRef } from 'react';
+import { useTheme } from '../../core-react/internal/hooks/useTheme';
 import { cn } from '../../styles/theme';
 import { FALLBACK_DEFAULT_MAX_SLIPPAGE } from '../../swap/constants';
 import type { BuyReact } from '../types';
@@ -10,6 +11,7 @@ import { BuyMessage } from './BuyMessage';
 import { BuyProvider, useBuyContext } from './BuyProvider';
 
 function BuyContent({ className }: { className?: string }) {
+  const componentTheme = useTheme();
   const { isDropdownOpen, setIsDropdownOpen } = useBuyContext();
   const buyContainerRef = useRef<HTMLDivElement>(null);
 
@@ -22,7 +24,7 @@ function BuyContent({ className }: { className?: string }) {
   return (
     <div
       ref={buyContainerRef}
-      className={cn('relative flex flex-col gap-2', className)}
+      className={cn('relative flex flex-col gap-2', componentTheme, className)}
     >
       <div className={cn('flex items-center gap-4', className)}>
         <BuyAmountInput />
diff --git a/src/buy/components/BuyAmountInput.tsx b/src/buy/components/BuyAmountInput.tsx
index e40e820ff0..7350145419 100644
--- a/src/buy/components/BuyAmountInput.tsx
+++ b/src/buy/components/BuyAmountInput.tsx
@@ -1,6 +1,6 @@
 import { isValidAmount } from '../../core/utils/isValidAmount';
 import { TextInput } from '../../internal/components/TextInput';
-import { cn, color } from '../../styles/theme';
+import { background, cn, color } from '../../styles/theme';
 import { formatAmount } from '../../swap/utils/formatAmount';
 import { TokenChip } from '../../token';
 import { useBuyContext } from './BuyProvider';
@@ -13,11 +13,18 @@ export function BuyAmountInput() {
   }
 
   return (
-    <div className="flex h-full items-center rounded-lg border px-4">
+    <div
+      className={cn(
+        'flex h-full items-center rounded-lg border px-4',
+        background.default,
+      )}
+    >
       <TextInput
         className={cn(
-          'mr-2 w-full border-[none] bg-transparent font-display',
+          'mr-2 w-full border-[none] font-display',
           'leading-none outline-none',
+          background.default,
+          color.foreground,
         )}
         placeholder="0.0"
         delayMs={1000}
diff --git a/src/buy/components/BuyButton.tsx b/src/buy/components/BuyButton.tsx
index 0592832077..1aed23cff4 100644
--- a/src/buy/components/BuyButton.tsx
+++ b/src/buy/components/BuyButton.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useMemo } from 'react';
 import { Spinner } from '../../internal/components/Spinner';
 import { checkmarkSvg } from '../../internal/svg/checkmarkSvg';
+import { closeSvg } from '../../internal/svg/closeSvg';
 import {
   background,
   border,
@@ -16,6 +17,7 @@ export function BuyButton() {
   const {
     address,
     setIsDropdownOpen,
+    isDropdownOpen,
     from,
     fromETH,
     fromUSDC,
@@ -33,15 +35,22 @@ export function BuyButton() {
   const isDisabled = !to?.amount || !to?.token || isLoading;
 
   const handleSubmit = useCallback(() => {
-    setIsDropdownOpen(true);
-  }, [setIsDropdownOpen]);
+    if (isDropdownOpen) {
+      setIsDropdownOpen(false);
+    } else {
+      setIsDropdownOpen(true);
+    }
+  }, [setIsDropdownOpen, isDropdownOpen]);
 
   const buttonContent = useMemo(() => {
     if (statusName === 'success') {
       return checkmarkSvg;
     }
+    if (isDropdownOpen) {
+      return closeSvg;
+    }
     return 'Buy';
-  }, [statusName]);
+  }, [statusName, isDropdownOpen]);
 
   if (!isDisabled && !address) {
     return <ConnectWallet text="Buy" className="h-12 w-24 min-w-24" />;
diff --git a/src/buy/components/BuyDropdown.tsx b/src/buy/components/BuyDropdown.tsx
index b195148d74..21c276060a 100644
--- a/src/buy/components/BuyDropdown.tsx
+++ b/src/buy/components/BuyDropdown.tsx
@@ -64,9 +64,9 @@ export function BuyDropdown() {
     <div
       className={cn(
         color.foreground,
-        background.alternate,
+        background.default,
         'absolute right-0 bottom-0 flex translate-y-[105%] flex-col gap-2',
-        'min-w-80 rounded p-2',
+        'border min-w-80 rounded p-2 rounded-lg',
       )}
     >
       <div className="px-2 pt-2">Buy with</div>