so many changes ew

This commit is contained in:
ingawei 2022-09-29 22:04:47 -07:00
parent 0801f6a94a
commit 8f09717b2d
11 changed files with 94 additions and 63 deletions

View File

@ -191,6 +191,7 @@ export function AnswerBetPanel(props: {
onSubmit={submitBet}
isSubmitting={isSubmitting}
disabled={!!betDisabled}
color={'green'}
/>
) : (
<BetSignUpPrompt />

View File

@ -85,16 +85,16 @@ export function AnswerResolvePanel(props: {
setIsSubmitting(false)
}
const resolutionButtonClass =
resolveOption === 'CANCEL'
? 'bg-yellow-400 hover:bg-yellow-500'
: resolveOption === 'CHOOSE' && answers.length
? 'btn-primary'
: resolveOption === 'CHOOSE_MULTIPLE' &&
answers.length > 1 &&
answers.every((answer) => chosenAnswers[answer] > 0)
? 'bg-blue-400 hover:bg-blue-500'
: 'btn-disabled'
// const resolutionButtonClass =
// resolveOption === 'CANCEL'
// ? 'bg-yellow-400 hover:bg-yellow-500'
// : resolveOption === 'CHOOSE' && answers.length
// ? 'btn-primary'
// : resolveOption === 'CHOOSE_MULTIPLE' &&
// answers.length > 1 &&
// answers.every((answer) => chosenAnswers[answer] > 0)
// ? 'bg-blue-400 hover:bg-blue-500'
// : 'btn-disabled'
return (
<Col className="gap-4 rounded">
@ -129,11 +129,28 @@ export function AnswerResolvePanel(props: {
Clear
</button>
)}
<ResolveConfirmationButton
color={
resolveOption === 'CANCEL'
? 'yellow'
: resolveOption === 'CHOOSE' && answers.length
? 'green'
: resolveOption === 'CHOOSE_MULTIPLE' &&
answers.length > 1 &&
answers.every((answer) => chosenAnswers[answer] > 0)
? 'blue'
: 'indigo'
}
disabled={
!resolveOption ||
(resolveOption === 'CHOOSE' && !answers.length) ||
(resolveOption === 'CHOOSE_MULTIPLE' &&
(!(answers.length > 1) ||
!answers.every((answer) => chosenAnswers[answer] > 0)))
}
onResolve={onResolve}
isSubmitting={isSubmitting}
openModalButtonClass={resolutionButtonClass}
submitButtonClass={resolutionButtonClass}
/>
</Row>
</Col>

View File

@ -395,12 +395,12 @@ export function BuyPanel(props: {
<WarningConfirmationButton
marketType="binary"
amount={betAmount}
outcome={outcome}
warning={warning}
onSubmit={submitBet}
isSubmitting={isSubmitting}
disabled={!!betDisabled || outcome === undefined}
size="xl"
color={outcome === 'NO' ? 'red' : 'green'}
/>
)}
<button

View File

@ -2,7 +2,6 @@ import Link from 'next/link'
import { keyBy, groupBy, mapValues, sortBy, partition, sumBy } from 'lodash'
import dayjs from 'dayjs'
import { useMemo, useState } from 'react'
import clsx from 'clsx'
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
import { Bet } from 'web/lib/firebase/bets'
@ -599,8 +598,8 @@ function SellButton(props: {
return (
<ConfirmationButton
openModalBtn={{
className: clsx('btn-sm', isSubmitting && 'btn-disabled loading'),
label: 'Sell',
disabled: isSubmitting,
}}
submitBtn={{ className: 'btn-primary', label: 'Sell' }}
onSubmit={async () => {

View File

@ -1,6 +1,6 @@
import clsx from 'clsx'
import { ReactNode, useState } from 'react'
import { Button, SizeType } from './button'
import { Button, ColorType, SizeType } from './button'
import { Col } from './layout/col'
import { Modal } from './layout/modal'
import { Row } from './layout/row'
@ -10,6 +10,9 @@ export function ConfirmationButton(props: {
label: string
icon?: JSX.Element
className?: string
color?: ColorType
size?: SizeType
disabled?: boolean
}
cancelBtn?: {
label?: string
@ -23,8 +26,6 @@ export function ConfirmationButton(props: {
onSubmit?: () => void
onOpenChanged?: (isOpen: boolean) => void
onSubmitWithSuccess?: () => Promise<boolean>
disabled: boolean
size?: SizeType
}) {
const {
openModalBtn,
@ -34,8 +35,6 @@ export function ConfirmationButton(props: {
children,
onOpenChanged,
onSubmitWithSuccess,
disabled,
size,
} = props
const [open, setOpen] = useState(false)
@ -76,9 +75,9 @@ export function ConfirmationButton(props: {
<Button
className={clsx(openModalBtn.className)}
onClick={() => updateOpen(true)}
disabled={disabled}
color="yellow"
size={size}
disabled={openModalBtn.disabled}
color={openModalBtn.color}
size={openModalBtn.size}
>
{openModalBtn.icon}
{openModalBtn.label}
@ -92,9 +91,17 @@ export function ResolveConfirmationButton(props: {
isSubmitting: boolean
openModalButtonClass?: string
submitButtonClass?: string
color?: ColorType
disabled?: boolean
}) {
const { onResolve, isSubmitting, openModalButtonClass, submitButtonClass } =
props
const {
onResolve,
isSubmitting,
openModalButtonClass,
submitButtonClass,
color,
disabled,
} = props
return (
<ConfirmationButton
openModalBtn={{
@ -104,6 +111,9 @@ export function ResolveConfirmationButton(props: {
isSubmitting && 'btn-disabled loading'
),
label: 'Resolve',
color: color,
disabled: isSubmitting || disabled,
size: 'xl',
}}
cancelBtn={{
label: 'Back',

View File

@ -82,11 +82,8 @@ export function CreateGroupButton(props: {
openModalBtn={{
label: label ? label : 'Create Group',
icon: icon,
className: clsx(
isSubmitting ? 'loading btn-disabled' : 'btn-primary',
'btn-sm, normal-case',
className
),
className: clsx(className),
disabled: isSubmitting,
}}
submitBtn={{
label: 'Create',

View File

@ -128,8 +128,10 @@ export function NumericResolutionPanel(props: {
<ResolveConfirmationButton
onResolve={resolve}
isSubmitting={isSubmitting}
openModalButtonClass={clsx('w-full mt-2', submitButtonClass)}
openModalButtonClass={clsx('w-full mt-2')}
submitButtonClass={submitButtonClass}
color={outcomeMode === 'CANCEL' ? 'yellow' : 'indigo'}
disabled={outcomeMode === undefined}
/>
</Col>
)

View File

@ -57,16 +57,16 @@ export function ResolutionPanel(props: {
setIsSubmitting(false)
}
const submitButtonClass =
outcome === 'YES'
? 'btn-primary'
: outcome === 'NO'
? 'bg-red-400 hover:bg-red-500'
: outcome === 'CANCEL'
? 'bg-yellow-400 hover:bg-yellow-500'
: outcome === 'MKT'
? 'bg-blue-400 hover:bg-blue-500'
: 'btn-disabled'
// const submitButtonClass =
// outcome === 'YES'
// ? 'btn-primary'
// : outcome === 'NO'
// ? 'bg-red-400 hover:bg-red-500'
// : outcome === 'CANCEL'
// ? 'bg-yellow-400 hover:bg-yellow-500'
// : outcome === 'MKT'
// ? 'bg-blue-400 hover:bg-blue-500'
// : 'btn-disabled'
return (
<Col className={clsx('relative rounded-md bg-white px-8 py-6', className)}>
@ -76,18 +76,14 @@ export function ResolutionPanel(props: {
</span>
)}
<div className="mb-6 whitespace-nowrap text-2xl">Resolve market</div>
<div className="mb-3 text-sm text-gray-500">Outcome</div>
<YesNoCancelSelector
className="mx-auto my-2"
selected={outcome}
onSelect={setOutcome}
btnClassName={isSubmitting ? 'btn-disabled' : ''}
/>
<Spacer h={4} />
<div>
{outcome === 'YES' ? (
<>
@ -123,16 +119,25 @@ export function ResolutionPanel(props: {
<>Resolving this market will immediately pay out {BETTORS}.</>
)}
</div>
<Spacer h={4} />
{!!error && <div className="text-red-500">{error}</div>}
<ResolveConfirmationButton
color={
outcome === 'YES'
? 'green'
: outcome === 'NO'
? 'red'
: outcome === 'CANCEL'
? 'yellow'
: outcome === 'MKT'
? 'blue'
: 'indigo'
}
disabled={!outcome}
onResolve={resolve}
isSubmitting={isSubmitting}
openModalButtonClass={clsx('w-full mt-2', submitButtonClass)}
submitButtonClass={submitButtonClass}
// openModalButtonClass={clsx('w-full mt-2', submitButtonClass)}
// submitButtonClass={submitButtonClass}
/>
</Col>
)

View File

@ -5,18 +5,17 @@ import { Row } from './layout/row'
import { ConfirmationButton } from './confirmation-button'
import { ExclamationIcon } from '@heroicons/react/solid'
import { formatMoney } from 'common/util/format'
import { Button, SizeType } from './button'
import { Button, ColorType, SizeType } from './button'
export function WarningConfirmationButton(props: {
amount: number | undefined
outcome?: 'YES' | 'NO' | undefined
marketType: 'freeResponse' | 'binary'
warning?: string
onSubmit: () => void
disabled: boolean
isSubmitting: boolean
openModalButtonClass?: string
submitButtonClassName?: string
color: ColorType
size: SizeType
}) {
const {
@ -26,9 +25,8 @@ export function WarningConfirmationButton(props: {
disabled,
isSubmitting,
openModalButtonClass,
submitButtonClassName,
outcome,
size,
color,
} = props
if (!warning) {
@ -36,9 +34,9 @@ export function WarningConfirmationButton(props: {
<Button
size={size}
disabled={isSubmitting || disabled}
className={clsx(openModalButtonClass, isSubmitting ? 'loading' : '')}
className={clsx(openModalButtonClass)}
onClick={onSubmit}
color={outcome === 'NO' ? 'red' : 'green'}
color={color}
>
{isSubmitting
? 'Submitting...'
@ -51,10 +49,12 @@ export function WarningConfirmationButton(props: {
return (
<ConfirmationButton
disabled={isSubmitting}
openModalBtn={{
className: clsx(isSubmitting && 'loading'),
label: amount ? `Wager ${formatMoney(amount)}` : 'Wager',
size: size,
color: 'yellow',
disabled: isSubmitting,
}}
cancelBtn={{
label: 'Cancel',
@ -65,7 +65,6 @@ export function WarningConfirmationButton(props: {
className: clsx('btn border-none btn-sm btn-ghost self-center'),
}}
onSubmit={onSubmit}
size={size}
>
<Row className="items-center text-xl">
<ExclamationIcon

View File

@ -213,7 +213,7 @@ export function NumberCancelSelector(props: {
return (
<Col className={clsx('gap-2', className)}>
<Button
color={selected === 'NUMBER' ? 'green' : 'gray'}
color={selected === 'NUMBER' ? 'indigo' : 'gray'}
onClick={() => onSelect('NUMBER')}
className={clsx('whitespace-nowrap', btnClassName)}
>
@ -244,7 +244,7 @@ function Button(props: {
type="button"
className={clsx(
'inline-flex flex-1 items-center justify-center rounded-md border border-transparent px-8 py-3 font-medium shadow-sm',
color === 'green' && 'btn-primary text-white',
color === 'green' && 'bg-teal-500 bg-teal-600 text-white',
color === 'red' && 'bg-red-400 text-white hover:bg-red-500',
color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500',
color === 'blue' && 'bg-blue-400 text-white hover:bg-blue-500',

View File

@ -218,9 +218,10 @@ export default function ProfilePage(props: {
/>
<ConfirmationButton
openModalBtn={{
className: 'btn btn-primary btn-square p-2',
className: 'p-2',
label: '',
icon: <RefreshIcon />,
icon: <RefreshIcon className="h-5 w-5" />,
color: 'indigo',
}}
submitBtn={{
label: 'Update key',