From 4fb2bb305a45de7be12bd84a645981a9f254171f Mon Sep 17 00:00:00 2001
From: Atris <vacekj@outlook.com>
Date: Sat, 9 Nov 2024 22:57:36 +0100
Subject: [PATCH] fix: address pr feedback

---
 src/pages/trade/ui/route-book.tsx | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/pages/trade/ui/route-book.tsx b/src/pages/trade/ui/route-book.tsx
index b85cdb7..c856cfc 100644
--- a/src/pages/trade/ui/route-book.tsx
+++ b/src/pages/trade/ui/route-book.tsx
@@ -10,10 +10,18 @@ import { Tabs } from '@penumbra-zone/ui/Tabs';
 
 const SELL_BG_COLOR = 'rgba(175, 38, 38, 0.24)';
 const BUY_BG_COLOR = 'rgba(28, 121, 63, 0.24)';
+const BORDER_LIGHT = 'rgba(250,250,250,0.15)';
+const BG_HOVER = 'rgba(250,250,250,0.05)';
+const BORDER_DARK = '#262626';
+const TEXT_SELL = '#F17878';
+const TEXT_BUY = '#55D383';
+const TEXT_WARNING = '#F49C43';
+const TEXT_GRAY = 'text-gray-400';
+const TEXT_RED = 'text-red-500';
 
 const HopCount = ({ count }: { count: number }) => {
   return (
-    <span className={count === 0 ? 'text-white' : 'text-[#F49C43]'}>
+    <span className={count === 0 ? 'text-white' : `text-[${TEXT_WARNING}]`}>
       {count === 2 ? 'Direct' : `${count} Hops`}
     </span>
   );
@@ -46,8 +54,8 @@ const TradeRow = ({
 
   return (
     <tr
-      className={`group relative h-[33px] border-b border-[rgba(250,250,250,0.15)]
-        ${showRoute ? 'bg-[rgba(250,250,250,0.05)]' : ''}`}
+      className={`group relative h-[33px] border-b border-[${BORDER_LIGHT}]
+        ${showRoute ? `bg-[${BG_HOVER}]` : ''}`}
       onClick={() => setShowRoute(prev => !prev)}
       style={{
         backgroundImage: `linear-gradient(to right, ${bgColor} ${relativeSize}%, transparent ${relativeSize}%)`,
@@ -61,7 +69,9 @@ const TradeRow = ({
         <>
           <td
             className={
-              isSell ? 'text-[#F17878] text-xs relative' : 'text-[#55D383] text-xs relative'
+              isSell
+                ? `text-[${TEXT_SELL}] text-xs relative`
+                : `text-[${TEXT_BUY}] text-xs relative`
             }
           >
             {trace.price}
@@ -90,8 +100,8 @@ const RouteBookData = observer(({ bookData: { multiHops } }: { bookData: RouteBo
   const buyRelativeSizes = calculateRelativeSizes(multiHops.buy);
 
   return (
-    <div className='flex flex-col max-w-full border-y border-[#262626]'>
-      <div className='flex items-center gap-2 px-4 h-11 border-b border-[#262626]'>
+    <div className={`flex flex-col max-w-full border-y border-[${BORDER_DARK}]`}>
+      <div className={`flex items-center gap-2 px-4 h-11 border-b border-[${BORDER_DARK}]`}>
         <Tabs
           value={activeTab}
           onChange={setActiveTab}
@@ -148,11 +158,11 @@ export const RouteBook = observer(() => {
   const { data: bookData, isLoading: bookIsLoading, error: bookErr } = useBook();
 
   if (bookIsLoading || !bookData) {
-    return <div className='text-gray-400'>Loading...</div>;
+    return <div className={TEXT_GRAY}>Loading...</div>;
   }
 
   if (bookErr) {
-    return <div className='text-red-500'>Error loading route book: {String(bookErr)}</div>;
+    return <div className={TEXT_RED}>Error loading route book: {String(bookErr)}</div>;
   }
 
   return <RouteBookData bookData={bookData} />;
@@ -193,9 +203,9 @@ const SpreadRow = ({ sellOrders, buyOrders }: { sellOrders: Trace[]; buyOrders:
 
   return (
     <tr>
-      <td colSpan={4} className='border-y border-[#262626]'>
+      <td colSpan={4} className={`border-y border-[${BORDER_DARK}]`}>
         <div className='flex items-center justify-center gap-2 px-3 py-3 text-xs'>
-          <span className='text-[#55D383]'>{spreadInfo.midPrice}</span>
+          <span className={`text-[${TEXT_BUY}]`}>{spreadInfo.midPrice}</span>
           <span className='text-gray-400'>Spread:</span>
           <span className='text-white'>
             {spreadInfo.amount} {pair.quoteSymbol}