diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx index 76581d9e..fbb49677 100644 --- a/web/components/amount-input.tsx +++ b/web/components/amount-input.tsx @@ -5,7 +5,8 @@ import { formatMoney } from 'common/util/format' import { Col } from './layout/col' import { SiteLink } from './site-link' import { ENV_CONFIG } from 'common/envs/constants' -import { useIsMobile } from 'web/hooks/use-is-mobile' +import { useWindowSize } from 'web/hooks/use-window-size' +import { Row } from './layout/row' export function AmountInput(props: { amount: number | undefined @@ -34,45 +35,53 @@ export function AmountInput(props: { const isInvalid = !str || isNaN(amount) onChange(isInvalid ? undefined : amount) } - const isMobile = useIsMobile(768) - return ( - - - {error && ( -
- {error === 'Insufficient balance' ? ( - <> - Not enough funds. - - Buy more? - - - ) : ( - error - )} -
- )} - + const { width } = useWindowSize() + const isMobile = (width ?? 0) < 768 + + return ( + <> + + + + {error && ( +
+ {error === 'Insufficient balance' ? ( + <> + Not enough funds. + + Buy more? + + + ) : ( + error + )} +
+ )} + + ) } @@ -135,27 +144,29 @@ export function BuyAmountInput(props: { return ( <> - - {showSlider && ( - onAmountChange(parseRaw(parseInt(e.target.value)))} - className="range range-lg only-thumb z-40 mb-2 xl:hidden" - step="5" + + - )} + {showSlider && ( + onAmountChange(parseRaw(parseInt(e.target.value)))} + className="range range-lg only-thumb z-40 my-auto align-middle xl:hidden" + step="5" + /> + )} + ) } diff --git a/web/components/answers/answer-bet-panel.tsx b/web/components/answers/answer-bet-panel.tsx index 3339ded5..ac3a8fa3 100644 --- a/web/components/answers/answer-bet-panel.tsx +++ b/web/components/answers/answer-bet-panel.tsx @@ -182,9 +182,9 @@ export function AnswerBetPanel(props: { - {user ? ( setOpen(false)} hasShares={hasYesShares || hasNoShares} /> @@ -72,3 +78,44 @@ export default function BetButton(props: { ) } + +export function BinaryMobileBetting(props: { contract: BinaryContract }) { + const { contract } = props + const user = useUser() + if (user) { + return + } else { + return + } +} + +export function SignedInBinaryMobileBetting(props: { + contract: BinaryContract + user: User +}) { + const { contract, user } = props + const unfilledBets = useUnfilledBets(contract.id) ?? [] + + return ( + <> + + +