fix: #107: improve pair selector styles

penumbra-zone · Nov 14, 2024 · ca600f4 · ca600f4
1 parent fa35a62
commit ca600f4
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 30 deletions.
diff --git a/app/v2.css b/app/v2.css
@@ -6,7 +6,7 @@ html,
 body {
   padding: 0;
   margin: 0;
-  background: #000;
+  background: #0D0D0D;
 }
 
 a {

diff --git a/src/pages/trade/ui/page.tsx b/src/pages/trade/ui/page.tsx
@@ -11,8 +11,8 @@ export const TradePage = () => {
     <div>
       <hr className='h-[1px] w-full border-t border-t-other-solidStroke' />
 
-      <div className='flex flex-col desktop:flex-row p-4 gap-4 border-b border-b-other-solidStroke'>
-        <div className='flex gap-2 h-8 overflow-hidden'>
+      <div className='flex flex-col items-center desktop:flex-row p-4 gap-4 border-b border-b-other-solidStroke'>
+        <div className='flex gap-2 h-8'>
           <PairSelector />
         </div>
         <Summary />

diff --git a/src/pages/trade/ui/pair-selector.tsx b/src/pages/trade/ui/pair-selector.tsx
@@ -16,6 +16,7 @@ import { useBalances } from '@/shared/api/balances';
 import { PagePath } from '@/shared/const/pages.ts';
 import { usePathToMetadata } from '../model/use-path.ts';
 import { Skeleton } from '@/shared/ui/skeleton';
+import { Density } from '@penumbra-zone/ui/Density';
 
 const handleRouting = ({
   router,
@@ -77,34 +78,36 @@ export const PairSelector = observer(({ disabled, dialogTitle }: PairSelectorPro
   }
 
   return (
-    <div className='flex gap-2'>
-      <AssetSelector
-        value={baseAsset}
-        assets={assets}
-        balances={balances}
-        disabled={disabled}
-        dialogTitle={dialogTitle}
-        onChange={val => handleRouting({ router, baseAsset: val, quoteAsset: quoteAsset })}
-      />
+    <Density compact>
+      <div className='flex gap-2'>
+        <AssetSelector
+          value={baseAsset}
+          assets={assets}
+          balances={balances}
+          disabled={disabled}
+          dialogTitle={dialogTitle}
+          onChange={val => handleRouting({router, baseAsset: val, quoteAsset: quoteAsset})}
+        />
 
-      <Button
-        priority='primary'
-        iconOnly
-        icon={ArrowLeftRight}
-        disabled={disabled}
-        onClick={() => handleRouting({ router, baseAsset: quoteAsset, quoteAsset: baseAsset })}
-      >
-        Swap
-      </Button>
+        <Button
+          priority='primary'
+          iconOnly
+          icon={ArrowLeftRight}
+          disabled={disabled}
+          onClick={() => handleRouting({router, baseAsset: quoteAsset, quoteAsset: baseAsset})}
+        >
+          Swap
+        </Button>
 
-      <AssetSelector
-        value={quoteAsset}
-        assets={assets}
-        balances={balances}
-        disabled={disabled}
-        dialogTitle={dialogTitle}
-        onChange={val => handleRouting({ router, baseAsset: baseAsset, quoteAsset: val })}
-      />
-    </div>
+        <AssetSelector
+          value={quoteAsset}
+          assets={assets}
+          balances={balances}
+          disabled={disabled}
+          dialogTitle={dialogTitle}
+          onChange={val => handleRouting({router, baseAsset: baseAsset, quoteAsset: val})}
+        />
+      </div>
+    </Density>
   );
 });