getting rid of daisy buttons (#969)

* getting rid of daisy buttons so bet button does not turn black on mobile
2022-09-30 00:41:22 -05:00 · 2022-09-30 00:41:22 -05:00 · b83e5db563
commit b83e5db563
parent 13b3613460
12 changed files with 107 additions and 107 deletions
--- a/web/components/answers/answer-bet-panel.tsx
+++ b/web/components/answers/answer-bet-panel.tsx
@ -184,16 +184,14 @@ 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'
-          )}
+          color={'indigo'}
        />
      ) : (
        <BetSignUpPrompt />
--- a/web/components/answers/answer-resolve-panel.tsx
+++ b/web/components/answers/answer-resolve-panel.tsx
@ -85,17 +85,6 @@ 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'
-
  return (
    <Col className="gap-4 rounded">
      <Row className="justify-between">
@ -129,11 +118,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>
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@ -395,22 +395,16 @@ export function BuyPanel(props: {
          <WarningConfirmationButton
            marketType="binary"
            amount={betAmount}
-            outcome={outcome}
            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"
+            color={outcome === 'NO' ? 'red' : 'green'}
          />
        )}
        <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
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@ -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 () => {
--- a/web/components/button.tsx
+++ b/web/components/button.tsx
@ -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}
--- a/web/components/confirmation-button.tsx
+++ b/web/components/confirmation-button.tsx
@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import { ReactNode, useState } from 'react'
+import { Button, ColorType, SizeType } from './button'
 import { Col } from './layout/col'
 import { Modal } from './layout/modal'
 import { Row } from './layout/row'
@ -9,6 +10,9 @@ export function ConfirmationButton(props: {
    label: string
    icon?: JSX.Element
    className?: string
+    color?: ColorType
+    size?: SizeType
+    disabled?: boolean
  }
  cancelBtn?: {
    label?: string
@ -68,13 +72,16 @@ export function ConfirmationButton(props: {
          </Row>
        </Col>
      </Modal>
-      <div
-        className={clsx('btn', openModalBtn.className)}
+      <Button
+        className={clsx(openModalBtn.className)}
        onClick={() => updateOpen(true)}
+        disabled={openModalBtn.disabled}
+        color={openModalBtn.color}
+        size={openModalBtn.size}
      >
        {openModalBtn.icon}
        {openModalBtn.label}
-      </div>
+      </Button>
    </>
  )
 }
@ -84,18 +91,25 @@ 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={{
-        className: clsx(
-          'border-none self-start',
-          openModalButtonClass,
-          isSubmitting && 'btn-disabled loading'
-        ),
+        className: clsx('border-none self-start', openModalButtonClass),
        label: 'Resolve',
+        color: color,
+        disabled: isSubmitting || disabled,
+        size: 'xl',
      }}
      cancelBtn={{
        label: 'Back',
--- a/web/components/groups/create-group-button.tsx
+++ b/web/components/groups/create-group-button.tsx
@ -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: className,
+        disabled: isSubmitting,
      }}
      submitBtn={{
        label: 'Create',
--- a/web/components/numeric-resolution-panel.tsx
+++ b/web/components/numeric-resolution-panel.tsx
@ -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>
  )
--- a/web/components/resolution-panel.tsx
+++ b/web/components/resolution-panel.tsx
@ -57,17 +57,6 @@ 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'
-
  return (
    <Col className={clsx('relative rounded-md bg-white px-8 py-6', className)}>
      {isAdmin && !isCreator && (
@ -76,18 +65,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 +108,23 @@ 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}
      />
    </Col>
  )
--- a/web/components/warning-confirmation-button.tsx
+++ b/web/components/warning-confirmation-button.tsx
@ -5,17 +5,18 @@ import { Row } from './layout/row'
 import { ConfirmationButton } from './confirmation-button'
 import { ExclamationIcon } from '@heroicons/react/solid'
 import { formatMoney } from 'common/util/format'
+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
+  disabled: boolean
  isSubmitting: boolean
  openModalButtonClass?: string
-  submitButtonClassName?: string
+  color: ColorType
+  size: SizeType
 }) {
  const {
    amount,
@ -24,53 +25,43 @@ export function WarningConfirmationButton(props: {
    disabled,
    isSubmitting,
    openModalButtonClass,
-    submitButtonClassName,
-    outcome,
-    marketType,
+    size,
+    color,
  } = 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)}
        onClick={onSubmit}
+        color={color}
      >
        {isSubmitting
          ? 'Submitting...'
          : amount
          ? `Wager ${formatMoney(amount)}`
          : 'Wager'}
-      </button>
+      </Button>
    )
  }

  return (
    <ConfirmationButton
      openModalBtn={{
-        className: clsx(
-          openModalButtonClass,
-          isSubmitting && 'btn-disabled loading'
-        ),
        label: amount ? `Wager ${formatMoney(amount)}` : 'Wager',
+        size: size,
+        color: 'yellow',
+        disabled: isSubmitting,
      }}
      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}
    >
--- a/web/components/yes-no-selector.tsx
+++ b/web/components/yes-no-selector.tsx
@ -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',
--- a/web/pages/profile.tsx
+++ b/web/pages/profile.tsx
@ -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',