getting rid of daisy buttons

This commit is contained in:
ingawei 2022-09-29 20:08:42 -07:00
parent 2625ab1549
commit 0801f6a94a
5 changed files with 48 additions and 50 deletions

View File

@ -184,16 +184,13 @@ export function AnswerBetPanel(props: {
<Spacer h={6} />
{user ? (
<WarningConfirmationButton
size="xl"
marketType="freeResponse"
amount={betAmount}
warning={warning}
onSubmit={submitBet}
isSubmitting={isSubmitting}
disabled={!!betDisabled}
openModalButtonClass={clsx(
'btn self-stretch',
betDisabled ? 'btn-disabled' : 'btn-primary'
)}
/>
) : (
<BetSignUpPrompt />

View File

@ -399,18 +399,12 @@ export function BuyPanel(props: {
warning={warning}
onSubmit={submitBet}
isSubmitting={isSubmitting}
openModalButtonClass={clsx(
'btn mb-2 flex-1',
betDisabled || outcome === undefined
? 'btn-disabled bg-greyscale-2'
: outcome === 'NO'
? 'border-none bg-red-400 hover:bg-red-500'
: 'border-none bg-teal-500 hover:bg-teal-600'
)}
disabled={!!betDisabled || outcome === undefined}
size="xl"
/>
)}
<button
className="text-greyscale-6 mx-auto select-none text-sm underline xl:hidden"
className="text-greyscale-6 mx-auto mt-3 select-none text-sm underline xl:hidden"
onClick={() => setSeeLimit(true)}
>
Advanced

View File

@ -46,21 +46,27 @@ export function Button(props: {
<button
type={type}
className={clsx(
'font-md items-center justify-center rounded-md border border-transparent shadow-sm hover:transition-colors disabled:cursor-not-allowed disabled:opacity-50',
className,
'font-md items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
sizeClasses,
color === 'green' && 'btn-primary 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',
color === 'indigo' && 'bg-indigo-500 text-white hover:bg-indigo-600',
color === 'gray' && 'bg-gray-50 text-gray-600 hover:bg-gray-200',
color === 'green' &&
'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',
color === 'red' &&
'disabled:bg-greyscale-2 bg-red-400 text-white hover:bg-red-500',
color === 'yellow' &&
'disabled:bg-greyscale-2 bg-yellow-400 text-white hover:bg-yellow-500',
color === 'blue' &&
'disabled:bg-greyscale-2 bg-blue-400 text-white hover:bg-blue-500',
color === 'indigo' &&
'disabled:bg-greyscale-2 bg-indigo-500 text-white hover:bg-indigo-600',
color === 'gray' &&
'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
color === 'gradient' &&
'border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
'disabled:bg-greyscale-2 border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
color === 'gray-white' &&
'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none',
'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
color === 'highlight-blue' &&
'text-highlight-blue border-none shadow-none',
className
'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none'
)}
disabled={disabled}
onClick={onClick}

View File

@ -1,5 +1,6 @@
import clsx from 'clsx'
import { ReactNode, useState } from 'react'
import { Button, SizeType } from './button'
import { Col } from './layout/col'
import { Modal } from './layout/modal'
import { Row } from './layout/row'
@ -22,6 +23,8 @@ export function ConfirmationButton(props: {
onSubmit?: () => void
onOpenChanged?: (isOpen: boolean) => void
onSubmitWithSuccess?: () => Promise<boolean>
disabled: boolean
size?: SizeType
}) {
const {
openModalBtn,
@ -31,6 +34,8 @@ export function ConfirmationButton(props: {
children,
onOpenChanged,
onSubmitWithSuccess,
disabled,
size,
} = props
const [open, setOpen] = useState(false)
@ -68,13 +73,16 @@ export function ConfirmationButton(props: {
</Row>
</Col>
</Modal>
<div
className={clsx('btn', openModalBtn.className)}
<Button
className={clsx(openModalBtn.className)}
onClick={() => updateOpen(true)}
disabled={disabled}
color="yellow"
size={size}
>
{openModalBtn.icon}
{openModalBtn.label}
</div>
</Button>
</>
)
}

View File

@ -5,6 +5,7 @@ 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'
export function WarningConfirmationButton(props: {
amount: number | undefined
@ -12,10 +13,11 @@ export function WarningConfirmationButton(props: {
marketType: 'freeResponse' | 'binary'
warning?: string
onSubmit: () => void
disabled?: boolean
disabled: boolean
isSubmitting: boolean
openModalButtonClass?: string
submitButtonClassName?: string
size: SizeType
}) {
const {
amount,
@ -26,53 +28,44 @@ export function WarningConfirmationButton(props: {
openModalButtonClass,
submitButtonClassName,
outcome,
marketType,
size,
} = props
if (!warning) {
return (
<button
className={clsx(
openModalButtonClass,
isSubmitting ? 'loading btn-disabled' : '',
disabled && 'btn-disabled',
marketType === 'binary'
? !outcome
? 'btn-disabled bg-greyscale-2'
: ''
: ''
)}
<Button
size={size}
disabled={isSubmitting || disabled}
className={clsx(openModalButtonClass, isSubmitting ? 'loading' : '')}
onClick={onSubmit}
color={outcome === 'NO' ? 'red' : 'green'}
>
{isSubmitting
? 'Submitting...'
: amount
? `Wager ${formatMoney(amount)}`
: 'Wager'}
</button>
</Button>
)
}
return (
<ConfirmationButton
disabled={isSubmitting}
openModalBtn={{
className: clsx(
openModalButtonClass,
isSubmitting && 'btn-disabled loading'
),
className: clsx(isSubmitting && 'loading'),
label: amount ? `Wager ${formatMoney(amount)}` : 'Wager',
}}
cancelBtn={{
label: 'Cancel',
className: 'btn-warning',
className: 'btn btn-warning',
}}
submitBtn={{
label: 'Submit',
className: clsx(
'border-none btn-sm btn-ghost self-center',
submitButtonClassName
),
className: clsx('btn border-none btn-sm btn-ghost self-center'),
}}
onSubmit={onSubmit}
size={size}
>
<Row className="items-center text-xl">
<ExclamationIcon