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>