fix: padding in route book

penumbra-zone · Dec 8, 2024 · 03e9068 · 03e9068
1 parent e031206
commit 03e9068
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/pages/trade/ui/route-book.tsx b/src/pages/trade/ui/route-book.tsx
@@ -49,10 +49,10 @@ const RouteBookData = observer(({ bookData }: { bookData?: RouteBookResponse })
     <table className='w-full'>
       <thead>
         <tr className='text-xs text-gray-400'>
-          <th className='py-2 font-normal text-left'>Price({pair.quoteSymbol})</th>
-          <th className='py-2 font-normal text-right'>Amount({pair.baseSymbol})</th>
-          <th className='py-2 font-normal text-right'>Total</th>
-          <th className='py-2 font-normal text-right'>Route</th>
+          <th className='px-4 py-2 font-normal text-left'>Price({pair.quoteSymbol})</th>
+          <th className='px-4 py-2 font-normal text-right'>Amount({pair.baseSymbol})</th>
+          <th className='px-4 py-2 font-normal text-right'>Total</th>
+          <th className='px-4 py-2 font-normal text-right'>Route</th>
         </tr>
       </thead>
 

diff --git a/src/pages/trade/ui/trade-row.tsx b/src/pages/trade/ui/trade-row.tsx
@@ -30,10 +30,12 @@ export const TradeRow = ({
         backgroundImage: `linear-gradient(to right, ${bgColor} ${relativeSize}%, transparent ${relativeSize}%)`,
       }}
     >
-      <td className={`${isSell ? 'text-red-400' : 'text-green-400'} text-xs`}>{paddedPrice}</td>
-      <td className='text-xs text-right text-white'>{trace.amount}</td>
-      <td className='text-xs text-right text-white'>{trace.total}</td>
-      <td className='text-xs text-right'>
+      <td className={`${isSell ? 'text-red-400' : 'text-green-400'} px-4 text-xs`}>
+        {paddedPrice}
+      </td>
+      <td className='text-xs px-4 text-right text-white'>{trace.amount}</td>
+      <td className='text-xs px-4 text-right text-white'>{trace.total}</td>
+      <td className='text-xs px-4 text-right'>
         <HopCount count={trace.hops.length} />
       </td>