Remove all daisy buttons (#1036)

* Tweak limit order UI and fix button

* Style all follow/unfollow buttons blue

also get rid of highlight-blue button

* remove all other uses of 'btn'

* Style group follow button like user follow

* lint and format

web/components/amount-input.tsx

@@ -47,9 +47,8 @@ export function AmountInput(props: {
           </span>
           <Input
             className={clsx(
-              'pl-9',
+              'w-24 pl-9 !text-base md:w-auto',
               error && 'input-error',
-              'w-24 md:w-auto',
               inputClassName
             )}
             ref={inputRef}

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/bet-panel.tsx

@@ -271,7 +271,7 @@ export function BuyPanel(props: {
     })
   }
 
-  const betDisabled = isSubmitting || !betAmount || error
+  const betDisabled = isSubmitting || !betAmount || !!error
 
   const { newPool, newP, newBet } = getBinaryCpmmBetInfo(
     outcome ?? 'YES',
@@ -493,7 +493,7 @@ function LimitOrderPanel(props: {
     !betAmount ||
     rangeError ||
     outOfRangeError ||
-    error ||
+    !!error ||
     (!hasYesLimitBet && !hasNoLimitBet)
 
   const yesLimitProb =
@@ -785,11 +785,11 @@ function LimitOrderPanel(props: {
       {user && (
         <Button
           size="xl"
-          disabled={betDisabled ? true : false}
+          disabled={betDisabled}
           color={'indigo'}
           loading={isSubmitting}
           className="flex-1"
-          onClick={betDisabled ? undefined : submitBet}
+          onClick={submitBet}
         >
           {isSubmitting
             ? 'Submitting...'

web/components/button.tsx

@@ -13,7 +13,6 @@ export type ColorType =
   | 'gray-outline'
   | 'gradient'
   | 'gray-white'
-  | 'highlight-blue'
 
 const sizeClasses = {
   '2xs': 'px-2 py-1 text-xs',
@@ -27,7 +26,7 @@ const sizeClasses = {
 
 export function buttonClass(size: SizeType, color: ColorType | 'override') {
   return clsx(
-    'font-md inline-flex items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
+    'font-md inline-flex items-center justify-center rounded-md ring-inset shadow-sm transition-colors disabled:cursor-not-allowed',
     sizeClasses[size],
     color === 'green' &&
       'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',
@@ -42,13 +41,11 @@ export function buttonClass(size: SizeType, color: ColorType | 'override') {
     color === 'gray' &&
       'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
     color === 'gray-outline' &&
-      'border-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 border-2 hover:text-white disabled:opacity-50',
+      'ring-2 ring-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 hover:text-white disabled:opacity-50',
     color === 'gradient' &&
-      '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',
+      'disabled:bg-greyscale-2 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 disabled:opacity-50',
+      'text-greyscale-6 hover:bg-greyscale-2 shadow-none disabled:opacity-50'
-    color === 'highlight-blue' &&
-      'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none'
   )
 }
 

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

@@ -4,7 +4,6 @@ import { useState } from 'react'
 import { addCommentBounty } from 'web/lib/firebase/api'
 import { track } from 'web/lib/service/analytics'
 import { Row } from 'web/components/layout/row'
-import clsx from 'clsx'
 import { formatMoney } from 'common/util/format'
 import { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
 import { Button } from 'web/components/button'
@@ -64,7 +63,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/follow-button.tsx

@@ -11,25 +11,19 @@ export function FollowButton(props: {
   isFollowing: boolean | undefined
   onFollow: () => void
   onUnfollow: () => void
-  className?: string
 }) {
-  const { isFollowing, onFollow, onUnfollow, className } = props
+  const { isFollowing, onFollow, onUnfollow } = props
 
   const user = useUser()
 
-  if (!user || isFollowing === undefined)
+  if (!user || isFollowing === undefined) return <></>
-    return (
-      <Button size="sm" color="gray" className={clsx(className, 'invisible')}>
-        Follow
-      </Button>
-    )
 
   if (isFollowing) {
     return (
       <Button
         size="sm"
         color="gray-outline"
-        className={clsx('my-auto', className)}
+        className="my-auto"
         onClick={withTracking(onUnfollow, 'unfollow')}
       >
         Following
@@ -41,7 +35,7 @@ export function FollowButton(props: {
     <Button
       size="sm"
       color="indigo"
-      className={clsx(className, 'my-auto')}
+      className="my-auto"
       onClick={withTracking(onFollow, 'follow')}
     >
       Follow

web/components/following-button.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx'
-import { PencilIcon } from '@heroicons/react/outline'
 
 import { User } from 'common/user'
 import { useState } from 'react'
@@ -11,7 +10,6 @@ import { Modal } from './layout/modal'
 import { Tabs } from './layout/tabs'
 import { useDiscoverUsers } from 'web/hooks/use-users'
 import { TextButton } from './text-button'
-import { track } from 'web/lib/service/analytics'
 
 export function FollowingButton(props: { user: User; className?: string }) {
   const { user, className } = props
@@ -40,37 +38,6 @@ export function FollowingButton(props: { user: User; className?: string }) {
   )
 }
 
-export function EditFollowingButton(props: { user: User; className?: string }) {
-  const { user, className } = props
-  const [isOpen, setIsOpen] = useState(false)
-  const followingIds = useFollows(user.id)
-  const followerIds = useFollowers(user.id)
-
-  return (
-    <div
-      className={clsx(
-        className,
-        'btn btn-sm btn-ghost cursor-pointer gap-2 whitespace-nowrap text-sm normal-case text-gray-700'
-      )}
-      onClick={() => {
-        setIsOpen(true)
-        track('edit following button')
-      }}
-    >
-      <PencilIcon className="inline h-4 w-4" />
-      Following
-      <FollowsDialog
-        user={user}
-        defaultTab="following"
-        followingIds={followingIds ?? []}
-        followerIds={followerIds ?? []}
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-      />
-    </div>
-  )
-}
-
 export function FollowersButton(props: { user: User; className?: string }) {
   const { user, className } = props
   const [isOpen, setIsOpen] = useState(false)

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/groups/groups-button.tsx

@@ -125,9 +125,9 @@ export function JoinOrLeaveGroupButton(props: {
   if (isMember) {
     return (
       <Button
-        size="xs"
+        size="sm"
-        color="gray-white"
+        color="gray-outline"
-        className={`${className}  border-greyscale-4 border !border-solid`}
+        className={className}
         onClick={withTracking(onLeaveGroup, 'leave group')}
       >
         Unfollow
@@ -139,8 +139,8 @@ export function JoinOrLeaveGroupButton(props: {
     return <div className={clsx(className, 'text-gray-500')}>Closed</div>
   return (
     <Button
-      size="xs"
+      size="sm"
-      color="blue"
+      color="indigo"
       className={className}
       onClick={withTracking(onJoinGroup, 'join group')}
     >

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/user-page.tsx

@@ -95,7 +95,7 @@ export function UserPage(props: { user: User }) {
           )}
 
           <Col className="w-full gap-4 pl-5">
-            <div className="flex flex-col gap-2 sm:flex-row sm:justify-between">
+            <div className="flex flex-col items-start gap-2 sm:flex-row sm:justify-between">
               <Col>
                 <span className="break-anywhere text-lg font-bold sm:text-2xl">
                   {user.name}

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

@@ -1,6 +1,5 @@
 import router, { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import clsx from 'clsx'
 import dayjs from 'dayjs'
 import { Spacer } from 'web/components/layout/spacer'
 import { getUserAndPrivateUser } from 'web/lib/firebase/users'
@@ -519,20 +518,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/group/[...slugs]/index.tsx

@@ -386,14 +386,9 @@ function JoinGroupButton(props: {
 
   return (
     <div>
-      <button
+      <Button onClick={follow} color="blue">
-        onClick={follow}
-        className={
-          'btn-md btn-outline btn w-full whitespace-nowrap normal-case'
-        }
-      >
         Follow
-      </button>
+      </Button>
     </div>
   )
 }

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>
       )}
     </>