From 4ce84563ae6d649d8d887e4ee52c263cfaac4710 Mon Sep 17 00:00:00 2001
From: Paul Cramer <paulccramer@gmail.com>
Date: Mon, 2 Sep 2024 21:59:48 -0700
Subject: [PATCH] refactor css

---
 .../SwapSettingsSlippageLayout.test.tsx       | 58 ++-----------------
 .../components/SwapSettingsSlippageLayout.tsx |  8 ++-
 ...SettingsSlippageLayoutBottomSheet.test.tsx |  7 ++-
 .../SwapSettingsSlippageLayoutBottomSheet.tsx | 24 ++++++--
 4 files changed, 33 insertions(+), 64 deletions(-)

diff --git a/src/swap/components/SwapSettingsSlippageLayout.test.tsx b/src/swap/components/SwapSettingsSlippageLayout.test.tsx
index b1ab9b10f..3723f45b8 100644
--- a/src/swap/components/SwapSettingsSlippageLayout.test.tsx
+++ b/src/swap/components/SwapSettingsSlippageLayout.test.tsx
@@ -24,8 +24,11 @@ vi.mock('./SwapSettingsSlippageInput', () => ({
   SwapSettingsSlippageInput: () => <div data-testid="mock-input">Input</div>,
 }));
 
