comment bounty dialog, styling

This commit is contained in:
mantikoros 2022-10-07 16:26:23 -05:00
parent 84bc490ed3
commit efa2e44937
4 changed files with 83 additions and 51 deletions

View File

@ -1,12 +1,16 @@
import clsx from 'clsx'
import { useState } from 'react'
import { CurrencyDollarIcon } from '@heroicons/react/outline'
import { Contract } from 'common/contract'
import { Tooltip } from 'web/components/tooltip'
import { formatMoney } from 'common/util/format'
import { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
import { CommentBountyDialog } from './comment-bounty-dialog'
export function BountiedContractBadge() {
return (
<span className="inline-flex items-center gap-1 rounded-full bg-blue-100 px-3 py-0.5 text-sm font-medium text-blue-800">
<span className="inline-flex items-center gap-1 rounded-full bg-indigo-300 px-3 py-0.5 text-sm font-medium text-white">
<CurrencyDollarIcon className={'h4 w-4'} /> Bounty
</span>
)
@ -18,30 +22,50 @@ export function BountiedContractSmallBadge(props: {
}) {
const { contract, showAmount } = props
const { openCommentBounties } = contract
if (!openCommentBounties) return <div />
return (
<Tooltip
text={CommentBountiesTooltipText(
contract.creatorName,
openCommentBounties
)}
placement="bottom"
>
<span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
<CurrencyDollarIcon className={'h3 w-3'} />
{showAmount && formatMoney(openCommentBounties)} Bounty
</span>
</Tooltip>
const [open, setOpen] = useState(false)
if (!openCommentBounties && !showAmount) return <></>
const modal = (
<CommentBountyDialog open={open} setOpen={setOpen} contract={contract} />
)
if (!openCommentBounties)
return (
<>
{modal}
<SmallBadge text="Add bounty" onClick={() => setOpen(true)} />
</>
)
}
export const CommentBountiesTooltipText = (
creator: string,
openCommentBounties: number
) =>
`${creator} may award ${formatMoney(
const tooltip = `${contract.creatorName} may award ${formatMoney(
COMMENT_BOUNTY_AMOUNT
)} for good comments. ${formatMoney(
openCommentBounties
)} currently available.`
return (
<Tooltip text={tooltip} placement="bottom">
{modal}
<SmallBadge
text={`${formatMoney(openCommentBounties)} bounty`}
onClick={() => setOpen(true)}
/>
</Tooltip>
)
}
function SmallBadge(props: { text: string; onClick?: () => void }) {
const { text, onClick } = props
return (
<button
onClick={onClick}
className={clsx(
'inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white'
)}
>
<CurrencyDollarIcon className={'h4 w-4'} />
{text}
</button>
)
}

View File

@ -8,9 +8,16 @@ import clsx from 'clsx'
import { formatMoney } from 'common/util/format'
import { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
import { Button } from 'web/components/button'
import { Title } from '../title'
import { Col } from '../layout/col'
import { Modal } from '../layout/modal'
export function AddCommentBountyPanel(props: { contract: Contract }) {
const { contract } = props
export function CommentBountyDialog(props: {
contract: Contract
open: boolean
setOpen: (open: boolean) => void
}) {
const { contract, open, setOpen } = props
const { id: contractId, slug } = contract
const user = useUser()
@ -45,7 +52,10 @@ export function AddCommentBountyPanel(props: { contract: Contract }) {
}
return (
<>
<Modal open={open} setOpen={setOpen}>
<Col className="gap-4 rounded bg-white p-6">
<Title className="!mt-0 !mb-0" text="Comment bounty" />
<div className="mb-4 text-gray-500">
Add a {formatMoney(amount)} bounty for good comments that the creator
can award.{' '}
@ -69,6 +79,7 @@ export function AddCommentBountyPanel(props: { contract: Contract }) {
)}
{isLoading && <div>Processing...</div>}
</>
</Col>
</Modal>
)
}

View File

@ -123,7 +123,7 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
const topLevelComments = commentsByParent['_'] ?? []
const sortRow = comments.length > 0 && (
<Row className="mb-2 items-center">
<Row className="mb-4 items-center">
<Button
size={'xs'}
color={'gray-white'}

View File

@ -16,7 +16,6 @@ import { InfoTooltip } from 'web/components/info-tooltip'
import { BETTORS, PRESENT_BET } from 'common/user'
import { buildArray } from 'common/util/array'
import { useAdmin } from 'web/hooks/use-admin'
import { AddCommentBountyPanel } from 'web/components/contract/add-comment-bounty'
export function LiquidityBountyPanel(props: { contract: Contract }) {
const { contract } = props
@ -36,13 +35,11 @@ export function LiquidityBountyPanel(props: { contract: Contract }) {
const isCreator = user?.id === contract.creatorId
const isAdmin = useAdmin()
if (!isCreator && !isAdmin && !showWithdrawal) return <></>
return (
<Tabs
tabs={buildArray(
{
title: 'Bounty Comments',
content: <AddCommentBountyPanel contract={contract} />,
},
(isCreator || isAdmin) &&
isCPMM && {
title: (isAdmin ? '[Admin] ' : '') + 'Subsidize',