initial commit for UI mobile changes

2022-09-13 01:08:18 -07:00 · 2022-09-13 01:08:18 -07:00 · 7d9a57bf86
commit 7d9a57bf86
parent f49cb9b399
11 changed files with 235 additions and 138 deletions
--- a/web/components/button.tsx
+++ b/web/components/button.tsx
@ -11,6 +11,7 @@ export type ColorType =
  | 'gray'
  | 'gradient'
  | 'gray-white'
+  | 'highlight-blue'

 export function Button(props: {
  className?: string
@ -56,8 +57,9 @@ export function Button(props: {
        color === 'gradient' &&
          'border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
        color === 'gray-white' &&
-          'border-none bg-white text-gray-500 shadow-none hover:bg-gray-200',
-        className
+          'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none',
+        color === 'highlight-blue' &&
+          'text-highlight-blue border-none shadow-none'
      )}
      disabled={disabled}
      onClick={onClick}
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@ -106,7 +106,7 @@ export function ContractCard(props: {
        <>
          {outcomeType === 'BINARY' && (
            <BinaryResolutionOrChance
-              className="items-center self-center pr-5"
+              className="items-center self-center"
              contract={contract}
            />
          )}
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@ -18,7 +18,7 @@ import { Avatar } from '../avatar'
 import { useState } from 'react'
 import { ContractInfoDialog } from './contract-info-dialog'
 import NewContractBadge from '../new-contract-badge'
-import { UserFollowButton } from '../follow-button'
+import { MiniUserFollowButton, UserFollowButton } from '../follow-button'
 import { DAY_MS } from 'common/util/time'
 import { useUser } from 'web/hooks/use-user'
 import { exhibitExts } from 'common/util/parse'
@ -34,6 +34,8 @@ import { UserLink } from 'web/components/user-link'
 import { FeaturedContractBadge } from 'web/components/contract/featured-contract-badge'
 import { Tooltip } from 'web/components/tooltip'
 import { useWindowSize } from 'web/hooks/use-window-size'
+import { ExtraContractActionsRow } from './extra-contract-actions-row'
+import { PlusCircleIcon } from '@heroicons/react/solid'

 export type ShowTime = 'resolve-date' | 'close-date'

@ -133,8 +135,10 @@ export function ContractDetails(props: {
          isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
        )}
      >
-        <UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
-        <span className="items-center truncate">{groupToDisplay.name}</span>
+        {/* <UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" /> */}
+        <div className="bg-greyscale-6 items-center truncate rounded-full px-2 text-white">
+          {groupToDisplay.name}
+        </div>
      </a>
    </Link>
  ) : (
@ -145,100 +149,111 @@ export function ContractDetails(props: {
      onClick={() => !groupToDisplay && setOpen(true)}
    >
      <Row>
-        <UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
-        <span className="truncate">No Group</span>
+        {/* <UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" /> */}
+        <div className="bg-greyscale-6 items-center truncate rounded-full px-2 text-white">
+          No Group
+        </div>
      </Row>
    </Button>
  )

  return (
-    <Row className="flex-1 flex-wrap items-center gap-2 text-sm text-gray-500 md:gap-x-4 md:gap-y-2">
-      <Row className="items-center gap-2">
-        <Avatar
-          username={creatorUsername}
-          avatarUrl={creatorAvatarUrl}
-          noLink={disabled}
-          size={6}
-        />
-        {disabled ? (
-          creatorName
-        ) : (
-          <UserLink
-            className="whitespace-nowrap"
-            name={creatorName}
-            username={creatorUsername}
-            short={isMobile}
-          />
-        )}
-        {!disabled && <UserFollowButton userId={creatorId} small />}
-      </Row>
-      <Row>
-        {disabled ? (
-          groupInfo
-        ) : !groupToDisplay && !user ? (
-          <div />
-        ) : (
-          <Row>
-            {groupInfo}
-            {user && groupToDisplay && (
-              <Button
-                size={'xs'}
-                color={'gray-white'}
-                onClick={() => setOpen(!open)}
-              >
-                <PencilIcon className="mb-0.5 mr-0.5 inline h-4 w-4 shrink-0" />
-              </Button>
-            )}
-          </Row>
-        )}
-      </Row>
-      <Modal open={open} setOpen={setOpen} size={'md'}>
-        <Col
-          className={
-            'max-h-[70vh] min-h-[20rem] overflow-auto rounded bg-white p-6'
-          }
-        >
-          <ContractGroupsList contract={contract} user={user} />
-        </Col>
-      </Modal>
-
-      {(!!closeTime || !!resolvedDate) && (
-        <Row className="hidden items-center gap-1 md:inline-flex">
-          {resolvedDate && resolutionTime ? (
-            <>
-              <ClockIcon className="h-5 w-5" />
-              <DateTimeTooltip text="Market resolved:" time={resolutionTime}>
-                {resolvedDate}
-              </DateTimeTooltip>
-            </>
-          ) : null}
-
-          {!resolvedDate && closeTime && user && (
-            <>
-              <ClockIcon className="h-5 w-5" />
-              <EditableCloseDate
-                closeTime={closeTime}
-                contract={contract}
-                isCreator={isCreator ?? false}
-              />
-            </>
-          )}
-        </Row>
+    <Row>
+      <Avatar
+        username={creatorUsername}
+        avatarUrl={creatorAvatarUrl}
+        noLink={disabled}
+        size={9}
+      />
+      {!disabled && (
+        <div className="absolute mt-4">
+          <MiniUserFollowButton userId={creatorId} />
+        </div>
      )}
-      {user && (
-        <>
-          <Row className="hidden items-center gap-1 md:inline-flex">
-            <DatabaseIcon className="h-5 w-5" />
-            <div className="whitespace-nowrap">{volumeLabel}</div>
-          </Row>
-          {!disabled && (
-            <ContractInfoDialog
-              contract={contract}
-              className={'hidden md:inline-flex'}
+      <Col className="text-greyscale-6 ml-2 flex-1 flex-wrap text-sm">
+        <Row className="w-full justify-between ">
+          {disabled ? (
+            creatorName
+          ) : (
+            <UserLink
+              className="my-auto whitespace-nowrap"
+              name={creatorName}
+              username={creatorUsername}
+              short={isMobile}
            />
          )}
-        </>
-      )}
+        </Row>
+        <Row className="text-2xs text-greyscale-4 sm:text-xs">
+          {(!!closeTime || !!resolvedDate) && (
+            <Row className="items-center gap-1">
+              {resolvedDate && resolutionTime ? (
+                <>
+                  <DateTimeTooltip
+                    text="Market resolved:"
+                    time={resolutionTime}
+                  >
+                    <Row>
+                      <div>resolved&nbsp;</div>
+                      <b>{resolvedDate}</b>
+                    </Row>
+                  </DateTimeTooltip>
+                </>
+              ) : null}
+
+              {!resolvedDate && closeTime && user && (
+                <Row>
+                  <div>Closes&nbsp;</div>
+                  <EditableCloseDate
+                    closeTime={closeTime}
+                    contract={contract}
+                    isCreator={isCreator ?? false}
+                  />
+                </Row>
+              )}
+            </Row>
+          )}
+          {/* <Row>
+            {disabled ? (
+              groupInfo
+            ) : !groupToDisplay && !user ? (
+              <div />
+            ) : (
+              <Row>
+                {groupInfo}
+                {user && groupToDisplay && (
+                  <Button
+                    size={'xs'}
+                    color={'gray-white'}
+                    onClick={() => setOpen(!open)}
+                  >
+                    <PlusCircleIcon className="mb-0.5 mr-0.5 inline h-4 w-4 shrink-0" />
+                  </Button>
+                )}
+              </Row>
+            )}
+          </Row>
+          <Modal open={open} setOpen={setOpen} size={'md'}>
+            <Col
+              className={
+                'max-h-[70vh] min-h-[20rem] overflow-auto rounded bg-white p-6'
+              }
+            >
+              <ContractGroupsList contract={contract} user={user} />
+            </Col>
+          </Modal> */}
+          {/* {user && (
+            <>
+              <Row className="hidden items-center gap-1 md:inline-flex">
+                <DatabaseIcon className="h-5 w-5" />
+                <div className="whitespace-nowrap">{volumeLabel}</div>
+              </Row>
+            </>
+          )} */}
+        </Row>
+      </Col>
+      <div className="mt-0">
+        <ExtraContractActionsRow contract={contract} />
+      </div>
    </Row>
  )
 }
@ -280,12 +295,12 @@ export function ExtraMobileContractDetails(props: {
        !resolvedDate &&
        closeTime && (
          <Col className={'items-center text-sm text-gray-500'}>
+            <Row className={'text-gray-400'}>Closes&nbsp;</Row>
            <EditableCloseDate
              closeTime={closeTime}
              contract={contract}
              isCreator={creatorId === user?.id}
            />
-            <Row className={'text-gray-400'}>Ends</Row>
          </Col>
        )
      )}
--- a/web/components/contract/contract-info-dialog.tsx
+++ b/web/components/contract/contract-info-dialog.tsx
@ -18,6 +18,7 @@ import { deleteField } from 'firebase/firestore'
 import ShortToggle from '../widgets/short-toggle'
 import { DuplicateContractButton } from '../copy-contract-button'
 import { Row } from '../layout/row'
+import { Button } from '../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'
@ -67,15 +68,17 @@ export function ContractInfoDialog(props: {

  return (
    <>
-      <button
+      <Button
+        size="sm"
+        color="gray-white"
        className={clsx(contractDetailsButtonClassName, className)}
        onClick={() => setOpen(true)}
      >
        <DotsHorizontalIcon
-          className={clsx('h-6 w-6 flex-shrink-0')}
+          className={clsx('h-5 w-5 flex-shrink-0')}
          aria-hidden="true"
        />
-      </button>
+      </Button>

      <Modal open={open} setOpen={setOpen}>
        <Col className="gap-4 rounded bg-white p-6">
--- a/web/components/contract/contract-overview.tsx
+++ b/web/components/contract/contract-overview.tsx
@ -29,7 +29,7 @@ import { ContractDetails, ExtraMobileContractDetails } from './contract-details'
 import { NumericGraph } from './numeric-graph'

 const OverviewQuestion = (props: { text: string }) => (
-  <Linkify className="text-2xl text-indigo-700 md:text-3xl" text={props.text} />
+  <Linkify className="text-lg text-indigo-700 sm:text-2xl" text={props.text} />
 )

 const BetWidget = (props: { contract: CPMMContract }) => {
@ -75,17 +75,15 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
    <Col className="gap-1 md:gap-2">
      <Col className="gap-3 px-2 sm:gap-4">
        <ContractDetails contract={contract} />
-        <Row className="justify-between gap-4">
-          <OverviewQuestion text={contract.question} />
-          <BinaryResolutionOrChance
-            className="hidden items-end xl:flex"
-            contract={contract}
-            large
-          />
-        </Row>
+        <OverviewQuestion text={contract.question} />
+        <BinaryResolutionOrChance
+          className="hidden items-end xl:flex"
+          contract={contract}
+          large
+        />
        <Row className="items-center justify-between gap-4 xl:hidden">
          <BinaryResolutionOrChance contract={contract} />
-          <ExtraMobileContractDetails contract={contract} />
+          {/* <ExtraMobileContractDetails contract={contract} /> */}
          {tradingAllowed(contract) && (
            <BetWidget contract={contract as CPMMBinaryContract} />
          )}
@ -113,10 +111,10 @@ const ChoiceOverview = (props: {
      </Col>
      <Col className={'mb-1 gap-y-2'}>
        <AnswersGraph contract={contract} bets={[...bets].reverse()} />
-        <ExtraMobileContractDetails
+        {/* <ExtraMobileContractDetails
          contract={contract}
          forceShowVolume={true}
-        />
+        /> */}
      </Col>
    </Col>
  )
@ -140,7 +138,7 @@ const PseudoNumericOverview = (props: {
        </Row>
        <Row className="items-center justify-between gap-4 xl:hidden">
          <PseudoNumericResolutionOrExpectation contract={contract} />
-          <ExtraMobileContractDetails contract={contract} />
+          {/* <ExtraMobileContractDetails contract={contract} /> */}
          {tradingAllowed(contract) && <BetWidget contract={contract} />}
        </Row>
      </Col>
--- a/web/components/contract/extra-contract-actions-row.tsx
+++ b/web/components/contract/extra-contract-actions-row.tsx
@ -23,26 +23,27 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
  const [isShareOpen, setShareOpen] = useState(false)
  const [openCreateChallengeModal, setOpenCreateChallengeModal] =
    useState(false)
-  const showChallenge =
-    user && outcomeType === 'BINARY' && !resolution && CHALLENGES_ENABLED
+  // const showChallenge =
+  //   user && outcomeType === 'BINARY' && !resolution && CHALLENGES_ENABLED

  return (
-    <Row className={'mt-0.5 justify-around sm:mt-2 lg:justify-start'}>
+    <Row>
+      {/* <FollowMarketButton contract={contract} user={user} />
+      {user?.id !== contract.creatorId && (
+        <LikeMarketButton contract={contract} user={user} />
+      )} */}
      <Button
-        size="lg"
+        size="sm"
        color="gray-white"
        className={'flex'}
        onClick={() => {
          setShareOpen(true)
        }}
      >
-        <Col className={'items-center sm:flex-row'}>
-          <ShareIcon
-            className={clsx('h-[24px] w-5 sm:mr-2')}
-            aria-hidden="true"
-          />
-          <span>Share</span>
-        </Col>
+        <Row>
+          <ShareIcon className={clsx('h-5 w-5')} aria-hidden="true" />
+          {/* <span className="hidden sm:block">Share</span> */}
+        </Row>
        <ShareModal
          isOpen={isShareOpen}
          setOpen={setShareOpen}
@ -51,7 +52,7 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
        />
      </Button>

-      {showChallenge && (
+      {/* {showChallenge && (
        <Button
          size="lg"
          color="gray-white"
@ -72,13 +73,8 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
            contract={contract}
          />
        </Button>
-      )}
-
-      <FollowMarketButton contract={contract} user={user} />
-      {user?.id !== contract.creatorId && (
-        <LikeMarketButton contract={contract} user={user} />
-      )}
-      <Col className={'justify-center md:hidden'}>
+      )} */}
+      <Col className={'justify-center'}>
        <ContractInfoDialog contract={contract} />
      </Col>
    </Row>
--- a/web/components/contract/like-market-button.tsx
+++ b/web/components/contract/like-market-button.tsx
@ -38,15 +38,16 @@ export function LikeMarketButton(props: {

  return (
    <Button
-      size={'lg'}
+      size={'sm'}
      className={'max-w-xs self-center'}
      color={'gray-white'}
      onClick={onLike}
    >
-      <Col className={'items-center sm:flex-row'}>
+      <Col className={'relative items-center sm:flex-row'}>
        <HeartIcon
          className={clsx(
-            'h-[24px] w-5 sm:mr-2',
+            '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)))
@ -54,7 +55,19 @@ export function LikeMarketButton(props: {
              : ''
          )}
        />
-        Tip {totalTipped > 0 ? `(${formatMoney(totalTipped)})` : ''}
+        {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>
+        )}
+        {/* Tip {totalTipped > 0 ? `(${formatMoney(totalTipped)})` : ''} */}
      </Col>
    </Button>
  )
--- a/web/components/follow-button.tsx
+++ b/web/components/follow-button.tsx
@ -1,8 +1,11 @@
+import { PlusCircleIcon } from '@heroicons/react/solid'
 import clsx from 'clsx'
 import { useFollows } from 'web/hooks/use-follows'
 import { useUser } from 'web/hooks/use-user'
 import { follow, unfollow } from 'web/lib/firebase/users'
 import { withTracking } from 'web/lib/service/analytics'
+import { Button } from './button'
+import { Col } from './layout/col'

 export function FollowButton(props: {
  isFollowing: boolean | undefined
@ -69,3 +72,64 @@ 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()
+  const following = useFollows(currentUser?.id)
+  const isFollowing = following?.includes(userId)
+  const user = useUser()
+
+  if (
+    !currentUser ||
+    currentUser.id === userId ||
+    isFollowing ||
+    !user ||
+    isFollowing === undefined
+  )
+    return null
+
+  return (
+    <>
+      <Button
+        size="sm"
+        color="highlight-blue"
+        onClick={withTracking(() => follow(currentUser.id, userId), 'follow')}
+      >
+        <PlusCircleIcon
+          className={clsx('h-[24px] w-5 sm:mr-2')}
+          aria-hidden="true"
+        />
+      </Button>
+    </>
+  )
+}
--- a/web/components/follow-market-button.tsx
+++ b/web/components/follow-market-button.tsx
@ -25,7 +25,7 @@ export const FollowMarketButton = (props: {

  return (
    <Button
-      size={'lg'}
+      size={'sm'}
      color={'gray-white'}
      onClick={async () => {
        if (!user) return firebaseLogin()
@ -56,13 +56,19 @@ export const FollowMarketButton = (props: {
    >
      {followers?.includes(user?.id ?? 'nope') ? (
        <Col className={'items-center gap-x-2 sm:flex-row'}>
-          <EyeOffIcon className={clsx('h-6 w-6')} aria-hidden="true" />
-          Unwatch
+          <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-6 w-6')} aria-hidden="true" />
-          Watch
+          <EyeIcon
+            className={clsx('h-5 w-5 sm:h-6 sm:w-6')}
+            aria-hidden="true"
+          />
+          {/* Watch */}
        </Col>
      )}
      <WatchMarketModal
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@ -238,7 +238,6 @@ export function ContractPageContent(
        )}

        <ContractOverview contract={contract} bets={nonChallengeBets} />
-        <ExtraContractActionsRow contract={contract} />
        <ContractDescription className="mb-6 px-2" contract={contract} />

        {outcomeType === 'NUMERIC' && (
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -26,6 +26,7 @@ module.exports = {
        'greyscale-5': '#9191A7',
        'greyscale-6': '#66667C',
        'greyscale-7': '#111140',
+        'highlight-blue': '#5BCEFF',
      },
      typography: {
        quoteless: {