From 8f09717b2d5aef57decd6411387a646eef3eaf68 Mon Sep 17 00:00:00 2001
From: ingawei <ingawei@gmail.com>
Date: Thu, 29 Sep 2022 22:04:47 -0700
Subject: [PATCH] so many changes ew

---
 web/components/answers/answer-bet-panel.tsx   |  1 +
 .../answers/answer-resolve-panel.tsx          | 41 ++++++++++++------
 web/components/bet-panel.tsx                  |  2 +-
 web/components/bets-list.tsx                  |  3 +-
 web/components/confirmation-button.tsx        | 30 ++++++++-----
 web/components/groups/create-group-button.tsx |  7 +--
 web/components/numeric-resolution-panel.tsx   |  4 +-
 web/components/resolution-panel.tsx           | 43 +++++++++++--------
 .../warning-confirmation-button.tsx           | 17 ++++----
 web/components/yes-no-selector.tsx            |  4 +-
 web/pages/profile.tsx                         |  5 ++-
 11 files changed, 94 insertions(+), 63 deletions(-)

diff --git a/web/components/answers/answer-bet-panel.tsx b/web/components/answers/answer-bet-panel.tsx
index 4842f4b2..22fcb20d 100644
--- a/web/components/answers/answer-bet-panel.tsx
+++ b/web/components/answers/answer-bet-panel.tsx
@@ -191,6 +191,7 @@ export function AnswerBetPanel(props: {
           onSubmit={submitBet}
           isSubmitting={isSubmitting}
           disabled={!!betDisabled}
+          color={'green'}
         />
       ) : (
         <BetSignUpPrompt />
diff --git a/web/components/answers/answer-resolve-panel.tsx b/web/components/answers/answer-resolve-panel.tsx
index ddb7942c..7f14bee8 100644
--- a/web/components/answers/answer-resolve-panel.tsx
+++ b/web/components/answers/answer-resolve-panel.tsx
@@ -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>
diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index 5249e889..e93c0e62 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -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
diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx
index 5a95f22f..0ba90c54 100644
--- 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 () => {
diff --git a/web/components/confirmation-button.tsx b/web/components/confirmation-button.tsx
index 13c3c50a..703b47c0 100644
--- a/web/components/confirmation-button.tsx
+++ b/web/components/confirmation-button.tsx
@@ -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',
diff --git a/web/components/groups/create-group-button.tsx b/web/components/groups/create-group-button.tsx
index e0324c4e..4f024c84 100644
--- 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: clsx(className),
+        disabled: isSubmitting,
       }}
       submitBtn={{
         label: 'Create',
diff --git a/web/components/numeric-resolution-panel.tsx b/web/components/numeric-resolution-panel.tsx
index 0220f7a7..fa36dff3 100644
--- 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>
   )
diff --git a/web/components/resolution-panel.tsx b/web/components/resolution-panel.tsx
index 7ef6e4f3..421a14f0 100644
--- a/web/components/resolution-panel.tsx
+++ b/web/components/resolution-panel.tsx
@@ -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>
   )
diff --git a/web/components/warning-confirmation-button.tsx b/web/components/warning-confirmation-button.tsx
index 69a6f5e6..f8fd1c9c 100644
--- a/web/components/warning-confirmation-button.tsx
+++ b/web/components/warning-confirmation-button.tsx
@@ -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
diff --git a/web/components/yes-no-selector.tsx b/web/components/yes-no-selector.tsx
index f73cdef2..10a58a42 100644
--- 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',
diff --git a/web/pages/profile.tsx b/web/pages/profile.tsx
index caa9f47a..5773f30f 100644
--- 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',