open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tweak bet panel UI

Browse Source
This commit is contained in:
Austin Chen 2022-01-06 01:49:41 -08:00
parent 4659cab18c
commit 95472c5faf
1 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/components/bet-panel.tsx
View File

@ -109,8 +109,10 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
const remainingBalance = (user?.balance || 0) - (betAmount || 0) const remainingBalance = (user?.balance || 0) - (betAmount || 0)
return ( return (
<Col className={clsx('bg-white shadow-md px-8 py-6 rounded-md', className)}> <Col
<Title className="!mt-0 whitespace-nowrap" text="Place a trade" /> className={clsx('bg-gray-100 shadow-md px-8 py-6 rounded-md', className)}
>
<Title className="!mt-0 whitespace-nowrap" text={`Buy ${betChoice}`} />
<div className="mt-2 mb-1 text-sm text-gray-400">Outcome</div> <div className="mt-2 mb-1 text-sm text-gray-400">Outcome</div>
<YesNoSelector <YesNoSelector
@ -119,7 +121,14 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
onSelect={(choice) => onBetChoice(choice)} onSelect={(choice) => onBetChoice(choice)}
/> />
<div className="mt-3 mb-1 text-sm text-gray-400">Amount</div> <div className="mt-3 mb-1 text-sm text-gray-400">
Amount{' '}
{user && (
<span className="float-right">
{formatMoney(remainingBalance > 0 ? remainingBalance : 0)} left
</span>
)}
</div>
<Col className="my-2"> <Col className="my-2">
<label className="input-group"> <label className="input-group">
<span className="text-sm bg-gray-200">M$</span> <span className="text-sm bg-gray-200">M$</span>
@ -142,15 +151,6 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
)} )}
</Col> </Col>
{user && (
<>
<div className="mt-3 mb-1 text-sm text-gray-400">
Remaining balance
</div>
<div>{formatMoney(remainingBalance > 0 ? remainingBalance : 0)}</div>
</>
)}
<div className="mt-2 mb-1 text-sm text-gray-400">Implied probability</div> <div className="mt-2 mb-1 text-sm text-gray-400">Implied probability</div>
<Row> <Row>
<div>{formatPercent(initialProb)}</div> <div>{formatPercent(initialProb)}</div>
@ -159,10 +159,11 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
</Row> </Row>
<div className="mt-2 mb-1 text-sm text-gray-400"> <div className="mt-2 mb-1 text-sm text-gray-400">
Max payout (estimated) Estimated max payout
</div> </div>
<div> <div>
{formatMoney(estimatedWinnings)} &nbsp; (+{estimatedReturnPercent}) {formatMoney(estimatedWinnings)} &nbsp;{' '}
{estimatedWinnings ? <span>(+{estimatedReturnPercent})</span> : null}
</div> </div>
<AdvancedPanel> <AdvancedPanel>