add value colors to pnl tooltip

components/shared/PnlTooltipContent.tsx

@@ -2,6 +2,10 @@ import { useTranslation } from 'next-i18next'
 import { formatCurrencyValue } from 'utils/numbers'
 import FormatNumericValue from './FormatNumericValue'
 
+const getPnlColor = (pnl: number) => {
+  return pnl < 0 ? 'text-th-down' : pnl > 0 ? 'text-th-up' : 'text-th-fgd-3'
+}
+
 const PnlTooltipContent = ({
   unrealizedPnl,
   realizedPnl,
@@ -17,39 +21,39 @@ const PnlTooltipContent = ({
 }) => {
   const { t } = useTranslation(['common', 'trade'])
   return (
-    <>
-      <div className="flex justify-between border-b border-th-bkg-3 pb-2">
-        <p className="mr-3">
-          {t('trade:unsettled')} {t('pnl')}
-        </p>
-        <span className="font-mono text-th-fgd-2">
-          {formatCurrencyValue(unsettledPnl, 2)}
-        </span>
-      </div>
-      <div className="mb-3 space-y-1 pt-2">
+    <div className="w-44">
+      <div className="mb-3 space-y-1">
         <div className="flex justify-between">
           <p className="mr-3">{t('trade:unrealized-pnl')}</p>
-          <span className="font-mono text-th-fgd-2">
+          <span className={`font-mono ${getPnlColor(unrealizedPnl)}`}>
             {formatCurrencyValue(unrealizedPnl, 2)}
           </span>
         </div>
-        <div className="flex justify-between">
+        <div className="border-b border-th-bkg-4 pb-3 flex justify-between">
           <p className="mr-3">{t('trade:realized-pnl')}</p>
-          <span className="font-mono text-th-fgd-2">
+          <span className={`font-mono ${getPnlColor(realizedPnl)}`}>
             {formatCurrencyValue(realizedPnl, 2)}
           </span>
         </div>
-        <div className="flex justify-between">
+        <div className="flex justify-between pt-1.5">
           <p className="mr-3">{t('trade:total-pnl')}</p>
-          <span className="font-mono text-th-fgd-2">
+          <span className={`font-mono ${getPnlColor(totalPnl)}`}>
             {formatCurrencyValue(totalPnl, 2)}
           </span>
         </div>
-        <div className="flex justify-between">
+        <div className="border-b border-th-bkg-4 pb-3 flex justify-between">
           <p className="mr-3">{t('trade:return-on-equity')}</p>
-          <span className="font-mono text-th-fgd-2">
+          <span className={`font-mono ${getPnlColor(roe)}`}>
             <FormatNumericValue classNames="text-xs" value={roe} decimals={2} />
-            %{' '}
+            %
+          </span>
+        </div>
+        <div className="flex justify-between pt-1.5">
+          <p className="mr-3">
+            {t('trade:unsettled')} {t('pnl')}
+          </p>
+          <span className={`font-mono ${getPnlColor(unsettledPnl)}`}>
+            {formatCurrencyValue(unsettledPnl, 2)}
           </span>
         </div>
       </div>
@@ -60,7 +64,7 @@ const PnlTooltipContent = ({
       >
         {t('learn-more')}
       </a>
-    </>
+    </div>
   )
 }
 

components/trade/PerpPositions.tsx

@@ -312,7 +312,7 @@ const PerpPositions = () => {
                     </TrBody>
                   )
                 })}
-                {openPerpPositions.length > 0 ? (
+                {openPerpPositions.length > 1 ? (
                   <tr
                     key={`total-unrealized-pnl`}
                     className="my-1 p-2 border-y border-th-bkg-3"
@@ -331,7 +331,7 @@ const PerpPositions = () => {
                     </Td>
                     <Td className="text-right font-mono">
                       <div className="flex justify-end items-center">
-                        <span className="font-body mr-4 text-md text-th-fgd-3">
+                        <span className="font-body mr-2 text-xs text-th-fgd-3">
                           Total:
                         </span>
                         <Tooltip