update trade side display in tables

components/trade/OpenOrders.tsx

@@ -295,8 +295,8 @@ const OpenOrders = () => {
                 const side =
                   o instanceof PerpOrder
                     ? 'bid' in o.side
-                      ? 'buy'
-                      : 'sell'
+                      ? 'long'
+                      : 'short'
                     : o.side
                 return (
                   <TrBody

components/trade/PerpPositions.tsx

@@ -163,7 +163,7 @@ const PerpPositions = () => {
                         <Td>
                           <TableMarketName
                             market={market}
-                            side={isLong ? 'buy' : 'sell'}
+                            side={isLong ? 'long' : 'short'}
                           />
                         </Td>
                         <Td className="text-right font-mono">
@@ -233,7 +233,7 @@ const PerpPositions = () => {
                           )}
                         </Td>
                         <Td className="text-right font-mono">
-                          <div className="flex flex-col items-end space-y-0.5">
+                          <div className="flex flex-col items-end ">
                             <Tooltip
                               content={
                                 <PnlTooltipContent

components/trade/TableMarketName.tsx

@@ -3,10 +3,7 @@ import useSelectedMarket from 'hooks/useSelectedMarket'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import MarketLogos from './MarketLogos'
-import {
-  ArrowTrendingDownIcon,
-  ArrowTrendingUpIcon,
-} from '@heroicons/react/20/solid'
+import { useTranslation } from 'next-i18next'
 
 const TableMarketName = ({
   market,
@@ -19,30 +16,10 @@ const TableMarketName = ({
   const { asPath } = useRouter()
 
   return selectedMarket?.name === market.name && asPath.includes('/trade') ? (
-    <div
-      className={`flex items-center ${
-        side === 'buy'
-          ? 'text-th-up'
-          : side === 'sell'
-          ? 'text-th-down'
-          : 'text-th-fgd-2'
-      }`}
-    >
-      <NameAndSide market={market} side={side} />
-    </div>
+    <NameAndSide market={market} side={side} />
   ) : (
     <Link href={`/trade?name=${market.name}`}>
-      <div
-        className={`flex items-center underline underline-offset-2 md:underline-offset-4 md:hover:no-underline ${
-          side === 'buy'
-            ? 'text-th-up'
-            : side === 'sell'
-            ? 'text-th-down'
-            : 'text-th-fgd-2 md:hover:text-th-fgd-3'
-        }`}
-      >
-        <NameAndSide market={market} side={side} />
-      </div>
+      <NameAndSide market={market} side={side} />
     </Link>
   )
 }
@@ -56,15 +33,28 @@ const NameAndSide = ({
   market: PerpMarket | Serum3Market
   side?: string
 }) => {
+  const { t } = useTranslation('common')
+  const textColor =
+    side === 'buy' || side === 'long'
+      ? 'text-th-up'
+      : side === 'sell' || side === 'short'
+      ? 'text-th-down'
+      : 'text-th-fgd-2'
   return (
-    <>
+    <div className="flex items-center">
       <MarketLogos market={market} size="large" />
-      <span className="mr-1 whitespace-nowrap">{market.name}</span>
-      {side === 'buy' ? (
-        <ArrowTrendingUpIcon className="h-5 w-5" />
-      ) : side === 'sell' ? (
-        <ArrowTrendingDownIcon className="h-5 w-5" />
-      ) : null}
-    </>
+      <div>
+        <span className="whitespace-nowrap">{market.name}</span>
+        {side ? (
+          <div className="mt-0.5 flex items-center">
+            <p
+              className={`mr-1 font-body text-xs uppercase no-underline ${textColor}`}
+            >
+              {t(side)}
+            </p>
+          </div>
+        ) : null}
+      </div>
+    </div>
   )
 }

components/trade/TradeHistory.tsx

@@ -72,7 +72,16 @@ const TradeHistory = () => {
                     className="my-1 p-2"
                   >
                     <Td>
-                      <TableMarketName market={market} side={side} />
+                      <TableMarketName
+                        market={market}
+                        side={
+                          market instanceof PerpMarket
+                            ? side === 'buy'
+                              ? 'long'
+                              : 'short'
+                            : side
+                        }
+                      />
                     </Td>
                     <Td className="text-right font-mono">{size}</Td>
                     <Td className="text-right font-mono">