From c6e5e04e656e1889468c896c26ceeaffff8374f6 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Tue, 4 Oct 2022 08:02:20 -0600
Subject: [PATCH] Convert confirmation daisy buttons to tailwind

---
 web/components/bets-list.tsx                  |  2 +-
 web/components/confirmation-button.tsx        | 25 +++++++------------
 .../contract/contract-report-resolution.tsx   |  8 ------
 web/components/groups/create-group-button.tsx |  7 ++----
 web/components/groups/group-selector.tsx      |  2 +-
 web/components/numeric-resolution-panel.tsx   |  8 ------
 .../warning-confirmation-button.tsx           |  4 +--
 web/pages/profile.tsx                         |  1 -
 8 files changed, 15 insertions(+), 42 deletions(-)

diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx
index c2773741..247bb63b 100644
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@@ -612,7 +612,7 @@ function SellButton(props: {
         label: 'Sell',
         disabled: isSubmitting,
       }}
-      submitBtn={{ className: 'btn-primary', label: 'Sell' }}
+      submitBtn={{ label: 'Sell', color: 'green' }}
       onSubmit={async () => {
         setIsSubmitting(true)
         await sellBet({ contractId: contract.id, betId: bet.id })
diff --git a/web/components/confirmation-button.tsx b/web/components/confirmation-button.tsx
index e0f7efd8..ded155f8 100644
--- a/web/components/confirmation-button.tsx
+++ b/web/components/confirmation-button.tsx
@@ -16,11 +16,11 @@ export function ConfirmationButton(props: {
   }
   cancelBtn?: {
     label?: string
-    className?: string
+    color?: ColorType
   }
   submitBtn?: {
     label?: string
-    className?: string
+    color?: ColorType
     isSubmitting?: boolean
   }
   children: ReactNode
@@ -53,14 +53,14 @@ export function ConfirmationButton(props: {
         <Col className="gap-4 rounded-md bg-white px-8 py-6">
           {children}
           <Row className="gap-4">
-            <div
-              className={clsx('btn', cancelBtn?.className)}
+            <Button
+              color={cancelBtn?.color ?? 'gray-white'}
               onClick={() => updateOpen(false)}
             >
               {cancelBtn?.label ?? 'Cancel'}
-            </div>
+            </Button>
             <Button
-              className={clsx('btn', submitBtn?.className)}
+              color={submitBtn?.color ?? 'blue'}
               onClick={
                 onSubmitWithSuccess
                   ? () =>
@@ -100,18 +100,11 @@ export function ResolveConfirmationButton(props: {
   onResolve: () => void
   isSubmitting: boolean
   openModalButtonClass?: string
-  submitButtonClass?: string
   color?: ColorType
   disabled?: boolean
 }) {
-  const {
-    onResolve,
-    isSubmitting,
-    openModalButtonClass,
-    submitButtonClass,
-    color,
-    disabled,
-  } = props
+  const { onResolve, isSubmitting, openModalButtonClass, color, disabled } =
+    props
   return (
     <ConfirmationButton
       openModalBtn={{
@@ -126,7 +119,7 @@ export function ResolveConfirmationButton(props: {
       }}
       submitBtn={{
         label: 'Resolve',
-        className: clsx('border-none', submitButtonClass),
+        color: color,
         isSubmitting,
       }}
       onSubmit={onResolve}
diff --git a/web/components/contract/contract-report-resolution.tsx b/web/components/contract/contract-report-resolution.tsx
index 3ae13f93..a5e5c75f 100644
--- a/web/components/contract/contract-report-resolution.tsx
+++ b/web/components/contract/contract-report-resolution.tsx
@@ -50,14 +50,6 @@ export function ContractReportResolution(props: { contract: Contract }) {
           icon: <FlagIcon className="h-5 w-5" />,
           className: clsx(flagClass, reporting && 'btn-disabled loading'),
         }}
-        cancelBtn={{
-          label: 'Cancel',
-          className: 'border-none btn-sm btn-ghost self-center',
-        }}
-        submitBtn={{
-          label: 'Submit',
-          className: 'btn-secondary',
-        }}
         onSubmitWithSuccess={onSubmit}
         disabled={userReported}
       >
diff --git a/web/components/groups/create-group-button.tsx b/web/components/groups/create-group-button.tsx
index e8376b4b..1df29764 100644
--- a/web/components/groups/create-group-button.tsx
+++ b/web/components/groups/create-group-button.tsx
@@ -1,4 +1,3 @@
-import clsx from 'clsx'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { groupPath } from 'web/lib/firebase/groups'
@@ -87,10 +86,8 @@ export function CreateGroupButton(props: {
       }}
       submitBtn={{
         label: 'Create',
-        className: clsx(
-          'normal-case',
-          isSubmitting ? 'loading btn-disabled' : ' btn-primary'
-        ),
+        color: 'green',
+        isSubmitting,
       }}
       onSubmitWithSuccess={onSubmit}
       onOpenChanged={(isOpen) => {
diff --git a/web/components/groups/group-selector.tsx b/web/components/groups/group-selector.tsx
index caeb5f7d..04c2a804 100644
--- a/web/components/groups/group-selector.tsx
+++ b/web/components/groups/group-selector.tsx
@@ -163,7 +163,7 @@ export function GroupSelector(props: {
                   user={creator}
                   onOpenStateChange={setIsCreatingNewGroup}
                   className={
-                    'w-full justify-start rounded-none border-0 bg-white pl-2 font-normal text-gray-900 hover:bg-indigo-500 hover:text-white'
+                    'flex w-full flex-row items-center justify-start rounded-none border-0 bg-white pl-2 font-normal text-gray-900 hover:bg-indigo-500 hover:text-white'
                   }
                   label={'Create a new Group'}
                   addGroupIdParamOnSubmit
diff --git a/web/components/numeric-resolution-panel.tsx b/web/components/numeric-resolution-panel.tsx
index fa36dff3..f5fbb53c 100644
--- a/web/components/numeric-resolution-panel.tsx
+++ b/web/components/numeric-resolution-panel.tsx
@@ -73,13 +73,6 @@ export function NumericResolutionPanel(props: {
     setIsSubmitting(false)
   }
 
-  const submitButtonClass =
-    outcomeMode === 'CANCEL'
-      ? 'bg-yellow-400 hover:bg-yellow-500'
-      : outcome !== undefined
-      ? 'btn-primary'
-      : 'btn-disabled'
-
   return (
     <Col
       className={clsx(
@@ -129,7 +122,6 @@ export function NumericResolutionPanel(props: {
         onResolve={resolve}
         isSubmitting={isSubmitting}
         openModalButtonClass={clsx('w-full mt-2')}
-        submitButtonClass={submitButtonClass}
         color={outcomeMode === 'CANCEL' ? 'yellow' : 'indigo'}
         disabled={outcomeMode === undefined}
       />
diff --git a/web/components/warning-confirmation-button.tsx b/web/components/warning-confirmation-button.tsx
index abdf443e..71553663 100644
--- a/web/components/warning-confirmation-button.tsx
+++ b/web/components/warning-confirmation-button.tsx
@@ -57,11 +57,11 @@ export function WarningConfirmationButton(props: {
       }}
       cancelBtn={{
         label: 'Cancel',
-        className: 'btn btn-warning',
+        color: 'yellow',
       }}
       submitBtn={{
         label: 'Submit',
-        className: clsx('btn border-none btn-sm btn-ghost self-center'),
+        color: 'gray',
       }}
       onSubmit={onSubmit}
     >
diff --git a/web/pages/profile.tsx b/web/pages/profile.tsx
index 637ad518..b7607f8b 100644
--- a/web/pages/profile.tsx
+++ b/web/pages/profile.tsx
@@ -215,7 +215,6 @@ export default function ProfilePage(props: {
                 }}
                 submitBtn={{
                   label: 'Update key',
-                  className: 'btn-primary',
                 }}
                 onSubmitWithSuccess={async () => {
                   updateApiKey()