Gray scale position and profit

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>
             </>
           )}

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)