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

Shrink and label bet row

Browse Source
This commit is contained in:
jahooma 2022-01-27 14:49:55 -06:00
parent f451d94295
commit aebf572dc9
3 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/components/bet-row.tsx
View File

@ -5,7 +5,6 @@ import { Contract } from '../lib/firebase/contracts'
import { BetPanel } from './bet-panel' import { BetPanel } from './bet-panel'
import { Row } from './layout/row' import { Row } from './layout/row'
import { YesNoSelector } from './yes-no-selector' import { YesNoSelector } from './yes-no-selector'
import clsx from 'clsx'
// Inline version of a bet panel. Opens BetPanel in a new modal. // Inline version of a bet panel. Opens BetPanel in a new modal.
export default function BetRow(props: { export default function BetRow(props: {
@ -19,24 +18,23 @@ export default function BetRow(props: {
return ( return (
<> <>
<div className={clsx(props.className)}> <Row className="items-center gap-2 justify-end">
<Row className="items-center gap-2 justify-center"> <div className=" text-gray-400 mr-2">Place a trade</div>
<YesNoSelector <YesNoSelector
className="w-60" btnClassName="btn-sm w-20"
onSelect={(choice) => { onSelect={(choice) => {
setOpen(true) setOpen(true)
setBetChoice(choice) setBetChoice(choice)
}} }}
/> />
</Row> </Row>
<Modal open={open} setOpen={setOpen}> <Modal open={open} setOpen={setOpen}>
<BetPanel <BetPanel
contract={props.contract} contract={props.contract}
title={props.contract.question} title={props.contract.question}
selected={betChoice} selected={betChoice}
/> />
</Modal> </Modal>
</div>
</> </>
) )
} }

2
web/components/contract-feed.tsx
View File

@ -702,7 +702,7 @@ export function ContractFeed(props: {
))} ))}
</ul> </ul>
{tradingAllowed(contract) && ( {tradingAllowed(contract) && (
<BetRow contract={contract} className="-mt-2 -mx-4" /> <BetRow contract={contract} className="-mt-4" />
)} )}
</div> </div>
) )

9
web/components/yes-no-selector.tsx
View File

@ -8,8 +8,9 @@ export function YesNoSelector(props: {
selected?: 'YES' | 'NO' selected?: 'YES' | 'NO'
onSelect: (selected: 'YES' | 'NO') => void onSelect: (selected: 'YES' | 'NO') => void
className?: string className?: string
btnClassName?: string
}) { }) {
const { selected, onSelect, className } = props const { selected, onSelect, className, btnClassName } = props
return ( return (
<Row className={clsx('space-x-3', className)}> <Row className={clsx('space-x-3', className)}>
@ -18,7 +19,8 @@ export function YesNoSelector(props: {
'flex-1 inline-flex justify-center items-center p-2 hover:bg-primary-focus hover:text-white rounded-lg border-primary hover:border-primary-focus border-2', 'flex-1 inline-flex justify-center items-center p-2 hover:bg-primary-focus hover:text-white rounded-lg border-primary hover:border-primary-focus border-2',
selected == 'YES' selected == 'YES'
? 'bg-primary text-white' ? 'bg-primary text-white'
: 'bg-transparent text-primary' : 'bg-transparent text-primary',
btnClassName
)} )}
onClick={() => onSelect('YES')} onClick={() => onSelect('YES')}
> >
@ -29,7 +31,8 @@ export function YesNoSelector(props: {
'flex-1 inline-flex justify-center items-center p-2 hover:bg-red-500 hover:text-white rounded-lg border-red-400 hover:border-red-500 border-2', 'flex-1 inline-flex justify-center items-center p-2 hover:bg-red-500 hover:text-white rounded-lg border-red-400 hover:border-red-500 border-2',
selected == 'NO' selected == 'NO'
? 'bg-red-400 text-white' ? 'bg-red-400 text-white'
: 'bg-transparent text-red-400' : 'bg-transparent text-red-400',
btnClassName
)} )}
onClick={() => onSelect('NO')} onClick={() => onSelect('NO')}
> >