feat: update swap style (#553)

coinbase · Jun 13, 2024 · b51ce9b · b51ce9b
1 parent 2b13360
commit b51ce9b
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 66 deletions.
diff --git a/src/internal/text/TextHeadline.tsx b/src/internal/text/TextHeadline.tsx
@@ -2,11 +2,14 @@ import type { ReactNode } from 'react';
 
 type TextHeadlineReact = {
   children: ReactNode;
+  color?: string;
 };
 
-export function TextHeadline({ children }: TextHeadlineReact) {
+export function TextHeadline({ children, color = 'black' }: TextHeadlineReact) {
   return (
-    <span className="text-[#0A0B0D] text-base text-bold text-sans leading-normal">
+    <span
+      className={`text-${color} text-base text-bold text-sans leading-normal`}
+    >
       {children}
     </span>
   );

diff --git a/src/internal/text/TextLabel1.tsx b/src/internal/text/TextLabel1.tsx
@@ -2,12 +2,13 @@ import type { ReactNode } from 'react';
 
 type TextLabel1React = {
   children: ReactNode;
+  color?: string;
 };
 
 /* istanbul ignore next */
-export function TextLabel1({ children }: TextLabel1React) {
+export function TextLabel1({ children, color = '#0A0B0D' }: TextLabel1React) {
   return (
-    <span className="text-[#0A0B0D] text-bold text-sans text-sm leading-5">
+    <span className={`text-[${color}] text-bold text-sans text-sm leading-5`}>
       {children}
     </span>
   );

diff --git a/src/internal/text/TextLabel2.tsx b/src/internal/text/TextLabel2.tsx
@@ -2,12 +2,13 @@ import type { ReactNode } from 'react';
 
 type TextLabel2React = {
   children: ReactNode;
+  color?: string;
 };
 
 /* istanbul ignore next */
-export function TextLabel2({ children }: TextLabel2React) {
+export function TextLabel2({ children, color = 'gray-500' }: TextLabel2React) {
   return (
-    <span className="text-[#0A0B0D] text-sans text-sm leading-5">
+    <span className={`text-${color} text-sans text-sm leading-5`}>
       {children}
     </span>
   );

diff --git a/src/internal/text/index.ts b/src/internal/text/index.ts
@@ -1,2 +1,4 @@
 export { TextBody } from './TextBody';
 export { TextHeadline } from './TextHeadline';
+export { TextLabel1 } from './TextLabel1';
+export { TextLabel2 } from './TextLabel2';
diff --git a/src/swap/components/Swap.tsx b/src/swap/components/Swap.tsx
@@ -1,11 +1,10 @@
-import { useCallback, useMemo, useState } from 'react';
-import { cn } from '../../utils/cn';
+import type { SwapError, SwapReact } from '../types';
+import type { Token } from '../../token';
 import { SwapContext } from '../context';
-import { getSwapQuote } from '../core/getSwapQuote';
 import { formatTokenAmount } from '../../utils/formatTokenAmount';
+import { getSwapQuote } from '../core/getSwapQuote';
 import { isSwapError } from '../core/isSwapError';
-import type { SwapError, SwapReact } from '../types';
-import type { Token } from '../../token';
+import { useCallback, useMemo, useState } from 'react';
 
 export function Swap({ address, children, onError }: SwapReact) {
   const [fromAmount, setFromAmount] = useState('');
@@ -100,13 +99,8 @@ export function Swap({ address, children, onError }: SwapReact) {
 
   return (
     <SwapContext.Provider value={value}>
-      <div className="flex w-[400px] flex-col rounded-xl bg-white">
-        <label
-          className={cn(
-            'box-border w-full border-b border-solid p-4 text-base',
-            'font-semibold text-[#030712] leading-6',
-          )}
-        >
+      <div className="flex w-[400px] flex-col rounded-xl bg-gray-100 pt-6 pb-4 px-6">
+        <label className="text-base font-semibold text-[#030712] leading-6 mb-4">
           Swap
         </label>
         {children}

diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx
@@ -1,13 +1,14 @@
 import { useCallback, useContext, useEffect, useMemo } from 'react';
 
-import { isValidAmount } from '../../utils/isValidAmount';
-import { getRoundedAmount } from '../../utils/getRoundedAmount';
+import type { SwapAmountInputReact } from '../types';
+import type { UseBalanceReturnType } from 'wagmi';
+import { SwapContext } from '../context';
+import { TextLabel1, TextLabel2 } from '../../internal/text';
 import { TokenChip } from '../../token';
 import { cn } from '../../utils/cn';
-import { SwapContext } from '../context';
+import { getRoundedAmount } from '../../utils/getRoundedAmount';
+import { isValidAmount } from '../../utils/isValidAmount';
 import { useBalance } from 'wagmi';
-import type { UseBalanceReturnType } from 'wagmi';
-import type { SwapAmountInputReact } from '../types';
 
 export function SwapAmountInput({ label, token, type }: SwapAmountInputReact) {
   const {
@@ -77,40 +78,41 @@ export function SwapAmountInput({ label, token, type }: SwapAmountInputReact) {
     <div
       className={cn(
         'box-border flex w-full flex-col items-start',
-        'gap-[11px] border-b border-solid bg-[#FFF] p-4',
+        'border-b border-solid bg-[#E5E7EB] p-4 rounded-md my-0.5',
       )}
       data-testid="ockSwapAmountInput_Container"
     >
       <div className="flex w-full items-center justify-between">
-        <label className="font-semibold text-[#030712] text-sm">{label}</label>
-        {roundedBalance && (
-          <label className="font-normal text-gray-400 text-sm">{`Balance: ${roundedBalance}`}</label>
-        )}
+        <TextLabel2>{label}</TextLabel2>
       </div>
       <div className="flex w-full items-center justify-between">
+        <input
+          className="w-full border-[none] bg-transparent text-5xl text-gray-500 outline-none"
+          data-testid="ockSwapAmountInput_Input"
+          onChange={handleAmountChange}
+          placeholder="0.0"
+          value={amount}
+        />
         <TokenChip token={token} />
-        {type === 'from' && (
-          <button
-            className={cn(
-              'flex h-8 w-[58px] max-w-[200px] items-center rounded-[40px]',
-              'bg-gray-100 px-3 py-2 font-medium text-base',
-              'text-gray-500 not-italic leading-6',
-            )}
-            data-testid="ockSwapAmountInput_MaxButton"
-            disabled={roundedBalance === undefined}
-            onClick={handleMaxButtonClick}
-          >
-            Max
-          </button>
-        )}
       </div>
-      <input
-        className="w-full border-[none] bg-transparent text-5xl text-[black]"
-        data-testid="ockSwapAmountInput_Input"
-        onChange={handleAmountChange}
-        placeholder="0"
-        value={amount}
-      />
+      <div className="flex justify-between w-full mt-4">
+        <TextLabel2>~$0.0</TextLabel2>
+        <div>
+          {roundedBalance && (
+            <TextLabel2>{`Balance: ${roundedBalance}`}</TextLabel2>
+          )}
+          {type === 'from' && (
+            <button
+              className="flex py-1 px-2 items-center justify-center cursor-pointer"
+              data-testid="ockSwapAmountInput_MaxButton"
+              disabled={roundedBalance === undefined}
+              onClick={handleMaxButtonClick}
+            >
+              <TextLabel1 color="#4F46E5">Max</TextLabel1>
+            </button>
+          )}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/swap/components/SwapButton.tsx b/src/swap/components/SwapButton.tsx
@@ -1,9 +1,10 @@
-import { useCallback, useContext } from 'react';
-import { cn } from '../../utils/cn';
+import type { SwapButtonReact, SwapError } from '../types';
+import { SwapContext } from '../context';
+import { TextHeadline } from '../../internal/text';
 import { buildSwapTransaction } from '../core/buildSwapTransaction';
+import { cn } from '../../utils/cn';
 import { isSwapError } from '../core/isSwapError';
-import { SwapContext } from '../context';
-import type { SwapButtonReact, SwapError } from '../types';
+import { useCallback, useContext } from 'react';
 
 export function SwapButton({ onError, onSubmit }: SwapButtonReact) {
   const { address, fromAmount, fromToken, toToken } = useContext(SwapContext);
@@ -29,17 +30,15 @@ export function SwapButton({ onError, onSubmit }: SwapButtonReact) {
   }, [address, fromAmount, fromToken, toToken]);
 
   return (
-    <div className="w-full p-4">
-      <button
-        className={cn(
-          'w-full rounded-[100px] bg-blue-700',
-          'px-4 py-3 font-medium text-base text-white leading-6',
-        )}
-        onClick={handleSubmit}
-        disabled={!fromAmount || !fromToken || !toToken}
-      >
-        Swap
-      </button>
-    </div>
+    <button
+      className={cn(
+        'w-full rounded-xl bg-indigo-600',
+        'px-4 py-3 font-medium text-base text-white leading-6 mt-4',
+      )}
+      onClick={handleSubmit}
+      disabled={!fromAmount || !fromToken || !toToken}
+    >
+      <TextHeadline color="white">Swap</TextHeadline>
+    </button>
   );
 }
diff --git a/src/token/components/TokenChip.tsx b/src/token/components/TokenChip.tsx
@@ -11,7 +11,7 @@ export function TokenChip({ token, onClick }: TokenChipReact) {
   return (
     <button
       data-testid="ockTokenChip_Button"
-      className="flex w-fit items-center rounded-2xl bg-[#eef0f3] py-1 pr-3 pl-1 hover:active:bg-[#bfc1c3] hover:bg-[#cacbce]"
+      className="flex w-fit items-center rounded-2xl bg-[#eef0f3] py-1 pr-3 pl-1 hover:active:bg-[#bfc1c3] hover:bg-[#cacbce] shrink-0 shadow-[0px_8px_12px_0px_#5B616E1F] "
       onClick={() => onClick?.(token)}
     >
       <img className="mr-2 h-6 w-6" src={token.image || ''} />