From 38a59245ff1bfe3661d0a4c713de500d497b6a7e Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Wed, 17 Aug 2022 14:03:08 -0700
Subject: [PATCH] Move bet row above graph, in "mini modal"

---
 web/components/bet-inline.tsx                 |  7 +----
 web/components/yes-no-selector.tsx            |  4 +--
 web/pages/embed/[username]/[contractSlug].tsx | 28 +++++++++++--------
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/web/components/bet-inline.tsx b/web/components/bet-inline.tsx
index a9752c64..7b12a297 100644
--- a/web/components/bet-inline.tsx
+++ b/web/components/bet-inline.tsx
@@ -44,12 +44,7 @@ export function BetInline(props: {
   const betDisabled = submitBet.isLoading || submitBet.isError || !amount
 
   return (
-    <Row
-      className={clsx(
-        'align-stretch mb-4 h-8 items-stretch justify-center gap-3',
-        className
-      )}
-    >
+    <Row className={clsx('h-8 items-stretch justify-center gap-3', className)}>
       <div className="text-xl">Bet</div>
       <YesNoSelector
         className="space-x-0"
diff --git a/web/components/yes-no-selector.tsx b/web/components/yes-no-selector.tsx
index 3b3cc21d..aaf1764e 100644
--- a/web/components/yes-no-selector.tsx
+++ b/web/components/yes-no-selector.tsx
@@ -38,7 +38,7 @@ export function YesNoSelector(props: {
             'hover:bg-primary-focus border-primary hover:border-primary-focus hover:text-white',
             selected == 'YES'
               ? 'bg-primary text-white'
-              : 'text-primary bg-transparent',
+              : 'text-primary bg-white',
             btnClassName
           )}
           onClick={() => onSelect('YES')}
@@ -55,7 +55,7 @@ export function YesNoSelector(props: {
             'border-red-400 hover:border-red-500 hover:bg-red-500 hover:text-white',
             selected == 'NO'
               ? 'bg-red-400 text-white'
-              : 'bg-transparent text-red-400',
+              : 'bg-white text-red-400',
             btnClassName
           )}
           onClick={() => onSelect('NO')}
diff --git a/web/pages/embed/[username]/[contractSlug].tsx b/web/pages/embed/[username]/[contractSlug].tsx
index 9b4a2b59..ca588b4a 100644
--- a/web/pages/embed/[username]/[contractSlug].tsx
+++ b/web/pages/embed/[username]/[contractSlug].tsx
@@ -1,3 +1,4 @@
+import { XIcon } from '@heroicons/react/solid'
 import { Bet } from 'common/bet'
 import { Contract, CPMMBinaryContract } from 'common/contract'
 import { DOMAIN } from 'common/envs/constants'
@@ -110,14 +111,13 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
             disabled
           />
 
-          {(isBinary || isPseudoNumeric) && tradingAllowed(contract) && (
-            <Button
-              color="gradient"
-              onClick={() => setBetPanelOpen((open) => !open)}
-            >
-              {betPanelOpen ? 'Cancel' : 'Bet'}
-            </Button>
-          )}
+          {(isBinary || isPseudoNumeric) &&
+            tradingAllowed(contract) &&
+            !betPanelOpen && (
+              <Button color="gradient" onClick={() => setBetPanelOpen(true)}>
+                Bet
+              </Button>
+            )}
 
           {isBinary && <BinaryResolutionOrChance contract={contract} />}
 
@@ -140,6 +140,15 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
         <Spacer h={2} />
       </div>
 
+      {(isBinary || isPseudoNumeric) && betPanelOpen && (
+        <Row className="mb-2 items-center justify-center gap-4 self-center rounded bg-indigo-200 py-2 px-3">
+          <BetInline contract={contract as any} />
+          <button onClick={() => setBetPanelOpen(false)}>
+            <XIcon className="h-6 w-6" />
+          </button>
+        </Row>
+      )}
+
       <div className="mx-1 mb-2 min-h-0 flex-1" ref={setElem}>
         {(isBinary || isPseudoNumeric) && (
           <ContractProbGraph
@@ -157,9 +166,6 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
           <NumericGraph contract={contract} height={graphHeight} />
         )}
       </div>
-      {(isBinary || isPseudoNumeric) && betPanelOpen && (
-        <BetInline contract={contract as any} />
-      )}
     </Col>
   )
 }