💔💔💔

web/components/contract/contract-overview.tsx

@@ -22,7 +22,6 @@ import { ContractDescription } from './contract-description'
 import { ContractDetails } from './contract-details'
 import { NumericGraph } from './numeric-graph'
 import { ShareRow } from './share-row'
-import { FollowMarketButton } from 'web/components/follow-market-button'
 
 export const ContractOverview = (props: {
   contract: Contract
@@ -45,18 +44,7 @@ export const ContractOverview = (props: {
           <div className="text-2xl text-indigo-700 md:text-3xl">
             <Linkify text={question} />
           </div>
-          {(outcomeType === 'FREE_RESPONSE' ||
-            outcomeType === 'MULTIPLE_CHOICE') &&
-            !resolution && (
-              <div className={'xl:hidden'}>
-                <FollowMarketButton contract={contract} user={user} />
-              </div>
-            )}
           <Row className={'hidden gap-3 xl:flex'}>
-            <div className={'mt-2'}>
-              <FollowMarketButton contract={contract} user={user} />
-            </div>
-
             {isBinary && (
               <BinaryResolutionOrChance
                 className="items-end"
@@ -84,21 +72,15 @@ export const ContractOverview = (props: {
         {isBinary ? (
           <Row className="items-center justify-between gap-4 xl:hidden">
             <BinaryResolutionOrChance contract={contract} />
-            <Row className={'items-start gap-2'}>
-              <FollowMarketButton contract={contract} user={user} />
             {tradingAllowed(contract) && (
               <BetButton contract={contract as CPMMBinaryContract} />
             )}
           </Row>
-          </Row>
         ) : isPseudoNumeric ? (
           <Row className="items-center justify-between gap-4 xl:hidden">
             <PseudoNumericResolutionOrExpectation contract={contract} />
-            <Row className={'items-start gap-2'}>
-              <FollowMarketButton contract={contract} user={user} />
             {tradingAllowed(contract) && <BetButton contract={contract} />}
           </Row>
-          </Row>
         ) : (
           (outcomeType === 'FREE_RESPONSE' ||
             outcomeType === 'MULTIPLE_CHOICE') &&

web/components/contract/share-row.tsx

@@ -10,6 +10,7 @@ import { User } from 'common/user'
 import { CHALLENGES_ENABLED } from 'common/challenge'
 import { ShareModal } from './share-modal'
 import { withTracking } from 'web/lib/service/analytics'
+import { FollowMarketButton } from 'web/components/follow-market-button'
 
 export function ShareRow(props: {
   contract: Contract
@@ -62,6 +63,7 @@ export function ShareRow(props: {
           />
         </Button>
       )}
+      <FollowMarketButton contract={contract} user={user} />
     </Row>
   )
 }

web/components/follow-market-button.tsx

@@ -5,7 +5,7 @@ import {
   unFollowContract,
 } from 'web/lib/firebase/contracts'
 import toast from 'react-hot-toast'
-import { CheckIcon, HeartIcon } from '@heroicons/react/outline'
+import { CheckIcon, EyeIcon, EyeOffIcon } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import { User } from 'common/user'
 import { useContractFollows } from 'web/hooks/use-follows'
@@ -13,6 +13,7 @@ import { firebaseLogin, updateUser } from 'web/lib/firebase/users'
 import { track } from 'web/lib/service/analytics'
 import { FollowMarketModal } from 'web/components/contract/follow-market-modal'
 import { useState } from 'react'
+import { Row } from 'web/components/layout/row'
 
 export const FollowMarketButton = (props: {
   contract: Contract
@@ -30,7 +31,7 @@ export const FollowMarketButton = (props: {
         if (!user) return firebaseLogin()
         if (followers?.includes(user.id)) {
           await unFollowContract(contract.id, user.id)
-          toast('Notifications from this market are now silenced.', {
+          toast("You'll no longer receive notifications from this market", {
             icon: <CheckIcon className={'text-primary h-5 w-5'} />,
           })
           track('Unfollow Market', {
@@ -38,7 +39,7 @@ export const FollowMarketButton = (props: {
           })
         } else {
           await followContract(contract.id, user.id)
-          toast('You are now following this market!', {
+          toast("You'll now receive notifications from this market!", {
             icon: <CheckIcon className={'text-primary h-5 w-5'} />,
           })
           track('Follow Market', {
@@ -54,15 +55,21 @@ export const FollowMarketButton = (props: {
       }}
     >
       {followers?.includes(user?.id ?? 'nope') ? (
-        <HeartIcon
+        <Row className={'gap-2'}>
-          className={clsx('h-6 w-6  fill-red-600 stroke-red-600 xl:h-7 xl:w-7')}
+          <EyeOffIcon
-          aria-hidden="true"
-        />
-      ) : (
-        <HeartIcon
             className={clsx('h-6 w-6 xl:h-7 xl:w-7')}
             aria-hidden="true"
           />
+          Unfollow
+        </Row>
+      ) : (
+        <Row className={'gap-2'}>
+          <EyeIcon
+            className={clsx('h-6 w-6 xl:h-7 xl:w-7')}
+            aria-hidden="true"
+          />
+          Follow
+        </Row>
       )}
       <FollowMarketModal
         open={open}