Style tabs

web/components/contract/contract-tabs.tsx

@@ -48,17 +48,14 @@ export function ContractTabs(props: {
 
   const tabs = buildArray(
     {
-      title: `Comments ${
+      title: `Comments`,
-        openCommentBounties
-          ? '(' + formatMoney(openCommentBounties) + ' Bounty)'
-          : ''
-      }`,
       tooltip: openCommentBounties
         ? `The creator of this market will award bounties of ${formatMoney(
             COMMENT_BOUNTY_AMOUNT
           )} to good comments`
         : undefined,
       content: <CommentsTabContent contract={contract} />,
+      inlineTabIcon: <span>({formatMoney(COMMENT_BOUNTY_AMOUNT)})</span>,
     },
     {
       title: capitalize(PAST_BETS),

web/components/layout/tabs.tsx

@@ -4,13 +4,13 @@ import { ReactNode, useState } from 'react'
 import { track } from '@amplitude/analytics-browser'
 import { Col } from './col'
 import { Tooltip } from 'web/components/tooltip'
+import { Row } from 'web/components/layout/row'
 
 type Tab = {
   title: string
-  tabIcon?: ReactNode
   content: ReactNode
-  // If set, show a badge with this content
+  stackedTabIcon?: ReactNode
-  badge?: string
+  inlineTabIcon?: ReactNode
   tooltip?: string
 }
 
@@ -58,13 +58,15 @@ export function ControlledTabs(props: TabProps & { activeIndex: number }) {
             )}
             aria-current={activeIndex === i ? 'page' : undefined}
           >
-            {tab.badge ? (
-              <span className="px-0.5 font-bold">{tab.badge}</span>
-            ) : null}
             <Col>
               <Tooltip text={tab.tooltip}>
-                {tab.tabIcon && <div className="mx-auto">{tab.tabIcon}</div>}
+                {tab.stackedTabIcon && (
-                {tab.title}
+                  <Row className="justify-center">{tab.stackedTabIcon}</Row>
+                )}
+                <Row className={'gap-1 '}>
+                  {tab.title}
+                  {tab.inlineTabIcon}
+                </Row>
               </Tooltip>
             </Col>
           </a>

web/components/user-page.tsx

@@ -192,7 +192,7 @@ export function UserPage(props: { user: User }) {
             tabs={[
               {
                 title: 'Markets',
-                tabIcon: <ScaleIcon className="h-5" />,
+                stackedTabIcon: <ScaleIcon className="h-5" />,
                 content: (
                   <>
                     <Spacer h={4} />
@@ -202,7 +202,7 @@ export function UserPage(props: { user: User }) {
               },
               {
                 title: 'Portfolio',
-                tabIcon: <FolderIcon className="h-5" />,
+                stackedTabIcon: <FolderIcon className="h-5" />,
                 content: (
                   <>
                     <Spacer h={4} />
@@ -214,7 +214,7 @@ export function UserPage(props: { user: User }) {
               },
               {
                 title: 'Comments',
-                tabIcon: <ChatIcon className="h-5" />,
+                stackedTabIcon: <ChatIcon className="h-5" />,
                 content: (
                   <>
                     <Spacer h={4} />