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,27 +21,23 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
       {user?.id !== contract.creatorId && (
         <LikeMarketButton contract={contract} user={user} />
       )}
-      <Button
-        size="sm"
-        color="gray-white"
-        className={'flex'}
-        onClick={() => {
-          setShareOpen(true)
-        }}
-      >
-        <Row>
-          <ShareIcon className={clsx('h-5 w-5')} aria-hidden="true" />
-        </Row>
-        <ShareModal
-          isOpen={isShareOpen}
-          setOpen={setShareOpen}
-          contract={contract}
-          user={user}
-        />
-      </Button>
-      <Col className={'justify-center'}>
-        <ContractInfoDialog contract={contract} />
-      </Col>
+      <Tooltip text="Share" placement="bottom" noTap noFade>
+        <Button
+          size="sm"
+          color="gray-white"
+          className={'flex'}
+          onClick={() => setShareOpen(true)}
+        >
+          <ShareIcon className="h-5 w-5" aria-hidden />
+          <ShareModal
+            isOpen={isShareOpen}
+            setOpen={setShareOpen}
+            contract={contract}
+            user={user}
+          />
+        </Button>
+      </Tooltip>
+      <ContractInfoDialog contract={contract} />
     </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,37 +38,44 @@ export function LikeMarketButton(props: {
   }
 
   return (
-    <Button
-      size={'sm'}
-      className={'max-w-xs self-center'}
-      color={'gray-white'}
-      onClick={onLike}
+    <Tooltip
+      text={`Tip ${formatMoney(LIKE_TIP_AMOUNT)}`}
+      placement="bottom"
+      noTap
+      noFade
     >
-      <Col className={'relative items-center sm:flex-row'}>
-        <HeartIcon
-          className={clsx(
-            'h-5 w-5 sm:h-6 sm:w-6',
-            totalTipped > 0 ? 'mr-2' : '',
-            user &&
-              (userLikedContractIds?.includes(contract.id) ||
-                (!likes && contract.likedByUserIds?.includes(user.id)))
-              ? 'fill-red-500 text-red-500'
-              : ''
-          )}
-        />
-        {totalTipped > 0 && (
-          <div
+      <Button
+        size={'sm'}
+        className={'max-w-xs self-center'}
+        color={'gray-white'}
+        onClick={onLike}
+      >
+        <Col className={'relative items-center sm:flex-row'}>
+          <HeartIcon
             className={clsx(
-              'bg-greyscale-6 absolute ml-3.5 mt-2 h-4 w-4 rounded-full align-middle text-white sm:mt-3 sm:h-5 sm:w-5 sm:px-1',
-              totalTipped > 99
-                ? 'text-[0.4rem] sm:text-[0.5rem]'
-                : 'sm:text-2xs text-[0.5rem]'
+              'h-5 w-5 sm:h-6 sm:w-6',
+              totalTipped > 0 ? 'mr-2' : '',
+              user &&
+                (userLikedContractIds?.includes(contract.id) ||
+                  (!likes && contract.likedByUserIds?.includes(user.id)))
+                ? 'fill-red-500 text-red-500'
+                : ''
             )}
-          >
-            {totalTipped}
-          </div>
-        )}
-      </Col>
-    </Button>
+          />
+          {totalTipped > 0 && (
+            <div
+              className={clsx(
+                'bg-greyscale-6 absolute ml-3.5 mt-2 h-4 w-4 rounded-full align-middle text-white sm:mt-3 sm:h-5 sm:w-5 sm:px-1',
+                totalTipped > 99
+                  ? 'text-[0.4rem] sm:text-[0.5rem]'
+                  : 'sm:text-2xs text-[0.5rem]'
+              )}
+            >
+              {totalTipped}
+            </div>
+          )}
+        </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,61 +24,70 @@ export const FollowMarketButton = (props: {
   const followers = useContractFollows(contract.id)
   const [open, setOpen] = useState(false)
 
+  const watching = followers?.includes(user?.id ?? 'nope')
+
   return (
-    <Button
-      size={'sm'}
-      color={'gray-white'}
-      onClick={async () => {
-        if (!user) return firebaseLogin()
-        if (followers?.includes(user.id)) {
-          await unFollowContract(contract.id, user.id)
-          toast("You'll no longer receive notifications from this market", {
-            icon: <CheckIcon className={'text-primary h-5 w-5'} />,
-          })
-          track('Unwatch Market', {
-            slug: contract.slug,
-          })
-        } else {
-          await followContract(contract.id, user.id)
-          toast("You'll now receive notifications from this market!", {
-            icon: <CheckIcon className={'text-primary h-5 w-5'} />,
-          })
-          track('Watch Market', {
-            slug: contract.slug,
-          })
-        }
-        if (!user.hasSeenContractFollowModal) {
-          await updateUser(user.id, {
-            hasSeenContractFollowModal: true,
-          })
-          setOpen(true)
-        }
-      }}
+    <Tooltip
+      text={watching ? 'Unfollow' : 'Follow'}
+      placement="bottom"
+      noTap
+      noFade
     >
-      {followers?.includes(user?.id ?? 'nope') ? (
-        <Col className={'items-center gap-x-2 sm:flex-row'}>
-          <EyeOffIcon
-            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
-            className={clsx('h-5 w-5 sm:h-6 sm:w-6')}
-            aria-hidden="true"
-          />
-          {/* Watch */}
-        </Col>
-      )}
-      <WatchMarketModal
-        open={open}
-        setOpen={setOpen}
-        title={`You ${
-          followers?.includes(user?.id ?? 'nope') ? 'watched' : 'unwatched'
-        } a question!`}
-      />
-    </Button>
+      <Button
+        size={'sm'}
+        color={'gray-white'}
+        onClick={async () => {
+          if (!user) return firebaseLogin()
+          if (followers?.includes(user.id)) {
+            await unFollowContract(contract.id, user.id)
+            toast("You'll no longer receive notifications from this market", {
+              icon: <CheckIcon className={'text-primary h-5 w-5'} />,
+            })
+            track('Unwatch Market', {
+              slug: contract.slug,
+            })
+          } else {
+            await followContract(contract.id, user.id)
+            toast("You'll now receive notifications from this market!", {
+              icon: <CheckIcon className={'text-primary h-5 w-5'} />,
+            })
+            track('Watch Market', {
+              slug: contract.slug,
+            })
+          }
+          if (!user.hasSeenContractFollowModal) {
+            await updateUser(user.id, {
+              hasSeenContractFollowModal: true,
+            })
+            setOpen(true)
+          }
+        }}
+      >
+        {watching ? (
+          <Col className={'items-center gap-x-2 sm:flex-row'}>
+            <EyeOffIcon
+              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
+              className={clsx('h-5 w-5 sm:h-6 sm:w-6')}
+              aria-hidden="true"
+            />
+            {/* Watch */}
+          </Col>
+        )}
+        <WatchMarketModal
+          open={open}
+          setOpen={setOpen}
+          title={`You ${
+            followers?.includes(user?.id ?? 'nope') ? 'watched' : 'unwatched'
+          } a question!`}
+        />
+      </Button>
+    </Tooltip>
   )
 }