contract card: less busy design

web/components/contract/contract-card.tsx

@@ -1,7 +1,11 @@
 import clsx from 'clsx'
 import Link from 'next/link'
 import { Row } from '../layout/row'
-import { formatLargeNumber, formatPercent } from 'common/util/format'
+import {
+  formatLargeNumber,
+  formatPercent,
+  formatWithCommas,
+} from 'common/util/format'
 import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
 import {
@@ -37,8 +41,8 @@ import { Tooltip } from '../tooltip'
 import { SiteLink } from '../site-link'
 import { ProbOrNumericChange } from './prob-change-table'
 import { Card } from '../card'
-import { ProfitBadgeMana } from '../profit-badge'
 import { floatingEqual } from 'common/util/math'
+import { ENV_CONFIG } from 'common/envs/constants'
 
 export function ContractCard(props: {
   contract: Contract
@@ -409,6 +413,12 @@ export function ContractCardProbChange(props: {
   const binaryOutcome =
     metrics && floatingEqual(metrics.totalShares.NO ?? 0, 0) ? 'YES' : 'NO'
 
+  const displayedProfit = dayMetrics
+    ? ENV_CONFIG.moneyMoniker +
+      (dayMetrics.profit > 0 ? '+' : '') +
+      dayMetrics.profit.toFixed(0)
+    : undefined
+
   return (
     <Card className={clsx(className, 'mb-4')}>
       <AvatarDetails
@@ -431,19 +441,11 @@ export function ContractCardProbChange(props: {
             'items-center justify-between gap-4 pl-6 pr-4 pb-2 text-sm'
           )}
         >
-          <Row className="gap-1 text-gray-500">
-            {Math.floor(metrics.totalShares[binaryOutcome])}{' '}
+          <Row className="gap-1 text-gray-400">
+            You: {formatWithCommas(metrics.totalShares[binaryOutcome])}{' '}
             {binaryOutcome === 'YES' ? yesOutcomeLabel : noOutcomeLabel} shares
+            <span className="ml-1.5">{displayedProfit} today</span>
           </Row>
-
-          {dayMetrics && (
-            <>
-              <Row className="items-center">
-                <div className="mr-1 text-gray-500">Daily profit</div>
-                <ProfitBadgeMana amount={dayMetrics.profit} gray />
-              </Row>
-            </>
-          )}
         </Row>
       )}
     </Card>