remove all other uses of 'btn'

web/components/answers/answer-bet-panel.tsx

@@ -126,7 +126,10 @@ export function AnswerBetPanel(props: {
         </div>
 
         {!isModal && (
-          <button className="btn-ghost btn-circle" onClick={closePanel}>
+          <button
+            className="hover:bg-greyscale-2 rounded-full"
+            onClick={closePanel}
+          >
             <XIcon
               className="mx-auto h-8 w-8 text-gray-500"
               aria-hidden="true"

web/components/answers/answer-resolve-panel.tsx

@@ -10,6 +10,7 @@ import { ChooseCancelSelector } from '../yes-no-selector'
 import { ResolveConfirmationButton } from '../confirmation-button'
 import { removeUndefinedProps } from 'common/util/object'
 import { BETTOR, PAST_BETS } from 'common/user'
+import { Button } from '../button'
 
 export function AnswerResolvePanel(props: {
   isAdmin: boolean
@@ -109,14 +110,14 @@ export function AnswerResolvePanel(props: {
           )}
         >
           {resolveOption && (
-            <button
+            <Button
-              className="btn btn-ghost"
+              color="gray-white"
               onClick={() => {
                 setResolveOption(undefined)
               }}
             >
               Clear
-            </button>
+            </Button>
           )}
 
           <ResolveConfirmationButton

web/components/answers/create-answer-panel.tsx

@@ -197,17 +197,15 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
             </>
           )}
           {user ? (
-            <button
+            <Button
-              className={clsx(
+              color="green"
-                'btn mt-2',
+              size="lg"
-                canSubmit ? 'btn-outline' : 'btn-disabled',
+              loading={isSubmitting}
-                isSubmitting && 'loading'
-              )}
               disabled={!canSubmit}
               onClick={withTracking(submitAnswer, 'submit answer')}
             >
               Submit
-            </button>
+            </Button>
           ) : (
             text && (
               <Button

web/components/contract/comment-bounty-dialog.tsx

@@ -64,7 +64,7 @@ export function CommentBountyDialog(props: {
 
         <Row className={'items-center gap-2'}>
           <Button
-            className={clsx('ml-2', isLoading && 'btn-disabled')}
+            className="ml-2"
             onClick={submit}
             disabled={isLoading}
             color={'blue'}

web/components/create-post.tsx

@@ -93,9 +93,10 @@ export function CreatePost(props: { group?: Group }) {
 
             <Button
               type="submit"
-              loading={isSubmitting}
+              color="green"
               size="xl"
-              disabled={isSubmitting || !isValid || upload.isLoading}
+              loading={isSubmitting}
+              disabled={!isValid || upload.isLoading}
               onClick={async () => {
                 setIsSubmitting(true)
                 await savePost(title)

web/components/groups/edit-group-button.tsx

@@ -11,6 +11,7 @@ import { FilterSelectUsers } from 'web/components/filter-select-users'
 import { User } from 'common/user'
 import { useMemberIds } from 'web/hooks/use-group'
 import { Input } from '../input'
+import { Button } from '../button'
 
 export function EditGroupButton(props: { group: Group; className?: string }) {
   const { group, className } = props
@@ -40,14 +41,14 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
 
   return (
     <div className={clsx('flex p-1', className)}>
-      <div
+      <Button
-        className={clsx(
+        size="sm"
-          'btn-ghost cursor-pointer whitespace-nowrap rounded-md p-1 text-sm text-gray-700'
+        color="gray-white"
-        )}
+        className="whitespace-nowrap"
         onClick={() => updateOpen(!open)}
       >
         <PencilIcon className="inline h-4 w-4" /> Edit
-      </div>
+      </Button>
       <Modal open={open} setOpen={updateOpen}>
         <div className="h-full rounded-md bg-white p-8">
           <div className="form-control w-full">
@@ -77,8 +78,9 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
           </div>
 
           <div className="modal-action">
-            <label
+            <Button
-              htmlFor="edit"
+              color="red"
+              size="xs"
               onClick={() => {
                 if (confirm('Are you sure you want to delete this group?')) {
                   deleteGroup(group)
@@ -86,30 +88,24 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
                   router.replace('/groups')
                 }
               }}
-              className={clsx(
-                'btn btn-sm btn-outline mr-auto self-center hover:border-red-500 hover:bg-red-500'
-              )}
             >
               Delete
-            </label>
+            </Button>
-            <label
+            <Button
-              htmlFor="edit"
+              color="gray-white"
-              className={'btn'}
+              size="xs"
               onClick={() => updateOpen(false)}
             >
               Cancel
-            </label>
+            </Button>
-            <label
+            <Button
-              className={clsx(
+              color="green"
-                'btn',
+              disabled={saveDisabled}
-                saveDisabled ? 'btn-disabled' : 'btn-primary',
+              loading={isSubmitting}
-                isSubmitting && 'loading'
-              )}
-              htmlFor="edit"
               onClick={onSubmit}
             >
               Save
-            </label>
+            </Button>
           </div>
         </div>
       </Modal>

web/components/groups/group-overview.tsx

@@ -116,10 +116,7 @@ export function GroupPosts(props: { posts: Post[]; group: Group }) {
         </Col>
         <Col>
           {user && (
-            <Button
+            <Button onClick={() => setShowCreatePost(!showCreatePost)}>
-              className="btn-md"
-              onClick={() => setShowCreatePost(!showCreatePost)}
-            >
               Add a Post
             </Button>
           )}
@@ -432,7 +429,7 @@ export function GroupAbout(props: {
             <CopyLinkButton
               url={shareUrl}
               tracking="copy group share link"
-              buttonClassName="btn-md rounded-l-none"
+              buttonClassName="rounded-l-none"
               toastClassName={'-left-28 mt-1'}
             />
           </Col>

web/components/numeric-bet-panel.tsx

@@ -20,6 +20,7 @@ import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
 import { BetSignUpPrompt } from './sign-up-prompt'
 import { track } from 'web/lib/service/analytics'
+import { Button } from './button'
 
 export function NumericBetPanel(props: {
   contract: NumericContract
@@ -108,7 +109,7 @@ function NumericBuyPanel(props: {
     })
   }
 
-  const betDisabled = isSubmitting || !betAmount || !bucketChoice || error
+  const betDisabled = isSubmitting || !betAmount || !bucketChoice || !!error
 
   const { newBet, newPool, newTotalShares, newTotalBets } = getNumericBetsInfo(
     value ?? 0,
@@ -195,16 +196,14 @@ function NumericBuyPanel(props: {
       <Spacer h={8} />
 
       {user && (
-        <button
+        <Button
-          className={clsx(
+          disabled={betDisabled}
-            'btn flex-1',
+          color="green"
-            betDisabled ? 'btn-disabled' : 'btn-primary',
+          loading={isSubmitting}
-            isSubmitting ? 'loading' : ''
+          onClick={submitBet}
-          )}
-          onClick={betDisabled ? undefined : submitBet}
         >
-          {isSubmitting ? 'Submitting...' : 'Submit'}
+          Submit
-        </button>
+        </Button>
       )}
 
       {wasSubmitted && <div className="mt-4">Bet submitted!</div>}

web/components/referrals-button.tsx

@@ -12,6 +12,7 @@ import { FilterSelectUsers } from 'web/components/filter-select-users'
 import { getUser, updateUser } from 'web/lib/firebase/users'
 import { TextButton } from 'web/components/text-button'
 import { UserLink } from 'web/components/user-link'
+import { Button } from './button'
 
 export function ReferralsButton(props: {
   user: User
@@ -89,11 +90,9 @@ function ReferralsDialog(props: {
                         maxUsers={1}
                       />
                       <Row className={'mt-0 justify-end'}>
-                        <button
+                        <Button
                           className={
-                            referredBy.length === 0
+                            referredBy.length === 0 ? 'hidden' : 'my-2 w-24'
-                              ? 'hidden'
-                              : 'btn btn-primary btn-md my-2 w-24 normal-case'
                           }
                           disabled={referredBy.length === 0 || isSubmitting}
                           onClick={() => {
@@ -114,7 +113,7 @@ function ReferralsDialog(props: {
                           }}
                         >
                           Save
-                        </button>
+                        </Button>
                       </Row>
                       <span className={'text-warning'}>
                         {referredBy.length > 0 &&

web/components/resolution-panel.tsx

@@ -72,7 +72,6 @@ export function ResolutionPanel(props: {
         className="mx-auto my-2"
         selected={outcome}
         onSelect={setOutcome}
-        btnClassName={isSubmitting ? 'btn-disabled' : ''}
       />
       <Spacer h={4} />
       <div>

web/components/sell-button.tsx

@@ -1,59 +0,0 @@
-import { BinaryContract, PseudoNumericContract } from 'common/contract'
-import { User } from 'common/user'
-import { useUserContractBets } from 'web/hooks/use-user-bets'
-import { useState } from 'react'
-import { Col } from './layout/col'
-import clsx from 'clsx'
-import { SellSharesModal } from './sell-modal'
-
-export function SellButton(props: {
-  contract: BinaryContract | PseudoNumericContract
-  user: User | null | undefined
-  sharesOutcome: 'YES' | 'NO' | undefined
-  shares: number
-  panelClassName?: string
-}) {
-  const { contract, user, sharesOutcome, shares, panelClassName } = props
-  const userBets = useUserContractBets(user?.id, contract.id)
-  const [showSellModal, setShowSellModal] = useState(false)
-  const { mechanism, outcomeType } = contract
-  const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
-
-  if (sharesOutcome && user && mechanism === 'cpmm-1') {
-    return (
-      <Col className={'items-center'}>
-        <button
-          className={clsx(
-            'btn-sm w-24 gap-1',
-            // from the yes-no-selector:
-            'inline-flex items-center justify-center rounded-3xl border-2 p-2',
-            sharesOutcome === 'NO'
-              ? 'hover:bg-primary-focus border-primary hover:border-primary-focus text-primary hover:text-white'
-              : 'border-red-400 text-red-500 hover:border-red-500 hover:bg-red-500 hover:text-white'
-          )}
-          onClick={() => setShowSellModal(true)}
-        >
-          Sell{' '}
-          {isPseudoNumeric
-            ? { YES: 'HIGH', NO: 'LOW' }[sharesOutcome]
-            : sharesOutcome}
-        </button>
-        <div className={'mt-1 w-24 text-center text-sm text-gray-500'}>
-          {'(' + Math.floor(shares) + ' shares)'}
-        </div>
-        {showSellModal && (
-          <SellSharesModal
-            className={panelClassName}
-            contract={contract}
-            user={user}
-            userBets={userBets ?? []}
-            shares={shares}
-            sharesOutcome={sharesOutcome}
-            setOpen={setShowSellModal}
-          />
-        )}
-      </Col>
-    )
-  }
-  return <div />
-}

web/components/yes-no-selector.tsx

@@ -101,7 +101,7 @@ export function YesNoCancelSelector(props: {
       <Button
         color={selected === 'MKT' ? 'blue' : 'gray'}
         onClick={() => onSelect('MKT')}
-        className={clsx(btnClassName, 'btn-sm')}
+        className={btnClassName}
       >
         PROB
       </Button>
@@ -109,7 +109,7 @@ export function YesNoCancelSelector(props: {
       <Button
         color={selected === 'CANCEL' ? 'yellow' : 'gray'}
         onClick={() => onSelect('CANCEL')}
-        className={clsx(btnClassName, 'btn-sm')}
+        className={btnClassName}
       >
         N/A
       </Button>

web/pages/[username]/[contractSlug].tsx

@@ -248,10 +248,10 @@ export function ContractPageContent(
           ogCardProps={ogCardProps}
         />
       )}
-      <Col className="w-full justify-between rounded border-0 border-gray-100 bg-white py-6 pl-1 pr-2 sm:px-2 md:px-6 md:py-8">
+      <Col className="w-full justify-between rounded bg-white py-6 pl-1 pr-2 sm:px-2 md:px-6 md:py-8">
         {backToHome && (
           <button
-            className="btn btn-sm mb-4 items-center gap-2 self-start border-0 border-gray-700 bg-white normal-case text-gray-700 hover:bg-white hover:text-gray-700 lg:hidden"
+            className="mb-4 items-center gap-2 self-start bg-white text-gray-700 lg:hidden"
             onClick={backToHome}
           >
             <ArrowLeftIcon className="h-5 w-5 text-gray-700" />

web/pages/admin.tsx

@@ -11,6 +11,7 @@ import { useAdmin } from 'web/hooks/use-admin'
 import { contractPath } from 'web/lib/firebase/contracts'
 import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth'
 import { firestoreConsolePath } from 'common/envs/constants'
+import { Button } from 'web/components/button'
 
 export const getServerSideProps = redirectIfLoggedOut('/')
 
@@ -107,9 +108,7 @@ function UsersTable() {
           limit: 25,
         }}
       />
-      <button className="btn" onClick={exportCsv}>
+      <Button onClick={exportCsv}>Export emails to CSV</Button>
-        Export emails to CSV
-      </button>
     </>
   )
 }

web/pages/charity/[charitySlug].tsx

@@ -23,6 +23,7 @@ import { Donation } from 'web/components/charity/feed-items'
 import { manaToUSD } from 'common/util/format'
 import { track } from 'web/lib/service/analytics'
 import { SEO } from 'web/components/SEO'
+import { Button } from 'web/components/button'
 
 export default function CharityPageWrapper() {
   const router = useRouter()
@@ -126,15 +127,13 @@ function Blurb({ text }: { text: string }) {
       >
         {text}
       </div>
-      <button
+      <Button
+        color="indigo"
         onClick={() => setOpen(!open)}
-        className={clsx(
+        className={clsx('my-3', hideExpander && 'invisible')}
-          'btn btn-link capitalize-none my-3 normal-case text-indigo-700',
-          hideExpander && 'invisible'
-        )}
       >
         {open ? 'Hide' : 'Read more'}
-      </button>
+      </Button>
     </>
   )
 }
@@ -175,7 +174,7 @@ function DonationBox(props: {
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [error, setError] = useState<string | undefined>()
 
-  const donateDisabled = isSubmitting || !amount || error
+  const donateDisabled = isSubmitting || !amount || !!error
 
   const onSubmit: React.FormEventHandler = async (e) => {
     if (!user || donateDisabled) return
@@ -230,16 +229,15 @@ function DonationBox(props: {
         <Spacer h={8} />
 
         {user && (
-          <button
+          <Button
             type="submit"
-            className={clsx(
+            color="green"
-              'btn w-full',
+            className="w-full"
-              donateDisabled ? 'btn-disabled' : 'btn-primary',
+            disabled={donateDisabled}
-              isSubmitting && 'loading'
+            loading={isSubmitting}
-            )}
           >
             Donate
-          </button>
+          </Button>
         )}
       </form>
     </div>

web/pages/create.tsx

@@ -519,20 +519,18 @@ export function NewContract(props: {
           )}
         </div>
 
-        <button
+        <Button
           type="submit"
-          className={clsx(
+          color="green"
-            'btn btn-primary normal-case',
+          loading={isSubmitting}
-            isSubmitting && 'loading disabled'
+          disabled={!isValid || upload.isLoading}
-          )}
-          disabled={isSubmitting || !isValid || upload.isLoading}
           onClick={(e) => {
             e.preventDefault()
             submit()
           }}
         >
           {isSubmitting ? 'Creating...' : 'Create question'}
-        </button>
+        </Button>
       </Row>
 
       <Spacer h={6} />

web/pages/profile.tsx

@@ -3,11 +3,13 @@ import { PrivateUser, User } from 'common/user'
 import { cleanDisplayName, cleanUsername } from 'common/util/clean-username'
 import Link from 'next/link'
 import React, { useState } from 'react'
+import { buttonClass } from 'web/components/button'
 import { ConfirmationButton } from 'web/components/confirmation-button'
 import { ExpandingInput } from 'web/components/expanding-input'
 import { Input } from 'web/components/input'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
+import { LoadingIndicator } from 'web/components/loading-indicator'
 import { Page } from 'web/components/page'
 import { SEO } from 'web/components/SEO'
 import { SiteLink } from 'web/components/site-link'
@@ -129,14 +131,17 @@ export default function ProfilePage(props: {
       <Col className="max-w-lg rounded bg-white p-6 shadow-md sm:mx-auto">
         <Row className="justify-between">
           <Title className="!mt-0" text="Edit Profile" />
-          <SiteLink className="btn btn-primary" href={`/${user.username}`}>
+          <SiteLink
+            className={buttonClass('md', 'green')}
+            href={`/${user.username}`}
+          >
             Done
           </SiteLink>
         </Row>
         <Col className="gap-4">
           <Row className="items-center gap-4">
             {avatarLoading ? (
-              <button className="btn btn-ghost btn-lg btn-circle loading"></button>
+              <LoadingIndicator />
             ) : (
               <>
                 <img

web/pages/referrals.tsx

@@ -50,7 +50,7 @@ export default function ReferralsPage() {
           <CopyLinkButton
             url={url}
             tracking="copy referral link"
-            buttonClassName="btn-md rounded-l-none"
+            buttonClassName="rounded-l-none"
             toastClassName={'-left-28 mt-1'}
           />
 

web/pages/twitch.tsx

@@ -121,7 +121,7 @@ function TwitchPlaysManifoldMarkets(props: {
           <Button
             size="xl"
             color="green"
-            className="btn-disabled my-4 self-center !border-none"
+            className="my-4 self-center !border-none"
           >
             Account connected: {twitchUser}
           </Button>
@@ -331,25 +331,18 @@ function BotConnectButton(props: {
         <Button
           color="red"
           onClick={updateBotConnected(false)}
-          className={clsx(loading && '!btn-disabled', 'border-none')}
+          loading={loading}
         >
-          {loading ? (
+          Remove bot from channel
-            <LoadingIndicator spinnerClassName="!h-5 !w-5 border-white !border-2" />
-          ) : (
-            'Remove bot from channel'
-          )}
         </Button>
       ) : (
         <Button
           color="green"
           onClick={updateBotConnected(true)}
-          className={clsx(loading && '!btn-disabled', 'border-none')}
+          loading={loading}
+          className="border-none"
         >
-          {loading ? (
+          Add bot to your channel
-            <LoadingIndicator spinnerClassName="!h-5 !w-5 border-white !border-2" />
-          ) : (
-            'Add bot to your channel'
-          )}
         </Button>
       )}
     </>