open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove all daisy buttons (#1036)

Browse Source 
* 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
This commit is contained in:
Sinclair Chen 2022-10-12 12:27:17 -07:00 committed by GitHub
parent 93ceaa52c4
commit d9f57b7daa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 109 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/components/amount-input.tsx
View File

@ -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}

5
web/components/answers/answer-bet-panel.tsx
View File

@ -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"

7
web/components/answers/answer-resolve-panel.tsx
View File

@ -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
className="btn btn-ghost"
<Button
color="gray-white"
onClick={() => {
setResolveOption(undefined)
}}
>
Clear
</button>
</Button>
)}
<ResolveConfirmationButton

12
web/components/answers/create-answer-panel.tsx
View File

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

8
web/components/bet-panel.tsx
View File

@ -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...'

11
web/components/button.tsx
View File

@ -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',
color === 'highlight-blue' &&
'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none'
'text-greyscale-6 hover:bg-greyscale-2 shadow-none disabled:opacity-50'
)
}

3
web/components/contract/comment-bounty-dialog.tsx
View File

@ -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'}

5
web/components/create-post.tsx
View File

@ -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)

14
web/components/follow-button.tsx
View File

@ -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)
return (
<Button size="sm" color="gray" className={clsx(className, 'invisible')}>
Follow
</Button>
)
if (!user || isFollowing === undefined) return <></>
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

33
web/components/following-button.tsx
View File

@ -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)

42
web/components/groups/edit-group-button.tsx
View File

@ -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
className={clsx(
'btn-ghost cursor-pointer whitespace-nowrap rounded-md p-1 text-sm text-gray-700'
)}
<Button
size="sm"
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
htmlFor="edit"
<Button
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>
<label
htmlFor="edit"
className={'btn'}
</Button>
<Button
color="gray-white"
size="xs"
onClick={() => updateOpen(false)}
>
Cancel
</label>
<label
className={clsx(
'btn',
saveDisabled ? 'btn-disabled' : 'btn-primary',
isSubmitting && 'loading'
)}
htmlFor="edit"
</Button>
<Button
color="green"
disabled={saveDisabled}
loading={isSubmitting}
onClick={onSubmit}
>
Save
</label>
</Button>
</div>
</div>
</Modal>

7
web/components/groups/group-overview.tsx
View File

@ -116,10 +116,7 @@ export function GroupPosts(props: { posts: Post[]; group: Group }) {
</Col>
<Col>
{user && (
<Button
className="btn-md"
onClick={() => setShowCreatePost(!showCreatePost)}
>
<Button 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>

10
web/components/groups/groups-button.tsx
View File

@ -125,9 +125,9 @@ export function JoinOrLeaveGroupButton(props: {
if (isMember) {
return (
<Button
size="xs"
color="gray-white"
className={`${className} border-greyscale-4 border !border-solid`}
size="sm"
color="gray-outline"
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"
color="blue"
size="sm"
color="indigo"
className={className}
onClick={withTracking(onJoinGroup, 'join group')}
>

19
web/components/numeric-bet-panel.tsx
View File

@ -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
className={clsx(
'btn flex-1',
betDisabled ? 'btn-disabled' : 'btn-primary',
isSubmitting ? 'loading' : ''
)}
onClick={betDisabled ? undefined : submitBet}
<Button
disabled={betDisabled}
color="green"
loading={isSubmitting}
onClick={submitBet}
>
{isSubmitting ? 'Submitting...' : 'Submit'}
</button>
Submit
</Button>
)}
{wasSubmitted && <div className="mt-4">Bet submitted!</div>}

9
web/components/referrals-button.tsx
View File

@ -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
? 'hidden'
: 'btn btn-primary btn-md my-2 w-24 normal-case'
referredBy.length === 0 ? 'hidden' : 'my-2 w-24'
}
disabled={referredBy.length === 0 || isSubmitting}
onClick={() => {
@ -114,7 +113,7 @@ function ReferralsDialog(props: {
}}
>
Save
</button>
</Button>
</Row>
<span className={'text-warning'}>
{referredBy.length > 0 &&

1
web/components/resolution-panel.tsx
View File

@ -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>

59
web/components/sell-button.tsx
View File

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

2
web/components/user-page.tsx
View File

@ -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}

4
web/components/yes-no-selector.tsx
View File

@ -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>

4
web/pages/[username]/[contractSlug].tsx
View File

@ -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" />

5
web/pages/admin.tsx
View File

@ -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}>
Export emails to CSV
</button>
<Button onClick={exportCsv}>Export emails to CSV</Button>
</>
)
}

26
web/pages/charity/[charitySlug].tsx
View File

@ -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(
'btn btn-link capitalize-none my-3 normal-case text-indigo-700',
hideExpander && 'invisible'
)}
className={clsx('my-3', 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(
'btn w-full',
donateDisabled ? 'btn-disabled' : 'btn-primary',
isSubmitting && 'loading'
)}
color="green"
className="w-full"
disabled={donateDisabled}
loading={isSubmitting}
>
Donate
</button>
</Button>
)}
</form>
</div>

13
web/pages/create.tsx
View File

@ -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(
'btn btn-primary normal-case',
isSubmitting && 'loading disabled'
)}
disabled={isSubmitting || !isValid || upload.isLoading}
color="green"
loading={isSubmitting}
disabled={!isValid || upload.isLoading}
onClick={(e) => {
e.preventDefault()
submit()
}}
>
{isSubmitting ? 'Creating...' : 'Create question'}
</button>
</Button>
</Row>
<Spacer h={6} />

9
web/pages/group/[...slugs]/index.tsx
View File

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

9
web/pages/profile.tsx
View File

@ -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

2
web/pages/referrals.tsx
View File

@ -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'}
/>

19
web/pages/twitch.tsx
View File

@ -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 ? (
<LoadingIndicator spinnerClassName="!h-5 !w-5 border-white !border-2" />
) : (
'Remove bot from channel'
)}
Remove bot from channel
</Button>
) : (
<Button
color="green"
onClick={updateBotConnected(true)}
className={clsx(loading && '!btn-disabled', 'border-none')}
loading={loading}
className="border-none"
>
{loading ? (
<LoadingIndicator spinnerClassName="!h-5 !w-5 border-white !border-2" />
) : (
'Add bot to your channel'
)}
Add bot to your channel
</Button>
)}
</>