From a566e6795e3a6c3153462aeb57a888caae63fc6c Mon Sep 17 00:00:00 2001
From: Tyler Shipe <tjshipe@gmail.com>
Date: Fri, 3 Sep 2021 03:00:59 -0400
Subject: [PATCH] fix inconsistent coloring

---
 components/MarketPosition.tsx | 38 ++++++++++++++++-------------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/components/MarketPosition.tsx b/components/MarketPosition.tsx
index 881d1d32..427d60aa 100644
--- a/components/MarketPosition.tsx
+++ b/components/MarketPosition.tsx
@@ -96,9 +96,14 @@ export default function MarketPosition() {
     return getMarketIndexBySymbol(mangoGroupConfig, baseSymbol)
   }, [mangoGroupConfig, baseSymbol])
 
-  let perpAccount
+  let perpAccount, perpPnl
   if (marketName.includes('PERP') && mangoAccount) {
     perpAccount = mangoAccount.perpAccounts[marketIndex]
+    perpPnl = perpAccount.getPnl(
+      mangoGroup.perpMarkets[marketIndex],
+      mangoGroupCache.perpMarketCache[marketIndex],
+      mangoGroupCache.priceCache[marketIndex].price
+    )
   }
 
   const handleSizeClick = (size) => {
@@ -229,19 +234,20 @@ export default function MarketPosition() {
               Unsettled PnL
             </Tooltip.Content>
           </Tooltip>
-          <div className={`flex items-center text-th-fgd-1`}>
+          <div
+            className={`flex items-center ${
+              perpPnl?.gt(ZERO_I80F48)
+                ? 'text-th-green'
+                : perpPnl?.lt(ZERO_I80F48)
+                ? 'text-th-red'
+                : 'text-th-fgd-1'
+            }`}
+          >
             {isLoading ? (
               <DataLoader />
             ) : perpAccount ? (
               formatUsdValue(
-                +nativeI80F48ToUi(
-                  perpAccount.getPnl(
-                    mangoGroup.perpMarkets[marketIndex],
-                    mangoGroupCache.perpMarketCache[marketIndex],
-                    mangoGroupCache.priceCache[marketIndex].price
-                  ),
-                  marketConfig.quoteDecimals
-                )
+                +nativeI80F48ToUi(perpPnl, marketConfig.quoteDecimals)
               )
             ) : (
               '0'
@@ -252,17 +258,7 @@ export default function MarketPosition() {
               <LinkButton
                 onClick={() => handleSettlePnl(selectedMarket, perpAccount)}
                 className="ml-2 text-th-primary text-xs disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:underline"
-                disabled={
-                  perpAccount
-                    ? perpAccount
-                        .getPnl(
-                          mangoGroup.perpMarkets[marketIndex],
-                          mangoGroupCache.perpMarketCache[marketIndex],
-                          mangoGroupCache.priceCache[marketIndex].price
-                        )
-                        .eq(ZERO_I80F48)
-                    : true
-                }
+                disabled={perpAccount ? perpPnl.eq(ZERO_I80F48) : true}
               >
                 Settle
               </LinkButton>