comment bounty dialog, styling

web/components/contract/bountied-contract-badge.tsx

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

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

@@ -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,30 +52,34 @@ export function AddCommentBountyPanel(props: { contract: Contract }) {
   }
 
   return (
-    <>
-      <div className="mb-4 text-gray-500">
-        Add a {formatMoney(amount)} bounty for good comments that the creator
-        can award.{' '}
-        {totalAdded > 0 && `(${formatMoney(totalAdded)} currently added)`}
-      </div>
+    <Modal open={open} setOpen={setOpen}>
+      <Col className="gap-4 rounded bg-white p-6">
+        <Title className="!mt-0 !mb-0" text="Comment bounty" />
 
-      <Row className={'items-center gap-2'}>
-        <Button
-          className={clsx('ml-2', isLoading && 'btn-disabled')}
-          onClick={submit}
-          disabled={isLoading}
-          color={'blue'}
-        >
-          Add {formatMoney(amount)} bounty
-        </Button>
-        <span className={'text-error'}>{error}</span>
-      </Row>
+        <div className="mb-4 text-gray-500">
+          Add a {formatMoney(amount)} bounty for good comments that the creator
+          can award.{' '}
+          {totalAdded > 0 && `(${formatMoney(totalAdded)} currently added)`}
+        </div>
 
-      {isSuccess && amount && (
-        <div>Success! Added {formatMoney(amount)} in bounties.</div>
-      )}
+        <Row className={'items-center gap-2'}>
+          <Button
+            className={clsx('ml-2', isLoading && 'btn-disabled')}
+            onClick={submit}
+            disabled={isLoading}
+            color={'blue'}
+          >
+            Add {formatMoney(amount)} bounty
+          </Button>
+          <span className={'text-error'}>{error}</span>
+        </Row>
 
-      {isLoading && <div>Processing...</div>}
-    </>
+        {isSuccess && amount && (
+          <div>Success! Added {formatMoney(amount)} in bounties.</div>
+        )}
+
+        {isLoading && <div>Processing...</div>}
+      </Col>
+    </Modal>
   )
 }

web/components/contract/contract-tabs.tsx

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

web/components/contract/liquidity-bounty-panel.tsx

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