refactor css

coinbase · Sep 3, 2024 · 4ce8456 · 4ce8456
1 parent afdffd7
commit 4ce8456
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 64 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
  );