From 946d74489f228fe37889ff334c37292ff3863ac2 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Tue, 11 Oct 2022 16:29:14 -0500
Subject: [PATCH] Gray scale position and profit

---
 web/components/contract/contract-card.tsx |  8 +++-----
 web/components/profit-badge.tsx           | 15 +++++++++++----
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index d0672f27..80c90b93 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -21,7 +21,6 @@ import {
 import {
   AnswerLabel,
   BinaryContractOutcomeLabel,
-  BinaryOutcomeLabel,
   CancelLabel,
   FreeResponseOutcomeLabel,
 } from '../outcome-label'
@@ -430,17 +429,16 @@ export function ContractCardProbChange(props: {
             'items-center justify-between gap-4 pl-6 pr-4 pb-2 text-sm'
           )}
         >
-          <Row className="gap-1">
+          <Row className="gap-1 text-gray-700">
             <div className="text-gray-500">Position</div>
-            {formatMoney(metrics.payout)}
-            <BinaryOutcomeLabel outcome={outcome} />
+            {formatMoney(metrics.payout)} {outcome}
           </Row>
 
           {dayMetrics && (
             <>
               <Row className="items-center">
                 <div className="mr-1 text-gray-500">Daily profit</div>
-                <ProfitBadgeMana amount={dayMetrics.profit} />
+                <ProfitBadgeMana amount={dayMetrics.profit} gray />
               </Row>
             </>
           )}
diff --git a/web/components/profit-badge.tsx b/web/components/profit-badge.tsx
index ff7d4dc0..88d958d4 100644
--- a/web/components/profit-badge.tsx
+++ b/web/components/profit-badge.tsx
@@ -28,10 +28,17 @@ export function ProfitBadge(props: {
   )
 }
 
-export function ProfitBadgeMana(props: { amount: number; className?: string }) {
-  const { amount, className } = props
-  const colors =
-    amount > 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+export function ProfitBadgeMana(props: {
+  amount: number
+  gray?: boolean
+  className?: string
+}) {
+  const { amount, gray, className } = props
+  const colors = gray
+    ? 'bg-gray-100 text-gray-700'
+    : amount > 0
+    ? 'bg-gray-100 text-green-800'
+    : 'bg-gray-100 text-red-800'
 
   const formatted =
     ENV_CONFIG.moneyMoniker + (amount > 0 ? '+' : '') + amount.toFixed(0)