chore: Improve WalletModal UI (coinbase#1687)

xmtp · Dec 3, 2024 · 9f86d2a · 9f86d2a
1 parent 425fce5
commit 9f86d2a
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 40 deletions.
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -7,14 +7,14 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 export const text = {
-  body: 'ock-font-family font-normal leading-normal',
-  caption: 'ock-font-family font-semibold text-xs leading-4',
-  headline: 'ock-font-family font-semibold leading-normal',
-  label1: 'ock-font-family font-semibold text-sm leading-5',
-  label2: 'ock-font-family text-sm leading-5',
-  legal: 'ock-font-family text-xs leading-4',
-  title1: 'ock-font-family font-semibold text-2xl leading-9',
-  title3: 'ock-font-family font-semibold text-xl leading-7',
+  body: 'ock-font-family font-normal text-base',
+  caption: 'ock-font-family font-semibold text-xs',
+  headline: 'ock-font-family font-semibold',
+  label1: 'ock-font-family font-semibold text-sm',
+  label2: 'ock-font-family text-sm',
+  legal: 'ock-font-family text-xs',
+  title1: 'ock-font-family font-semibold text-2xl',
+  title3: 'ock-font-family font-semibold text-xl',
 } as const;
 
 export const pressable = {

diff --git a/src/swap/components/SwapSettingsSlippageDescription.test.tsx b/src/swap/components/SwapSettingsSlippageDescription.test.tsx
@@ -27,7 +27,7 @@ describe('SwapSettingsSlippageDescription', () => {
     );
     const paragraph = screen.getByText('Test');
     expect(paragraph.className).toContain(
-      'ock-font-family text-xs leading-4 ock-text-foreground-muted mb-2 ',
+      'ock-font-family text-xs ock-text-foreground-muted mb-2 ',
     );
   });
 
@@ -40,7 +40,7 @@ describe('SwapSettingsSlippageDescription', () => {
     const paragraph = screen.getByText('Test');
     expect(paragraph.className).toContain('custom-class');
     expect(paragraph.className).toContain(
-      'ock-font-family text-xs leading-4 ock-text-foreground-muted mb-2 custom-class',
+      'ock-font-family text-xs ock-text-foreground-muted mb-2 custom-class',
     );
   });
 

diff --git a/src/swap/components/SwapSettingsSlippageInput.test.tsx b/src/swap/components/SwapSettingsSlippageInput.test.tsx
@@ -117,10 +117,10 @@ describe('SwapSettingsSlippageInput', () => {
   it('applies correct styles in Auto mode', () => {
     render(<SwapSettingsSlippageInput />);
     expect(screen.getByRole('button', { name: 'Auto' })).toHaveClass(
-      'cursor-pointer ock-bg-default active:bg-[var(--ock-bg-default-active)] hover:bg-[var(--ock-bg-default-hover)] ock-text-foreground ock-font-family font-semibold text-sm leading-5 ock-border-radius-inner flex-1 px-3 py-1 transition-colors ock-bg-inverse ock-text-primary ock-shadow-default',
+      'cursor-pointer ock-bg-default active:bg-[var(--ock-bg-default-active)] hover:bg-[var(--ock-bg-default-hover)] ock-text-foreground ock-font-family font-semibold text-sm ock-border-radius-inner flex-1 px-3 py-1 transition-colors ock-bg-inverse ock-text-primary ock-shadow-default',
     );
     expect(screen.getByRole('button', { name: 'Custom' })).toHaveClass(
-      'cursor-pointer ock-bg-default active:bg-[var(--ock-bg-default-active)] hover:bg-[var(--ock-bg-default-hover)] ock-text-foreground ock-font-family font-semibold text-sm leading-5 ock-border-radius-inner flex-1 px-3 py-1 transition-colors ock-text-foreground-muted',
+      'cursor-pointer ock-bg-default active:bg-[var(--ock-bg-default-active)] hover:bg-[var(--ock-bg-default-hover)] ock-text-foreground ock-font-family font-semibold text-sm ock-border-radius-inner flex-1 px-3 py-1 transition-colors ock-text-foreground-muted',
     );
     expect(screen.getByRole('textbox').parentElement).toHaveClass('opacity-50');
   });
@@ -129,10 +129,10 @@ describe('SwapSettingsSlippageInput', () => {
     render(<SwapSettingsSlippageInput />);
     fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
     expect(screen.getByRole('button', { name: 'Auto' })).toHaveClass(
-      'cursor-pointer ock-bg-default active:bg-[var(--ock-bg-default-active)] hover:bg-[var(--ock-bg-default-hover)] ock-text-foreground ock-font-family font-semibold text-sm leading-5 ock-border-radius-inner flex-1 px-3 py-1 transition-colors ock-text-foreground-muted',
+      'cursor-pointer ock-bg-default active:bg-[var(--ock-bg-default-active)] hover:bg-[var(--ock-bg-default-hover)] ock-text-foreground ock-font-family font-semibold text-sm ock-border-radius-inner flex-1 px-3 py-1 transition-colors ock-text-foreground-muted',
     );
     expect(screen.getByRole('button', { name: 'Custom' })).toHaveClass(
-      'cursor-pointer ock-bg-default active:bg-[var(--ock-bg-default-active)] hover:bg-[var(--ock-bg-default-hover)] ock-text-foreground ock-font-family font-semibold text-sm leading-5 ock-border-radius-inner flex-1 px-3 py-1 transition-colors ock-bg-inverse ock-text-primary ock-shadow-default',
+      'cursor-pointer ock-bg-default active:bg-[var(--ock-bg-default-active)] hover:bg-[var(--ock-bg-default-hover)] ock-text-foreground ock-font-family font-semibold text-sm ock-border-radius-inner flex-1 px-3 py-1 transition-colors ock-bg-inverse ock-text-primary ock-shadow-default',
     );
     expect(screen.getByRole('textbox').parentElement).not.toHaveClass(
       'opacity-50',

diff --git a/src/transaction/hooks/useGetTransactionStatusAction.test.tsx b/src/transaction/hooks/useGetTransactionStatusAction.test.tsx
@@ -47,7 +47,7 @@ describe('useGetTransactionStatusAction', () => {
           target="_blank"
         >
           <span
-            className="ock-font-family font-semibold text-sm leading-5 ock-text-primary"
+            className="ock-font-family font-semibold text-sm ock-text-primary"
           >
             View transaction
           </span>

diff --git a/src/transaction/hooks/useGetTransactionToastAction.test.tsx b/src/transaction/hooks/useGetTransactionToastAction.test.tsx
@@ -47,7 +47,7 @@ describe('useGetTransactionToastAction', () => {
           target="_blank"
         >
           <span
-            className="ock-font-family font-semibold text-sm leading-5 ock-text-primary"
+            className="ock-font-family font-semibold text-sm ock-text-primary"
           >
             View transaction
           </span>
@@ -86,7 +86,7 @@ describe('useGetTransactionToastAction', () => {
           target="_blank"
         >
           <span
-            className="ock-font-family font-semibold text-sm leading-5 ock-text-primary"
+            className="ock-font-family font-semibold text-sm ock-text-primary"
           >
             View transaction
           </span>
@@ -147,7 +147,7 @@ describe('useGetTransactionToastAction', () => {
         target="_blank"
       >
         <span
-          className="ock-font-family font-semibold text-sm leading-5 ock-text-primary"
+          className="ock-font-family font-semibold text-sm ock-text-primary"
         >
           View transaction
         </span>

diff --git a/src/wallet/components/WalletModal.tsx b/src/wallet/components/WalletModal.tsx
@@ -161,7 +161,7 @@ export function WalletModal({
           border.radius,
           background.default,
           'w-[323px] p-6 pb-4',
-          'flex flex-col gap-4',
+          'flex flex-col items-center gap-4',
           'relative',
           '-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2',
           'transition-opacity duration-200',
@@ -176,24 +176,22 @@ export function WalletModal({
           type="button"
           onClick={onClose}
           className={cn(
+            pressable.default,
+            border.radius,
+            border.default,
             'absolute top-4 right-4',
-            'flex items-center justify-center',
-            'h-3 w-3',
+            'flex items-center justify-center p-1',
+            'transition-colors duration-200',
           )}
           aria-label="Close modal"
         >
-          <div
-            className={cn(
-              'relative h-full w-full transition-colors',
-              '[&>svg>path]:hover:fill-[var(--ock-icon-color-foreground-muted)]',
-            )}
-          >
+          <div className={cn('flex h-4 w-4 items-center justify-center')}>
             {closeSvg}
           </div>
         </button>
 
         {(appLogo || appName) && (
-          <div className="mt-3 flex w-[275px] flex-col items-center gap-3 self-stretch p-2">
+          <div className="flex w-full flex-col items-center gap-3 p-2">
             {appLogo && (
               <div className={cn(border.radius, 'h-14 w-14 overflow-hidden')}>
                 <img
@@ -204,7 +202,11 @@ export function WalletModal({
               </div>
             )}
             {appName && (
-              <h2 className={cn(text.headline, color.foreground)}>{appName}</h2>
+              <h2
+                className={cn(text.headline, color.foreground, 'text-center')}
+              >
+                {appName}
+              </h2>
             )}
           </div>
         )}
@@ -215,11 +217,10 @@ export function WalletModal({
             onClick={handleCoinbaseWalletConnection}
             className={cn(
               border.radiusInner,
-              border.lineDefault,
-              text.label2,
+              text.body,
               pressable.alternate,
               color.foreground,
-              'h-10 w-[275px] px-4 py-2.5',
+              'h-10 w-[275px] px-4 py-3',
               'flex items-center justify-between text-left',
             )}
           >
@@ -251,13 +252,11 @@ export function WalletModal({
             type="button"
             onClick={handleCoinbaseWalletConnection}
             className={cn(
-              border.default,
               border.radiusInner,
-              border.lineDefault,
-              text.label2,
+              text.body,
               pressable.alternate,
               color.foreground,
-              'h-10 w-[275px] px-4 py-2.5',
+              'h-10 w-[275px] px-4 py-3',
               'flex items-center justify-between text-left',
             )}
           >
@@ -270,11 +269,10 @@ export function WalletModal({
             onClick={handleWalletConnectConnector}
             className={cn(
               border.radiusInner,
-              border.lineDefault,
-              text.label2,
+              text.body,
               pressable.alternate,
               color.foreground,
-              'flex h-[40px] w-[275px] px-4 py-2.5',
+              'flex h-[40px] w-[275px] px-4 py-3',
               'items-center justify-between text-left',
             )}
           >
@@ -288,7 +286,7 @@ export function WalletModal({
             color.foregroundMuted,
             text.legal,
             'flex flex-col items-center justify-center gap-1 px-4',
-            'mt-4 w-[275px] text-center leading-3',
+            'mt-4 w-[275px] text-center',
           )}
         >
           <span className="font-normal text-[10px] leading-[13px]">