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

Visually clean up bet panel

Browse Source
This commit is contained in:
Austin Chen 2021-12-13 10:32:40 -08:00
parent 62da8ee3a9
commit ad6049350d
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,7 @@ import { Row } from './layout/row'
import { Spacer } from './layout/spacer' import { Spacer } from './layout/spacer'
import { YesNoSelector } from './yes-no-selector' import { YesNoSelector } from './yes-no-selector'
import { formatMoney } from '../lib/util/format' import { formatMoney } from '../lib/util/format'
import { Title } from './title'
export function BetPanel(props: { contract: Contract; className?: string }) { export function BetPanel(props: { contract: Contract; className?: string }) {
const { contract, className } = props const { contract, className } = props
@ -68,16 +69,17 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
className className
)} )}
> >
<div className="p-2 font-medium">Pick outcome</div> <Title className="mt-0" text="Place a bet" />
<div className="pt-2 pb-1 text-sm text-gray-500">Outcome</div>
<YesNoSelector <YesNoSelector
className="p-2" className="p-2"
selected={betChoice} selected={betChoice}
onSelect={choice => onBetChoice(choice)} onSelect={(choice) => onBetChoice(choice)}
/> />
<Spacer h={4} /> <Spacer h={4} />
<div className="p-2 font-medium">Bet amount</div> <div className="pt-2 pb-1 text-sm text-gray-500">Bet amount</div>
<Row className="p-2 items-center relative"> <Row className="p-2 items-center relative">
<div className="absolute inset-y-0 left-2 pl-3 flex items-center pointer-events-none"> <div className="absolute inset-y-0 left-2 pl-3 flex items-center pointer-events-none">
<span className="text-gray-500 sm:text-sm">M$</span> <span className="text-gray-500 sm:text-sm">M$</span>
@ -94,7 +96,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
<Spacer h={4} /> <Spacer h={4} />
<div className="p-2 font-medium">Implied probability</div> <div className="pt-2 pb-1 text-sm text-gray-500">Implied probability</div>
<Row> <Row>
<div className="px-2 font-sans"> <div className="px-2 font-sans">
{Math.round(initialProb * 100) + '%'} {Math.round(initialProb * 100) + '%'}
@ -107,7 +109,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
<Spacer h={2} /> <Spacer h={2} />
<div className="p-2 font-medium">Estimated winnings</div> <div className="pt-2 pb-1 text-sm text-gray-500">Estimated winnings</div>
<div className="px-2 font-sans"> <div className="px-2 font-sans">
{formatMoney(estimatedWinnings)} (+{estimatedReturnPercent}) {formatMoney(estimatedWinnings)} (+{estimatedReturnPercent})
</div> </div>
@ -121,7 +123,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
? 'btn-disabled' ? 'btn-disabled'
: betChoice === 'YES' : betChoice === 'YES'
? 'btn-primary' ? 'btn-primary'
: 'bg-red-400 hover:bg-red-500 focus:ring-red-400' : 'bg-red-400 hover:bg-red-500 focus:ring-red-400 border-none'
)} )}
onClick={betDisabled ? undefined : submitBet} onClick={betDisabled ? undefined : submitBet}
> >

13
web/components/title.tsx
View File

@ -1,7 +1,14 @@
export function Title(props: { text: string }) { import clsx from 'clsx'
const { text } = props
export function Title(props: { text: string; className?: string }) {
const { text, className } = props
return ( return (
<h1 className="text-2xl font-major-mono text-indigo-700 font-bold mt-6 mb-4"> <h1
className={clsx(
'text-2xl font-major-mono text-indigo-700 font-bold mt-6 mb-4',
className
)}
>
{text} {text}
</h1> </h1>
) )