Simplify card

web/components/bets-list.tsx

@@ -90,7 +90,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
   const { resolution } = contract
 
   return (
-    <div className="p-6 bg-white card card-body shadow-xl ">
+    <div className="p-6 bg-white card card-body shadow-xl">
       <Link href={path(contract)}>
         <a>
           <div className="font-medium text-indigo-700 mb-1 hover:underline hover:decoration-indigo-400 hover:decoration-2">

web/components/contracts-list.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import { Col } from '../components/layout/col'
+import clsx from 'clsx'
 import { Row } from '../components/layout/row'
 import { useEffect, useState } from 'react'
 import {
@@ -26,7 +26,7 @@ export function ContractDetails(props: { contract: Contract }) {
         {resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}
       </div>
       <div className="mx-2">•</div>
-      <div className="whitespace-nowrap">{formatMoney(volume)} bet</div>
+      <div className="whitespace-nowrap">{formatMoney(volume)} volume</div>
     </Row>
   )
 }
@@ -55,29 +55,20 @@ function ContractCard(props: { contract: Contract }) {
         <li className="col-span-1 bg-white hover:bg-gray-100 shadow-xl rounded-lg divide-y divide-gray-200">
           <div className="card">
             <div className="card-body p-6">
-              <div className="flex justify-between gap-2">
-                {/* Left side of card */}
-                <div>
-                  <p className="font-medium text-indigo-700 mb-8">
-                    {contract.question}
-                  </p>
-                  <ContractDetails contract={contract} />
+              <Row className="justify-between gap-2 mb-2">
+                <p className="font-medium text-indigo-700">
+                  {contract.question}
+                </p>
+                <div className={clsx('text-4xl', resolutionColor)}>
+                  {resolutionText || (
+                    <div className="text-primary">
+                      {probPercent}
+                      <div className="text-lg">chance</div>
+                    </div>
+                  )}
                 </div>
-
-                {/* Right side of card */}
-                <Col>
-                  <Col
-                    className={'text-4xl mx-auto items-end ' + resolutionColor}
-                  >
-                    {resolutionText || (
-                      <div className="text-primary">
-                        {probPercent}
-                        <div className="text-lg">chance</div>
-                      </div>
-                    )}
-                  </Col>
-                </Col>
-              </div>
+              </Row>
+              <ContractDetails contract={contract} />
             </div>
           </div>
         </li>