feat: improve text styles for route book

penumbra-zone · Jan 15, 2025 · 7b8df48 · 7b8df48
1 parent 2e86544
commit 7b8df48
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 23 deletions.
diff --git a/src/pages/trade/ui/route-book/header-row.tsx b/src/pages/trade/ui/route-book/header-row.tsx
@@ -1,15 +1,25 @@
+import { Text } from '@penumbra-zone/ui/Text';
+
 export interface OrderBookHeaderProps {
   base: string;
   quote: string;
 }
 
 export const RouteBookHeader = ({ base, quote }: OrderBookHeaderProps) => {
   return (
-    <div className='grid grid-cols-subgrid col-span-4 text-xs text-gray-400 px-4 border-b border-b-other-tonalStroke'>
-      <div className='py-2 font-normal text-left'>Price({quote})</div>
-      <div className='py-2 font-normal text-right'>Amount({base})</div>
-      <div className='py-2 font-normal text-right'>Total</div>
-      <div className='py-2 font-normal text-right'>Route</div>
+    <div className='grid grid-cols-subgrid col-span-4 text-xs text-text-secondary px-4 border-b border-b-other-tonalStroke'>
+      <div className='py-2 text-left'>
+        <Text tableItemSmall>Price({quote})</Text>
+      </div>
+      <div className='py-2 text-right'>
+        <Text tableItemSmall>Amount({base})</Text>
+      </div>
+      <div className='py-2 text-right'>
+        <Text tableItemSmall>Total</Text>
+      </div>
+      <div className='py-2 text-right'>
+        <Text tableItemSmall>Route</Text>
+      </div>
     </div>
   );
 };
diff --git a/src/pages/trade/ui/route-book/spread-row.tsx b/src/pages/trade/ui/route-book/spread-row.tsx
@@ -1,3 +1,4 @@
+import { Text } from '@penumbra-zone/ui/Text';
 import type { Trace } from '@/shared/api/server/book/types';
 import { calculateSpread } from '../../model/trace';
 import { usePathSymbols } from '../../model/use-path';
@@ -19,12 +20,18 @@ export const SpreadRow = ({
 
   return (
     <div className='col-span-4 flex items-center h-full justify-center gap-2 px-3 py-3 text-xs border-b border-b-other-tonalStroke'>
-      <span className='text-green-400'>{formatNumber(spreadInfo.midPrice, 7)}</span>
-      <span className='text-gray-400'>Spread:</span>
-      <span className='text-white'>
+      <Text detailTechnical color='success.light'>
+        {formatNumber(spreadInfo.midPrice, 7)}
+      </Text>
+      <Text detailTechnical color='text.secondary'>
+        Spread:
+      </Text>
+      <Text detailTechnical color='text.primary'>
         {formatNumber(spreadInfo.amount, 6)} {pair.quoteSymbol}
-      </span>
-      <span className='text-gray-400'>({parseFloat(spreadInfo.percentage).toFixed(2)}%)</span>
+      </Text>
+      <Text detailTechnical color='text.secondary'>
+        ({parseFloat(spreadInfo.percentage).toFixed(2)}%)
+      </Text>
     </div>
   );
 };
diff --git a/src/pages/trade/ui/route-book/trade-row.tsx b/src/pages/trade/ui/route-book/trade-row.tsx
@@ -1,6 +1,7 @@
 import { Fragment } from 'react';
 import cn from 'clsx';
 import { ChevronRight } from 'lucide-react';
+import { Text } from '@penumbra-zone/ui/Text';
 import { Trace } from '@/shared/api/server/book/types.ts';
 import { getSymbolFromValueView } from '@penumbra-zone/getters/value-view';
 import { formatNumber } from './utils';
@@ -27,31 +28,39 @@ export const TradeRow = ({
       className={cn(
         'relative grid grid-cols-subgrid col-span-4 h-full items-center px-4 border-b border-border-faded',
         'after:hidden after:content-[""] after:absolute after:left-0 after:right-0 after:h-full after:bg-other-tonalFill5',
-        'group [&:hover>div:not(:last-child)]:invisible hover:after:block',
+        'group [&:hover>span:not(:last-child)]:invisible hover:after:block',
         'text-xs tabular-nums', // makes all numbers monospaced
       )}
     >
-      <div className={isSell ? 'text-red-400' : 'text-green-400'}>
+      <Text detailTechnical color={isSell ? 'destructive.light' : 'success.light'}>
         {formatNumber(trace.price, 7)}
-      </div>
-      <div className='text-right text-white'>{formatNumber(trace.amount, 6)}</div>
-      <div className='text-right text-white'>{formatNumber(trace.total, 6)}</div>
-      <div className='text-right'>
-        <span className={trace.hops.length === 0 ? 'text-white' : 'text-orange-400'}>
-          {trace.hops.length === 2 ? 'Direct' : `${trace.hops.length - 2} Hops`}
-        </span>
-      </div>
+      </Text>
+      <Text detailTechnical align='right' color='text.primary'>
+        {formatNumber(trace.amount, 6)}
+      </Text>
+      <Text detailTechnical align='right' color='text.primary'>
+        {formatNumber(trace.total, 6)}
+      </Text>
+      <Text
+        tableItemSmall
+        align='right'
+        color={trace.hops.length <= 2 ? 'text.primary' : 'text.special'}
+      >
+        {trace.hops.length === 2 ? 'Direct' : `${trace.hops.length - 2} Hops`}
+      </Text>
 
       {/* Route display that shows on hover */}
       <div
         className='hidden group-hover:flex justify-center absolute left-0 right-0 px-4 select-none z-30'
         style={{ visibility: 'visible' }}
       >
-        <div className='flex items-center gap-1 py-2 text-xs text-white'>
+        <div className='flex items-center gap-1 py-2 text-xs'>
           {tokens.map((token, index) => (
             <Fragment key={index}>
-              {index > 0 && <ChevronRight className='w-3 h-3 text-gray-400' />}
-              <span>{token}</span>
+              {index > 0 && <ChevronRight className='w-3 h-3 text-neutral-light' />}
+              <Text tableItemSmall color='text.primary'>
+                {token}
+              </Text>
             </Fragment>
           ))}
         </div>