From ec516ee41f9e5a54c024da0e4956f1730e0bbf95 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Thu, 16 Dec 2021 01:03:41 -0800
Subject: [PATCH] Move bet payouts to the top right of the card

---
 web/components/bets-list.tsx | 51 +++++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx
index 4845f894..b3a462f2 100644
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@@ -91,35 +91,38 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
 
   return (
     <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">
-            {contract.question}
-          </div>
-        </a>
-      </Link>
+      <Row>
+        <Col className="w-2/3">
+          <Link href={path(contract)}>
+            <a>
+              <div className="font-medium text-indigo-700 mb-1 hover:underline hover:decoration-indigo-400 hover:decoration-2">
+                {contract.question}
+              </div>
+            </a>
+          </Link>
 
-      <Row className="gap-2 text-gray-500 text-sm">
-        <div>
-          <UserLink displayName={contract.creatorName} />
-        </div>
-        {resolution && (
-          <>
-            <div>•</div>
+          <Row className="gap-2 text-gray-500 text-sm">
             <div>
-              Resolved {resolution === 'YES' && <YesLabel />}
-              {resolution === 'NO' && <NoLabel />}
-              {resolution === 'CANCEL' && <CancelLabel />}
+              <UserLink displayName={contract.creatorName} />
             </div>
-          </>
-        )}
+            {resolution && (
+              <>
+                <div>•</div>
+                <div>
+                  Resolved {resolution === 'YES' && <YesLabel />}
+                  {resolution === 'NO' && <NoLabel />}
+                  {resolution === 'CANCEL' && <CancelLabel />}
+                </div>
+              </>
+            )}
+          </Row>
+        </Col>
+
+        {/* Show this at the end of the flex */}
+        <MyBetsSummary contract={contract} bets={bets} className="ml-auto" />
       </Row>
 
-      <Spacer h={6} />
-
-      <MyBetsSummary contract={contract} bets={bets} />
-
-      <Spacer h={6} />
+      <Spacer h={8} />
 
       <ContractBetsTable contract={contract} bets={bets} />
     </div>