From 0a25561de75aae9c9b2cd2a7ffa6adecaa98f434 Mon Sep 17 00:00:00 2001 From: ingawei Date: Tue, 20 Sep 2022 21:32:07 -0700 Subject: [PATCH] most kinks down --- web/components/amount-input.tsx | 127 +++++++------- web/components/answers/answer-bet-panel.tsx | 3 +- web/components/bet-button.tsx | 59 ++----- web/components/bet-panel.tsx | 157 +++++++++++------- web/components/contract/quick-bet.tsx | 4 +- web/components/outcome-label.tsx | 2 +- .../warning-confirmation-button.tsx | 12 +- web/components/yes-no-selector.tsx | 8 +- web/tailwind.config.js | 1 + 9 files changed, 201 insertions(+), 172 deletions(-) diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx index 2ad745a8..ba9ad4a6 100644 --- a/web/components/amount-input.tsx +++ b/web/components/amount-input.tsx @@ -6,6 +6,7 @@ import { Col } from './layout/col' import { SiteLink } from './site-link' import { ENV_CONFIG } from 'common/envs/constants' import { useWindowSize } from 'web/hooks/use-window-size' +import { Row } from './layout/row' export function AmountInput(props: { amount: number | undefined @@ -34,46 +35,58 @@ export function AmountInput(props: { const isInvalid = !str || isNaN(amount) onChange(isInvalid ? undefined : amount) } + const { width } = useWindowSize() const isMobile = (width ?? 0) < 768 return ( - - + <> + + - {error && ( -
- {error === 'Insufficient balance' ? ( - <> - Not enough funds. - - Buy more? - - - ) : ( - error - )} -
- )} - + {error && ( +
+ {error === 'Insufficient balance' ? ( + <> + Not enough funds. + + Buy more? + + + ) : ( + error + )} +
+ )} + + ) } @@ -136,27 +149,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..4b31713c 100644 --- a/web/components/answers/answer-bet-panel.tsx +++ b/web/components/answers/answer-bet-panel.tsx @@ -182,9 +182,10 @@ export function AnswerBetPanel(props: { - + {console.log('bet Amount pre', betAmount)} {user ? ( - {/* */} - {/* - - - */}