Clean up crufty markup in bets list

web/components/bets-list.tsx

@@ -335,49 +335,37 @@ function ContractBets(props: {
           </Row>
         </Col>
 
-        <Row className="mr-5 justify-end sm:mr-8">
+        <Col className="mr-5 justify-end sm:mr-8">
-          <Col>
           <div className="whitespace-nowrap text-right text-lg">
             {formatMoney(metric === 'profit' ? profit : payout)}
           </div>
-            <div className="text-right">
+          <ProfitBadge className="text-right" profitPercent={profitPercent} />
-              <ProfitBadge profitPercent={profitPercent} />
-            </div>
         </Col>
       </Row>
-      </Row>
 
       <div
-        className="collapse-content !px-0"
+        className="collapse-content bg-white !px-0"
         style={{ backgroundColor: 'white' }}
       >
-        <Spacer h={8} />
-
         <BetsSummary
-          className="mr-5 flex-1 sm:mr-8"
+          className="mt-8 mr-5 flex-1 sm:mr-8"
           contract={contract}
           bets={bets}
           isYourBets={isYourBets}
         />
 
-        <Spacer h={4} />
-
         {contract.mechanism === 'cpmm-1' && limitBets.length > 0 && (
-          <>
           <div className="max-w-md">
-              <div className="bg-gray-50 px-4 py-2">Limit orders</div>
+            <div className="mt-4 bg-gray-50 px-4 py-2">Limit orders</div>
             <LimitOrderTable
               contract={contract}
               limitBets={limitBets}
               isYou={true}
             />
           </div>
-          </>
         )}
 
-        <Spacer h={4} />
+        <div className="mt-4 bg-gray-50 px-4 py-2">Bets</div>
-
-        <div className="bg-gray-50 px-4 py-2">Bets</div>
         <ContractBetsTable
           contract={contract}
           bets={bets}
@@ -427,7 +415,6 @@ export function BetsSummary(props: {
 
   return (
     <Row className={clsx('flex-wrap gap-4 sm:flex-nowrap sm:gap-6', className)}>
-      <Row className="flex-wrap gap-4 sm:gap-6">
       {!isCpmm && (
         <Col>
           <div className="whitespace-nowrap text-sm text-gray-500">
@@ -440,29 +427,22 @@ export function BetsSummary(props: {
         <Col>
           <div className="text-sm text-gray-500">Payout</div>
           <div className="whitespace-nowrap">
-              {formatMoney(payout)}{' '}
+            {formatMoney(payout)} <ProfitBadge profitPercent={profitPercent} />
-              <ProfitBadge profitPercent={profitPercent} />
           </div>
         </Col>
-        ) : (
+      ) : isBinary ? (
-          <>
-            {isBinary ? (
         <>
           <Col>
             <div className="whitespace-nowrap text-sm text-gray-500">
               Payout if <YesLabel />
             </div>
-                  <div className="whitespace-nowrap">
+            <div className="whitespace-nowrap">{formatMoney(yesWinnings)}</div>
-                    {formatMoney(yesWinnings)}
-                  </div>
           </Col>
           <Col>
             <div className="whitespace-nowrap text-sm text-gray-500">
               Payout if <NoLabel />
             </div>
-                  <div className="whitespace-nowrap">
+            <div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
-                    {formatMoney(noWinnings)}
-                  </div>
           </Col>
         </>
       ) : isPseudoNumeric ? (
@@ -471,17 +451,13 @@ export function BetsSummary(props: {
             <div className="whitespace-nowrap text-sm text-gray-500">
               Payout if {'>='} {formatLargeNumber(contract.max)}
             </div>
-                  <div className="whitespace-nowrap">
+            <div className="whitespace-nowrap">{formatMoney(yesWinnings)}</div>
-                    {formatMoney(yesWinnings)}
-                  </div>
           </Col>
           <Col>
             <div className="whitespace-nowrap text-sm text-gray-500">
               Payout if {'<='} {formatLargeNumber(contract.min)}
             </div>
-                  <div className="whitespace-nowrap">
+            <div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
-                    {formatMoney(noWinnings)}
-                  </div>
           </Col>
         </>
       ) : (
@@ -492,8 +468,7 @@ export function BetsSummary(props: {
           <div className="whitespace-nowrap">{formatMoney(payout)}</div>
         </Col>
       )}
-          </>
+      )
-        )}
       <Col>
         <div className="whitespace-nowrap text-sm text-gray-500">Profit</div>
         <div className="whitespace-nowrap">
@@ -528,7 +503,6 @@ export function BetsSummary(props: {
         </div>
       </Col>
     </Row>
-    </Row>
   )
 }
 
@@ -787,8 +761,8 @@ function SellButton(props: { contract: Contract; bet: Bet }) {
   )
 }
 
-function ProfitBadge(props: { profitPercent: number }) {
+function ProfitBadge(props: { profitPercent: number; className?: string }) {
-  const { profitPercent } = props
+  const { profitPercent, className } = props
   if (!profitPercent) return null
   const colors =
     profitPercent > 0
@@ -799,7 +773,8 @@ function ProfitBadge(props: { profitPercent: number }) {
     <span
       className={clsx(
         'ml-1 inline-flex items-center rounded-full px-3 py-0.5 text-sm font-medium',
-        colors
+        colors,
+        className
       )}
     >
       {(profitPercent > 0 ? '+' : '') + profitPercent.toFixed(1) + '%'}