Add tooltips to market header icons (#924)

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

@@ -1,6 +1,4 @@
-import clsx from 'clsx'
 import { ShareIcon } from '@heroicons/react/outline'
-
 import { Row } from '../layout/row'
 import { Contract } from 'web/lib/firebase/contracts'
 import React, { useState } from 'react'
@@ -10,7 +8,7 @@ import { ShareModal } from './share-modal'
 import { FollowMarketButton } from 'web/components/follow-market-button'
 import { LikeMarketButton } from 'web/components/contract/like-market-button'
 import { ContractInfoDialog } from 'web/components/contract/contract-info-dialog'
-import { Col } from 'web/components/layout/col'
+import { Tooltip } from '../tooltip'
 
 export function ExtraContractActionsRow(props: { contract: Contract }) {
   const { contract } = props
@@ -23,17 +21,14 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
       {user?.id !== contract.creatorId && (
         <LikeMarketButton contract={contract} user={user} />
       )}
+      <Tooltip text="Share" placement="bottom" noTap noFade>
         <Button
           size="sm"
           color="gray-white"
           className={'flex'}
-        onClick={() => {
+          onClick={() => setShareOpen(true)}
-          setShareOpen(true)
-        }}
         >
-        <Row>
+          <ShareIcon className="h-5 w-5" aria-hidden />
-          <ShareIcon className={clsx('h-5 w-5')} aria-hidden="true" />
-        </Row>
           <ShareModal
             isOpen={isShareOpen}
             setOpen={setShareOpen}
@@ -41,9 +36,8 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
             user={user}
           />
         </Button>
-      <Col className={'justify-center'}>
+      </Tooltip>
       <ContractInfoDialog contract={contract} />
-      </Col>
     </Row>
   )
 }

web/components/contract/like-market-button.tsx

@@ -13,6 +13,7 @@ import { Col } from 'web/components/layout/col'
 import { firebaseLogin } from 'web/lib/firebase/users'
 import { useMarketTipTxns } from 'web/hooks/use-tip-txns'
 import { sum } from 'lodash'
+import { Tooltip } from '../tooltip'
 
 export function LikeMarketButton(props: {
   contract: Contract
@@ -37,6 +38,12 @@ export function LikeMarketButton(props: {
   }
 
   return (
+    <Tooltip
+      text={`Tip ${formatMoney(LIKE_TIP_AMOUNT)}`}
+      placement="bottom"
+      noTap
+      noFade
+    >
       <Button
         size={'sm'}
         className={'max-w-xs self-center'}
@@ -69,5 +76,6 @@ export function LikeMarketButton(props: {
           )}
         </Col>
       </Button>
+    </Tooltip>
   )
 }

web/components/follow-market-button.tsx

@@ -14,6 +14,7 @@ import { track } from 'web/lib/service/analytics'
 import { WatchMarketModal } from 'web/components/contract/watch-market-modal'
 import { useState } from 'react'
 import { Col } from 'web/components/layout/col'
+import { Tooltip } from './tooltip'
 
 export const FollowMarketButton = (props: {
   contract: Contract
@@ -23,7 +24,15 @@ export const FollowMarketButton = (props: {
   const followers = useContractFollows(contract.id)
   const [open, setOpen] = useState(false)
 
+  const watching = followers?.includes(user?.id ?? 'nope')
+
   return (
+    <Tooltip
+      text={watching ? 'Unfollow' : 'Follow'}
+      placement="bottom"
+      noTap
+      noFade
+    >
       <Button
         size={'sm'}
         color={'gray-white'}
@@ -54,7 +63,7 @@ export const FollowMarketButton = (props: {
           }
         }}
       >
-      {followers?.includes(user?.id ?? 'nope') ? (
+        {watching ? (
           <Col className={'items-center gap-x-2 sm:flex-row'}>
             <EyeOffIcon
               className={clsx('h-5 w-5 sm:h-6 sm:w-6')}
@@ -79,5 +88,6 @@ export const FollowMarketButton = (props: {
           } a question!`}
         />
       </Button>
+    </Tooltip>
   )
 }