From c7239df3f096930d8e27922fd1d64d2f8e247af2 Mon Sep 17 00:00:00 2001
From: ingawei <ingawei@gmail.com>
Date: Fri, 16 Sep 2022 15:12:31 -0700
Subject: [PATCH] making yes button pretty

---
 web/components/bet-button.tsx                 | 73 +++++++++++++++++++
 web/components/contract/contract-overview.tsx | 15 ++--
 2 files changed, 80 insertions(+), 8 deletions(-)

diff --git a/web/components/bet-button.tsx b/web/components/bet-button.tsx
index c0177fb3..cc67e7b0 100644
--- a/web/components/bet-button.tsx
+++ b/web/components/bet-button.tsx
@@ -11,6 +11,12 @@ import { Col } from './layout/col'
 import { Button } from 'web/components/button'
 import { BetSignUpPrompt } from './sign-up-prompt'
 import { PRESENT_BET } from 'common/user'
+import { Contract } from 'web/lib/firebase/contracts'
+import { contractDetailsButtonClassName } from './contract/contract-info-dialog'
+import { User } from 'web/lib/firebase/users'
+import { SellRow } from './sell-row'
+import { PlayMoneyDisclaimer } from './play-money-disclaimer'
+import { Row } from './layout/row'
 
 /** Button that opens BetPanel in a new modal */
 export default function BetButton(props: {
@@ -73,3 +79,70 @@ export default function BetButton(props: {
     </>
   )
 }
+
+export function BinaryMobileBetting(props: {
+  contract: CPMMBinaryContract
+  className?: string
+}) {
+  const { contract, className } = props
+  const user = useUser()
+  if (user) {
+    return (
+      <>
+        <SignedInBinaryMobileBetting contract={contract} user={user} />
+      </>
+    )
+  } else {
+    return (
+      <>
+        <BetSignUpPrompt className="w-full" />
+      </>
+    )
+  }
+}
+
+export function SignedInBinaryMobileBetting(props: {
+  contract: CPMMBinaryContract
+  user: User
+}) {
+  enum betChoiceState {
+    YES = 'yes',
+    NO = 'no',
+    NEITHER = 'neither',
+  }
+  const { contract, user } = props
+  const [betChoice, setBetChoice] = useState<betChoiceState>(
+    betChoiceState.NEITHER
+  )
+  return (
+    <>
+      {/* GET BACK TO THIS BUT GAH DAMN IT'S UGLY */}
+      {/* <SellRow
+        contract={contract}
+        user={user}
+        className={'rounded-t-md bg-gray-100 px-4 py-5'}
+  /> */}
+      <Row className="w-full">
+        <button
+          className={clsx(
+            'w-1/2 rounded-full py-2',
+            betChoice == betChoiceState.YES
+              ? 'bg-emerald-500 text-white'
+              : betChoice == betChoiceState.NO
+              ? 'border-greyscale-4 text-greyscale-4 bg-white'
+              : 'border-2 border-emerald-500 bg-white text-emerald-500'
+          )}
+          onClick={() => {
+            if (betChoice == betChoiceState.YES) {
+              setBetChoice(betChoiceState.NEITHER)
+            } else {
+              setBetChoice(betChoiceState.YES)
+            }
+          }}
+        >
+          YES
+        </button>
+      </Row>
+    </>
+  )
+}
diff --git a/web/components/contract/contract-overview.tsx b/web/components/contract/contract-overview.tsx
index bfb4829f..0fd0af3d 100644
--- a/web/components/contract/contract-overview.tsx
+++ b/web/components/contract/contract-overview.tsx
@@ -13,7 +13,7 @@ import {
   PseudoNumericResolutionOrExpectation,
 } from './contract-card'
 import { Bet } from 'common/bet'
-import BetButton from '../bet-button'
+import BetButton, { BinaryMobileBetting } from '../bet-button'
 import { AnswersGraph } from '../answers/answers-graph'
 import {
   Contract,
@@ -78,19 +78,18 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
         <Row className="justify-between gap-4">
           <OverviewQuestion text={contract.question} />
           <BinaryResolutionOrChance
-            className="hidden items-end xl:flex"
+            className="flex items-end"
             contract={contract}
             large
           />
         </Row>
-        <Row className="items-center justify-between gap-4 xl:hidden">
-          <BinaryResolutionOrChance contract={contract} />
-          {tradingAllowed(contract) && (
-            <BetWidget contract={contract as CPMMBinaryContract} />
-          )}
-        </Row>
       </Col>
       <ContractProbGraph contract={contract} bets={[...bets].reverse()} />
+      <Row className="items-center justify-between gap-4 xl:hidden">
+        {tradingAllowed(contract) && (
+          <BinaryMobileBetting className={'my-2'} contract={contract} />
+        )}
+      </Row>
     </Col>
   )
 }