comment bounty styling

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

@@ -12,15 +12,15 @@ export function BountiedContractBadge() {
   )
 }
 
-export function BountiedContractSmallBadge(props: { contract: Contract }) {
-  const { contract } = props
+export function BountiedContractSmallBadge(props: { contract: Contract, showAmount?: boolean }) {
+  const { contract, showAmount } = props
   const { openCommentBounties } = contract
   if (!openCommentBounties) return <div />
 
   return (
     <Tooltip text={CommentBountiesTooltipText(openCommentBounties)}>
-      <span className="bg-greyscale-4 inline-flex cursor-default items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium text-white">
-        <CurrencyDollarIcon className={'h3 w-3'} /> Bountied Comments
+      <span className="bg-indigo-300 inline-flex cursor-default items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium text-white">
+        <CurrencyDollarIcon className={'h3 w-3'} />{showAmount && formatMoney(openCommentBounties)} Bounty
       </span>
     </Tooltip>
   )

web/components/contract/contract-tabs.tsx

@@ -25,13 +25,14 @@ import {
 import { buildArray } from 'common/util/array'
 import { ContractComment } from 'common/comment'
 
-import { formatMoney } from 'common/util/format'
 import { Button } from 'web/components/button'
 import { MINUTE_MS } from 'common/util/time'
 import { useUser } from 'web/hooks/use-user'
-import { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
 import { Tooltip } from 'web/components/tooltip'
-import { CommentBountiesTooltipText } from 'web/components/contract/bountied-contract-badge'
+import {
+  BountiedContractSmallBadge,
+} from 'web/components/contract/bountied-contract-badge'
+import { Row } from '../layout/row'
 
 export function ContractTabs(props: {
   contract: Contract
@@ -40,7 +41,6 @@ export function ContractTabs(props: {
   comments: ContractComment[]
 }) {
   const { contract, bets, userBets, comments } = props
-  const { openCommentBounties } = contract
 
   const yourTrades = (
     <div>
@@ -52,14 +52,8 @@ export function ContractTabs(props: {
 
   const tabs = buildArray(
     {
-      title: `Comments`,
-      tooltip: openCommentBounties
-        ? CommentBountiesTooltipText(openCommentBounties)
-        : undefined,
+      title: 'Comments',
       content: <CommentsTabContent contract={contract} comments={comments} />,
-      inlineTabIcon: openCommentBounties ? (
-        <span>({formatMoney(COMMENT_BOUNTY_AMOUNT)})</span>
-      ) : undefined,
     },
     {
       title: capitalize(PAST_BETS),
@@ -156,10 +150,12 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
     const topLevelComments = commentsByParent['_'] ?? []
     return (
       <>
+        <ContractCommentInput className="mb-5" contract={contract} />
+
+        <Row className="mb-4 items-center">
           <Button
             size={'xs'}
             color={'gray-white'}
-          className="mb-4"
             onClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
           >
             <Tooltip
@@ -172,7 +168,10 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
               Sorted by: {sort}
             </Tooltip>
           </Button>
-        <ContractCommentInput className="mb-5" contract={contract} />
+
+          <BountiedContractSmallBadge contract={contract} showAmount />
+        </Row>
+
         {topLevelComments.map((parent) => (
           <FeedCommentThread
             key={parent.id}