-vi.mock('../../styles/theme', () => ({
-  cn: (...args: string[]) => args.join(' '),
+vi.mock('../styles/theme', () => ({
+  cn: (...args) => args.join(' '),
+  background: { default: 'bg-default' },
+  border: { default: 'border-default' },
+  pressable: { shadow: 'pressable-shadow' },
 }));
 
 describe('SwapSettingsSlippageLayout', () => {
@@ -46,55 +49,4 @@ describe('SwapSettingsSlippageLayout', () => {
     expect(screen.getByTestId('mock-description')).toBeInTheDocument();
     expect(screen.getByTestId('mock-input')).toBeInTheDocument();
   });
-
-  it('renders with only some child components', () => {
-    render(
-      <SwapSettingsSlippageLayout>
-        <SwapSettingsSlippageTitle>Title</SwapSettingsSlippageTitle>
-      </SwapSettingsSlippageLayout>,
-    );
-    expect(
-      screen.getByTestId('ockSwapSettingsLayout_container'),
-    ).toBeInTheDocument();
-    expect(screen.getByTestId('mock-title')).toBeInTheDocument();
-    expect(screen.queryByTestId('mock-description')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('mock-input')).not.toBeInTheDocument();
-  });
-
-  it('applies custom className', () => {
-    render(
-      <SwapSettingsSlippageLayout className="custom-class">
-        <SwapSettingsSlippageTitle>Title</SwapSettingsSlippageTitle>
-      </SwapSettingsSlippageLayout>,
-    );
-    const container = screen.getByTestId('ockSwapSettingsLayout_container');
-    expect(container.className).toContain('custom-class');
-  });
-
-  it('renders without any child components', () => {
-    render(<SwapSettingsSlippageLayout />);
-    expect(
-      screen.getByTestId('ockSwapSettingsLayout_container'),
-    ).toBeInTheDocument();
-    expect(screen.queryByTestId('mock-title')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('mock-description')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('mock-toggle')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('mock-input')).not.toBeInTheDocument();
-  });
-
-  it('renders with correct layout structure', () => {
-    render(
-      <SwapSettingsSlippageLayout>
-        <SwapSettingsSlippageTitle>Title</SwapSettingsSlippageTitle>
-        <SwapSettingsSlippageDescription>
-          Description
-        </SwapSettingsSlippageDescription>
-        <SwapSettingsSlippageInput />
-      </SwapSettingsSlippageLayout>,
-    );
-    const container = screen.getByTestId('ockSwapSettingsLayout_container');
-    expect(container.children[0]).toHaveTextContent('Title');
-    expect(container.children[1]).toHaveTextContent('Description');
-    expect(container.children[2].children[0]).toHaveTextContent('Input');
-  });
 });
diff --git a/src/swap/components/SwapSettingsSlippageLayout.tsx b/src/swap/components/SwapSettingsSlippageLayout.tsx
index fd0f4d31c..5a31cb979 100644
--- a/src/swap/components/SwapSettingsSlippageLayout.tsx
+++ b/src/swap/components/SwapSettingsSlippageLayout.tsx
@@ -1,6 +1,6 @@
 import { Children, useMemo } from 'react';
 import { findComponent } from '../../internal/utils/findComponent';
-import { cn } from '../../styles/theme';
+import { background, border, cn, pressable } from '../../styles/theme';
 import type { SwapSettingsSlippageLayoutReact } from '../types';
 import { SwapSettingsSlippageDescription } from './SwapSettingsSlippageDescription';
 import { SwapSettingsSlippageInput } from './SwapSettingsSlippageInput';
@@ -24,8 +24,10 @@ export function SwapSettingsSlippageLayout({
   return (
     <div
       className={cn(
-        'right-0 z-10 w-[21.75rem] rounded-lg border border-gray-300 bg-gray-50',
-        'px-3 py-3 shadow-lg dark:border-gray-700 dark:bg-gray-950',
+        background.default,
+        border.default,
+        pressable.shadow,
+        'right-0 z-10 w-[21.75rem] rounded-lg px-3 py-3',
         className,
       )}
       data-testid="ockSwapSettingsLayout_container"
diff --git a/src/swap/components/SwapSettingsSlippageLayoutBottomSheet.test.tsx b/src/swap/components/SwapSettingsSlippageLayoutBottomSheet.test.tsx
index b785774d9..f0e359d28 100644
--- a/src/swap/components/SwapSettingsSlippageLayoutBottomSheet.test.tsx
+++ b/src/swap/components/SwapSettingsSlippageLayoutBottomSheet.test.tsx
@@ -24,8 +24,11 @@ vi.mock('./SwapSettingsSlippageInput', () => ({
   SwapSettingsSlippageInput: () => <div data-testid="mock-input">Input</div>,
 }));
 
-vi.mock('../../styles/theme', () => ({
-  cn: (...args: string[]) => args.join(' '),
+vi.mock('../styles/theme', () => ({
+  cn: (...args) => args.join(' '),
+  background: { default: 'bg-default' },
+  border: { default: 'border-default' },
+  pressable: { shadow: 'pressable-shadow' },
 }));
 
 describe('SwapSettingsSlippageLayoutBottomSheet', () => {
diff --git a/src/swap/components/SwapSettingsSlippageLayoutBottomSheet.tsx b/src/swap/components/SwapSettingsSlippageLayoutBottomSheet.tsx
index 03e19b3c0..b05fe3614 100644
--- a/src/swap/components/SwapSettingsSlippageLayoutBottomSheet.tsx
+++ b/src/swap/components/SwapSettingsSlippageLayoutBottomSheet.tsx
@@ -1,6 +1,6 @@
 import { Children, useMemo } from 'react';
 import { findComponent } from '../../internal/utils/findComponent';
-import { cn } from '../../styles/theme';
+import { background, border, cn, color, pressable } from '../../styles/theme';
 import type { SwapSettingsSlippageLayoutReact } from '../types';
 import { SwapSettingsSlippageDescription } from './SwapSettingsSlippageDescription';
 import { SwapSettingsSlippageInput } from './SwapSettingsSlippageInput';
@@ -24,15 +24,22 @@ export function SwapSettingsSlippageLayoutBottomSheet({
   return (
     <div
       className={cn(
-        'right-0 z-10 h-full w-full rounded-t-lg border border-gray-300 bg-gray-50',
-        'px-3 pt-2 pb-3 shadow-lg dark:border-gray-700 dark:bg-gray-950',
+        background.default,
+        border.default,
+        pressable.shadow,
+        'right-0 z-10 h-full w-full rounded-t-lg px-3 pt-2 pb-3',
         className,
       )}
       data-testid="ockSwapSettingsLayout_container"
     >
-      <div className="mx-auto mb-2 h-1 w-4 rounded-[6.25rem] bg-slate-200 dark:bg-gray-700" />
+      <div
+        className={cn(
+          background.alternate,
+          'mx-auto mb-2 h-1 w-4 rounded-[6.25rem]',
+        )}
+      />
       <div className="mb-4 flex items-center justify-center">
-        <h2 className="font-bold text-sm">Settings</h2>
+        <h2 className={cn(color.foreground, 'font-bold text-sm')}>Settings</h2>
       </div>
 
       <div className="flex flex-col">
@@ -41,7 +48,12 @@ export function SwapSettingsSlippageLayoutBottomSheet({
         {input && <div className="flex-grow">{input}</div>}
       </div>
       <div className="mt-4 flex justify-center">
-        <div className="h-1 w-28 shrink-0 rounded-[0.43931rem] bg-zinc-950 dark:bg-gray-700" />
+        <div
+          className={cn(
+            background.inverse,
+            'h-1 w-28 shrink-0 rounded-[0.43931rem]',
+          )}
+        />
       </div>
     </div>
   );