made contract details buttons use IconButton

web/components/contract/contract-info-dialog.tsx

@@ -19,11 +19,12 @@ import ShortToggle from '../widgets/short-toggle'
 import { DuplicateContractButton } from '../duplicate-contract-button'
 import { Row } from '../layout/row'
 import { BETTORS, User } from 'common/user'
-import { Button } from '../button'
+import { IconButton } from '../button'
 import { AddLiquidityButton } from './add-liquidity-button'
+import { Tooltip } from '../tooltip'
 
-export const contractDetailsButtonClassName =
+// export const contractDetailsButtonClassName =
-  'group flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 text-gray-400 hover:text-gray-500'
+//   'group flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 text-gray-400 hover:text-gray-500'
 
 export function ContractInfoDialog(props: {
   contract: Contract
@@ -84,17 +85,17 @@ export function ContractInfoDialog(props: {
 
   return (
     <>
-      <Button
+      <Tooltip text="Market details" placement="bottom" noTap noFade>
-        size="sm"
+        <IconButton
-        color="gray-white"
+          size="2xs"
-        className={clsx(contractDetailsButtonClassName, className)}
+          className={clsx(className)}
           onClick={() => setOpen(true)}
         >
           <DotsHorizontalIcon
             className={clsx('h-5 w-5 flex-shrink-0')}
             aria-hidden="true"
           />
-      </Button>
+        </IconButton>
 
         <Modal open={open} setOpen={setOpen}>
           <Col className="gap-4 rounded bg-white p-6">
@@ -186,7 +187,8 @@ export function ContractInfoDialog(props: {
                   <td>
                     {mechanism === 'cpmm-1' && outcomeType === 'BINARY'
                       ? `${Math.round(pool.YES)} YES, ${Math.round(pool.NO)} NO`
-                    : mechanism === 'cpmm-1' && outcomeType === 'PSEUDO_NUMERIC'
+                      : mechanism === 'cpmm-1' &&
+                        outcomeType === 'PSEUDO_NUMERIC'
                       ? `${Math.round(pool.YES)} HIGHER, ${Math.round(
                           pool.NO
                         )} LOWER`
@@ -249,6 +251,7 @@ export function ContractInfoDialog(props: {
             </Row>
           </Col>
         </Modal>
+      </Tooltip>
     </>
   )
 }

web/components/contract/extra-contract-actions-row.tsx

@@ -2,7 +2,7 @@ import { ShareIcon } from '@heroicons/react/outline'
 import { Row } from '../layout/row'
 import { Contract } from 'web/lib/firebase/contracts'
 import React, { useState } from 'react'
-import { Button } from 'web/components/button'
+import { IconButton } from 'web/components/button'
 import { useUser } from 'web/hooks/use-user'
 import { ShareModal } from './share-modal'
 import { FollowMarketButton } from 'web/components/follow-market-button'
@@ -16,15 +16,14 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
   const [isShareOpen, setShareOpen] = useState(false)
 
   return (
-    <Row>
+    <Row className="gap-1">
       <FollowMarketButton contract={contract} user={user} />
 
       <LikeMarketButton contract={contract} user={user} />
 
       <Tooltip text="Share" placement="bottom" noTap noFade>
-        <Button
+        <IconButton
-          size="sm"
+          size="2xs"
-          color="gray-white"
           className={'flex'}
           onClick={() => setShareOpen(true)}
         >
@@ -35,7 +34,7 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
             contract={contract}
             user={user}
           />
-        </Button>
+        </IconButton>
       </Tooltip>
 
       <ContractInfoDialog contract={contract} user={user} />

web/components/contract/tip-button.tsx

@@ -13,8 +13,7 @@ export function TipButton(props: {
   isCompact?: boolean
   disabled?: boolean
 }) {
-  const { tipAmount, totalTipped, userTipped, isCompact, onClick, disabled } =
+  const { tipAmount, totalTipped, userTipped, onClick, disabled } = props
-    props
 
   const tipDisplay = shortFormatNumber(Math.ceil(totalTipped / 10))
 
@@ -35,6 +34,7 @@ export function TipButton(props: {
         onClick={onClick}
         disabled={disabled}
         className={clsx(
+          'px-2 py-1 text-xs', //2xs button
           'text-greyscale-6 transition-transform hover:text-indigo-600 disabled:cursor-not-allowed',
           !disabled ? 'hover:rotate-12' : ''
         )}
@@ -43,20 +43,20 @@ export function TipButton(props: {
       >
         <Col className={clsx('relative', disabled ? 'opacity-30' : '')}>
           <TipJar
-            size={16}
+            size={18}
-            color={hover || userTipped ? '#4f46e5' : '#66667C'}
+            color={userTipped || (hover && !disabled) ? '#4f46e5' : '#66667C'}
             fill={userTipped ? '#4f46e5' : 'none'}
           />
           <div
             className={clsx(
-              ' absolute top-[3px] text-[0.5rem]',
+              ' absolute top-[2px] text-[0.5rem]',
               userTipped ? 'text-white' : '',
               tipDisplay.length === 1
-                ? 'left-[6px]'
+                ? 'left-[7px]'
                 : tipDisplay.length === 2
-                ? 'left-[3.5px]'
+                ? 'left-[4.5px]'
                 : tipDisplay.length > 2
-                ? 'left-[3px] top-[5px] text-[0.35rem]'
+                ? 'left-[4px] top-[2.5px] text-[0.35rem]'
                 : ''
             )}
           >

web/components/feed/feed-comments.tsx

@@ -178,14 +178,10 @@ export function CommentActions(props: {
 }) {
   const { onReplyClick, comment, showTip, myTip, totalTip, contract } = props
   return (
-    <Row className="grow justify-end gap-2">
+    <Row className="grow justify-end">
       {onReplyClick && (
-        <IconButton
+        <IconButton size={'xs'} onClick={() => onReplyClick(comment)}>
-          size={'xs'}
+          <ReplyIcon className="h-5 w-5" />
-          className={clsx('mt-0 mb-1 max-w-xs')}
-          onClick={() => onReplyClick(comment)}
-        >
-          <ReplyIcon className="h-4 w-4" />
         </IconButton>
       )}
       {showTip && (

web/components/follow-market-button.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'web/components/button'
+import { IconButton } from 'web/components/button'
 import {
   Contract,
   followContract,
@@ -33,9 +33,8 @@ export const FollowMarketButton = (props: {
       noTap
       noFade
     >
-      <Button
+      <IconButton
-        size={'sm'}
+        size="2xs"
-        color={'gray-white'}
         onClick={async () => {
           if (!user) return firebaseLogin()
           if (followers?.includes(user.id)) {
@@ -65,18 +64,12 @@ export const FollowMarketButton = (props: {
       >
         {watching ? (
           <Col className={'items-center gap-x-2 sm:flex-row'}>
-            <EyeOffIcon
+            <EyeOffIcon className={clsx('h-5 w-5')} aria-hidden="true" />
-              className={clsx('h-5 w-5 sm:h-6 sm:w-6')}
-              aria-hidden="true"
-            />
             {/* Unwatch */}
           </Col>
         ) : (
           <Col className={'items-center gap-x-2 sm:flex-row'}>
-            <EyeIcon
+            <EyeIcon className={clsx('h-5 w-5')} aria-hidden="true" />
-              className={clsx('h-5 w-5 sm:h-6 sm:w-6')}
-              aria-hidden="true"
-            />
             {/* Watch */}
           </Col>
         )}
@@ -87,7 +80,7 @@ export const FollowMarketButton = (props: {
             followers?.includes(user?.id ?? 'nope') ? 'watched' : 'unwatched'
           } a question!`}
         />
-      </Button>
+      </IconButton>
     </Tooltip>
   )
 }