cleaned up add button, spacing things

web/components/contract/contract-card.tsx

@@ -106,7 +106,7 @@ export function ContractCard(props: {
         <>
           {outcomeType === 'BINARY' && (
             <BinaryResolutionOrChance
-              className="items-center self-center"
+              className="items-center self-center pr-5"
               contract={contract}
             />
           )}

web/components/contract/contract-details.tsx

@@ -106,6 +106,11 @@ export function AvatarDetails(props: {
   )
 }
 
+export function getIsMobile() {
+  const { width } = useWindowSize()
+  return (width ?? 0) < 600
+}
+
 export function ContractDetails(props: {
   contract: Contract
   disabled?: boolean
@@ -123,7 +128,7 @@ export function ContractDetails(props: {
   const user = useUser()
   const isCreator = user?.id === creatorId
   const { width } = useWindowSize()
-  const isMobile = (width ?? 0) < 600
+  const isMobile = getIsMobile()
 
   return (
     <Col>
@@ -136,7 +141,7 @@ export function ContractDetails(props: {
           className="mr-1.5"
         />
         {!disabled && (
-          <div className="absolute mt-2 ml-[11px]">
+          <div className="absolute mt-3 ml-[11px]">
             <MiniUserFollowButton userId={creatorId} />
           </div>
         )}
@@ -234,7 +239,7 @@ export function MarketGroups(props: {
           isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
         )}
       >
-        <div className="bg-greyscale-6 hover:bg-greyscale-4 text-2xs items-center truncate rounded-full px-2 text-white sm:text-xs">
+        <div className="bg-greyscale-4 hover:bg-greyscale-3 text-2xs items-center truncate rounded-full px-2 text-white sm:text-xs">
           {groupToDisplay.name}
         </div>
       </a>
@@ -248,7 +253,7 @@ export function MarketGroups(props: {
     >
       <div
         className={clsx(
-          'bg-greyscale-6 text-2xs items-center truncate rounded-full px-2 text-white sm:text-xs'
+          'bg-greyscale-4 text-2xs items-center truncate rounded-full px-2 text-white sm:text-xs'
         )}
       >
         No Group
@@ -268,7 +273,7 @@ export function MarketGroups(props: {
             {groupInfo}
             {user && (
               <button
-                className="text-greyscale-6 hover:text-greyscale-4"
+                className="text-greyscale-4 hover:text-greyscale-3"
                 onClick={() => setOpen(!open)}
               >
                 <PlusCircleIcon className="mb-0.5 mr-0.5 inline h-4 w-4 shrink-0" />

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

@@ -19,6 +19,9 @@ import ShortToggle from '../widgets/short-toggle'
 import { DuplicateContractButton } from '../copy-contract-button'
 import { Row } from '../layout/row'
 import { Button } from '../button'
+import { FollowMarketButton } from '../follow-market-button'
+import { useUser } from 'web/hooks/use-user'
+import { LikeMarketButton } from './like-market-button'
 
 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'
@@ -27,6 +30,7 @@ export function ContractInfoDialog(props: {
   contract: Contract
   className?: string
 }) {
+  const user = useUser()
   const { contract, className } = props
 
   const [open, setOpen] = useState(false)
@@ -82,7 +86,15 @@ export function ContractInfoDialog(props: {
 
       <Modal open={open} setOpen={setOpen}>
         <Col className="gap-4 rounded bg-white p-6">
-          <Title className="!mt-0 !mb-0" text="Market info" />
+          <Row className="w-full justify-between">
+            <Title className="!mt-0 !mb-0" text="This Market" />
+            <div>
+              <FollowMarketButton contract={contract} user={user} />
+              {user?.id !== contract.creatorId && (
+                <LikeMarketButton contract={contract} user={user} />
+              )}
+            </div>
+          </Row>
 
           <table className="table-compact table-zebra table w-full text-gray-500">
             <tbody>

web/components/contract/contract-overview.tsx

@@ -73,7 +73,7 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
   const { contract, bets } = props
   return (
     <Col className="gap-1 md:gap-2">
-      <Col className="gap-3 px-2 sm:gap-4">
+      <Col className="gap-1 px-2">
         <ContractDetails contract={contract} />
         <Row className="justify-between gap-4">
           <OverviewQuestion text={contract.question} />

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

@@ -18,20 +18,16 @@ import ChallengeIcon from 'web/lib/icons/challenge-icon'
 
 export function ExtraContractActionsRow(props: { contract: Contract }) {
   const { contract } = props
-  const { outcomeType, resolution } = contract
+  // const { outcomeType, resolution } = contract
   const user = useUser()
   const [isShareOpen, setShareOpen] = useState(false)
-  const [openCreateChallengeModal, setOpenCreateChallengeModal] =
-    useState(false)
+  // const [openCreateChallengeModal, setOpenCreateChallengeModal] =
+  //   useState(false)
   // const showChallenge =
   //   user && outcomeType === 'BINARY' && !resolution && CHALLENGES_ENABLED
 
   return (
     <Row>
-      {/* <FollowMarketButton contract={contract} user={user} />
-      {user?.id !== contract.creatorId && (
-        <LikeMarketButton contract={contract} user={user} />
-      )} */}
       <Button
         size="sm"
         color="gray-white"
@@ -42,7 +38,6 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
       >
         <Row>
           <ShareIcon className={clsx('h-5 w-5')} aria-hidden="true" />
-          {/* <span className="hidden sm:block">Share</span> */}
         </Row>
         <ShareModal
           isOpen={isShareOpen}
@@ -51,29 +46,6 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
           user={user}
         />
       </Button>
-
-      {/* {showChallenge && (
-        <Button
-          size="lg"
-          color="gray-white"
-          className="max-w-xs self-center"
-          onClick={withTracking(
-            () => setOpenCreateChallengeModal(true),
-            'click challenge button'
-          )}
-        >
-          <Col className="items-center sm:flex-row">
-            <ChallengeIcon className="mx-auto h-[24px] w-5 text-gray-500 sm:mr-2" />
-            <span>Challenge</span>
-          </Col>
-          <CreateChallengeModal
-            isOpen={openCreateChallengeModal}
-            setOpen={setOpenCreateChallengeModal}
-            user={user}
-            contract={contract}
-          />
-        </Button>
-      )} */}
       <Col className={'justify-center'}>
         <ContractInfoDialog contract={contract} />
       </Col>

web/components/follow-button.tsx

@@ -1,5 +1,6 @@
-import { PlusCircleIcon } from '@heroicons/react/solid'
+import { CheckCircleIcon, PlusCircleIcon } from '@heroicons/react/solid'
 import clsx from 'clsx'
+import { useEffect, useState } from 'react'
 import { useFollows } from 'web/hooks/use-follows'
 import { useUser } from 'web/hooks/use-user'
 import { follow, unfollow } from 'web/lib/firebase/users'
@@ -73,35 +74,6 @@ export function UserFollowButton(props: { userId: string; small?: boolean }) {
   )
 }
 
-// export function MiniFollowButton(props: {
-//   isFollowing: boolean | undefined
-//   onFollow: () => void
-//   onUnfollow: () => void
-//   className?: string
-// }) {
-//   const { isFollowing, onFollow, className } = props
-
-//   const user = useUser()
-
-//   if (isFollowing || !user || isFollowing === undefined) {
-//     return <></>
-//   }
-
-//   return (
-//     <Button
-//       size="sm"
-//       color="highlight-blue"
-//       onClick={withTracking(onFollow, 'follow')}
-//       className={className}
-//     >
-//       <PlusCircleIcon
-//         className={clsx('h-[24px] w-5 sm:mr-2')}
-//         aria-hidden="true"
-//       />
-//     </Button>
-//   )
-// }
-
 export function MiniUserFollowButton(props: { userId: string }) {
   const { userId } = props
   const currentUser = useUser()
@@ -117,7 +89,6 @@ export function MiniUserFollowButton(props: { userId: string }) {
     isFollowing === undefined
   )
     return null
-
   return (
     <>
       <Button
@@ -126,10 +97,11 @@ export function MiniUserFollowButton(props: { userId: string }) {
         onClick={withTracking(() => follow(currentUser.id, userId), 'follow')}
       >
         <PlusCircleIcon
-          className={clsx('h-[24px] w-5 sm:mr-2')}
+          className={clsx(
+            'hover:text-hover-blue h-5 w-5 rounded-full bg-white sm:mr-2'
+          )}
           aria-hidden="true"
         />
-        <circle className="absolute h-5 w-5 text-white" />
       </Button>
     </>
   )

web/tailwind.config.js

@@ -27,6 +27,7 @@ module.exports = {
         'greyscale-6': '#66667C',
         'greyscale-7': '#111140',
         'highlight-blue': '#5BCEFF',
+        'hover-blue': '#90DEFF',
       },
       typography: {
         quoteless: {