making yes button pretty

This commit is contained in:
ingawei 2022-09-16 15:12:31 -07:00
parent 1321b95eb1
commit c7239df3f0
2 changed files with 80 additions and 8 deletions

View File

@ -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>
</>
)
}

View File

@ -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>
)
}