Change positioning for large screens

web/components/contract/contract-overview.tsx

@@ -46,7 +46,11 @@ export const ContractOverview = (props: {
           </div>
           {(outcomeType === 'FREE_RESPONSE' ||
             outcomeType === 'MULTIPLE_CHOICE') &&
-            !resolution && <LikeMarketButton contract={contract} user={user} />}
+            !resolution && (
+              <div className={'sm:hidden'}>
+                <LikeMarketButton contract={contract} user={user} />
+              </div>
+            )}
           <Row className={'hidden gap-3 xl:flex'}>
             {isBinary && (
               <BinaryResolutionOrChance
@@ -77,7 +81,9 @@ export const ContractOverview = (props: {
             <BinaryResolutionOrChance contract={contract} />
             {tradingAllowed(contract) && (
               <Row>
+                <div className={'sm:hidden'}>
                   <LikeMarketButton contract={contract} user={user} />
+                </div>
                 <Col>
                   <BetButton contract={contract as CPMMBinaryContract} />
                   {!user && (
@@ -94,7 +100,9 @@ export const ContractOverview = (props: {
             <PseudoNumericResolutionOrExpectation contract={contract} />
             {tradingAllowed(contract) && (
               <Row>
+                <div className={'sm:hidden'}>
                   <LikeMarketButton contract={contract} user={user} />
+                </div>
                 <Col>
                   <BetButton contract={contract} />
                   {!user && (

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

@@ -8,8 +8,8 @@ import toast from 'react-hot-toast'
 import { formatMoney } from 'common/util/format'
 import { likeContract, unLikeContract } from 'web/lib/firebase/likes'
 import { LIKE_TIP_AMOUNT } from 'common/like'
-import { Col } from 'web/components/layout/col'
 import clsx from 'clsx'
+import { Row } from 'web/components/layout/row'
 
 export function LikeMarketButton(props: {
   contract: Contract
@@ -26,7 +26,6 @@ export function LikeMarketButton(props: {
   const onLike = async () => {
     if (likedContractIds?.includes(contract.id)) {
       await unLikeContract(user.id, contract.id)
-      toast(`You removed this market from your likes`)
       return
     }
     await likeContract(user, contract)
@@ -40,7 +39,7 @@ export function LikeMarketButton(props: {
       color={'gray-white'}
       onClick={onLike}
     >
-      <Col className={'items-center justify-center'}>
+      <Row className={'gap-0 sm:gap-2'}>
         <HeartIcon
           className={clsx(
             'h-6 w-6',
@@ -49,7 +48,8 @@ export function LikeMarketButton(props: {
               : ''
           )}
         />
-      </Col>
+        <span className={'hidden sm:block'}>Tip</span>
+      </Row>
     </Button>
   )
 }

web/components/contract/share-row.tsx

@@ -11,6 +11,7 @@ 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'
+import { LikeMarketButton } from 'web/components/contract/like-market-button'
 
 export function ShareRow(props: {
   contract: Contract
@@ -64,6 +65,9 @@ export function ShareRow(props: {
         </Button>
       )}
       <FollowMarketButton contract={contract} user={user} />
+      <div className={'hidden sm:block'}>
+        <LikeMarketButton contract={contract} user={user} />
+      </div>
     </Row>
   )
 }