Add tooltip and badge on contract for bounties

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

@@ -1,4 +1,8 @@
 import { CurrencyDollarIcon } from '@heroicons/react/outline'
+import { Contract } from 'common/contract'
+import { Tooltip } from 'web/components/tooltip'
+import { formatMoney } from 'common/lib/util/format'
+import { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
 
 export function BountiedContractBadge() {
   return (
@@ -7,3 +11,24 @@ export function BountiedContractBadge() {
     </span>
   )
 }
+
+export function BountiedContractSmallBadge(props: { contract: Contract }) {
+  const { contract } = 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>
+    </Tooltip>
+  )
+}
+
+export const CommentBountiesTooltipText = (openCommentBounties: number) =>
+  `The creator of this market may award ${formatMoney(
+    COMMENT_BOUNTY_AMOUNT
+  )} for good comments. ${formatMoney(
+    openCommentBounties
+  )} currently available.`

web/components/contract/contract-details.tsx

@@ -32,7 +32,10 @@ import { PlusCircleIcon } from '@heroicons/react/solid'
 import { GroupLink } from 'common/group'
 import { Subtitle } from '../subtitle'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
-import { BountiedContractBadge } from 'web/components/contract/bountied-contract-badge'
+import {
+  BountiedContractBadge,
+  BountiedContractSmallBadge,
+} from 'web/components/contract/bountied-contract-badge'
 
 export type ShowTime = 'resolve-date' | 'close-date'
 
@@ -129,9 +132,10 @@ export function ContractDetails(props: {
       </Row>
       {/* GROUPS */}
       {isMobile && (
-        <div className="mt-2">
+        <Row className="mt-2 gap-1">
+          <BountiedContractSmallBadge contract={contract} />
           <MarketGroups contract={contract} disabled={disabled} />
-        </div>
+        </Row>
       )}
     </Col>
   )
@@ -181,7 +185,10 @@ export function MarketSubheader(props: {
             isCreator={isCreator}
           />
           {!isMobile && (
-            <MarketGroups contract={contract} disabled={disabled} />
+            <Row className={'gap-1'}>
+              <BountiedContractSmallBadge contract={contract} />
+              <MarketGroups contract={contract} disabled={disabled} />
+            </Row>
           )}
         </Row>
       </Col>
@@ -328,14 +335,14 @@ export function GroupDisplay(props: { groupToDisplay?: GroupLink | null }) {
   if (groupToDisplay) {
     return (
       <Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
-        <a className="bg-greyscale-4 hover:bg-greyscale-3 max-w-[140px] truncate rounded-full px-2 text-xs text-white sm:max-w-[250px]">
+        <a className="bg-greyscale-4 hover:bg-greyscale-3 max-w-[140px] truncate rounded-full py-0.5 px-2 text-xs text-white sm:max-w-[250px]">
           {groupToDisplay.name}
         </a>
       </Link>
     )
   } else
     return (
-      <div className="bg-greyscale-4 truncate rounded-full px-2 text-xs text-white">
+      <div className="bg-greyscale-4 truncate rounded-full py-0.5 px-2 text-xs text-white">
         No Group
       </div>
     )

web/components/contract/contract-tabs.tsx

@@ -31,6 +31,7 @@ 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'
 
 export function ContractTabs(props: {
   contract: Contract
@@ -53,11 +54,7 @@ export function ContractTabs(props: {
     {
       title: `Comments`,
       tooltip: openCommentBounties
-        ? `The creator of this market may award ${formatMoney(
+        ? CommentBountiesTooltipText(openCommentBounties)
-            COMMENT_BOUNTY_AMOUNT
-          )} for good comments. ${formatMoney(
-            openCommentBounties
-          )} currently available.`
         : undefined,
       content: <CommentsTabContent contract={contract} comments={comments} />,
       inlineTabIcon: openCommentBounties ? (