making yes button pretty
This commit is contained in:
parent
1321b95eb1
commit
c7239df3f0
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user