moved groups around, added new subscribe button

web/components/contract/contract-details.tsx

@@ -122,51 +122,21 @@ export function ContractDetails(props: {
   const { volumeLabel, resolvedDate } = contractMetrics(contract)
   const user = useUser()
   const isCreator = user?.id === creatorId
-  const [open, setOpen] = useState(false)
   const { width } = useWindowSize()
   const isMobile = (width ?? 0) < 600
-  const groupToDisplay = getGroupLinkToDisplay(contract)
-  const groupInfo = groupToDisplay ? (
-    <Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
-      <a
-        className={clsx(
-          linkClass,
-          'flex flex-row items-center truncate pr-0 sm:pr-2',
-          isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
-        )}
-      >
-        {/* <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>
-  ) : (
-    <Button
-      size={'xs'}
-      className={'max-w-[200px] pr-2'}
-      color={'gray-white'}
-      onClick={() => !groupToDisplay && setOpen(true)}
-    >
-      <Row>
-        {/* <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 (
+    <Col>
       <Row>
         <Avatar
           username={creatorUsername}
           avatarUrl={creatorAvatarUrl}
           noLink={disabled}
           size={9}
+          className="mr-1.5"
         />
         {!disabled && (
-        <div className="absolute mt-4">
+          <div className="absolute mt-2 ml-[11px]">
             <MiniUserFollowButton userId={creatorId} />
           </div>
         )}
@@ -183,7 +153,7 @@ export function ContractDetails(props: {
               />
             )}
           </Row>
-        <Row className="text-2xs text-greyscale-4 sm:text-xs">
+          <Row className="text-2xs text-greyscale-4 gap-2 sm:text-xs">
             {(!!closeTime || !!resolvedDate) && (
               <Row className="items-center gap-1">
                 {resolvedDate && resolutionTime ? (
@@ -212,22 +182,97 @@ export function ContractDetails(props: {
                 )}
               </Row>
             )}
-          {/* <Row>
+            {!isMobile && (
-            {disabled ? (
+              <MarketGroups
-              groupInfo
+                contract={contract}
-            ) : !groupToDisplay && !user ? (
+                isMobile={isMobile}
-              <div />
+                disabled={disabled}
+              />
+            )}
+          </Row>
+        </Col>
+        <div className="mt-0">
+          <ExtraContractActionsRow contract={contract} />
+        </div>
+      </Row>
+      {/* GROUPS */}
+      {isMobile && (
+        <div className="mt-2">
+          <MarketGroups
+            contract={contract}
+            isMobile={isMobile}
+            disabled={disabled}
+          />
+        </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>
+        </>
+      )} */}
+    </Col>
+  )
+}
+
+export function MarketGroups(props: {
+  contract: Contract
+  isMobile: boolean | undefined
+  disabled: boolean | undefined
+}) {
+  const [open, setOpen] = useState(false)
+  const user = useUser()
+  const { contract, isMobile, disabled } = props
+  const groupToDisplay = getGroupLinkToDisplay(contract)
+  const groupInfo = groupToDisplay ? (
+    <Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
+      <a
+        className={clsx(
+          'flex flex-row items-center truncate pr-1',
+          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">
+          {groupToDisplay.name}
+        </div>
+      </a>
+    </Link>
   ) : (
+    <Row
+      className={clsx(
+        'cursor-default select-none items-center truncate pr-1',
+        isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
+      )}
+    >
+      <div
+        className={clsx(
+          'bg-greyscale-6 text-2xs items-center truncate rounded-full px-2 text-white sm:text-xs'
+        )}
+      >
+        No Group
+      </div>
+    </Row>
+  )
+  return (
+    <>
+      <Row className="align-middle">
+        {disabled ? (
+          { groupInfo }
+        ) : (
+          // !user ? (
+          //   <div />
+          // ) :
           <Row>
             {groupInfo}
-                {user && groupToDisplay && (
+            {user && (
-                  <Button
+              <button
-                    size={'xs'}
+                className="text-greyscale-6 hover:text-greyscale-4"
-                    color={'gray-white'}
                 onClick={() => setOpen(!open)}
               >
                 <PlusCircleIcon className="mb-0.5 mr-0.5 inline h-4 w-4 shrink-0" />
-                  </Button>
+              </button>
             )}
           </Row>
         )}
@@ -240,21 +285,8 @@ export function ContractDetails(props: {
         >
           <ContractGroupsList contract={contract} user={user} />
         </Col>
-          </Modal> */}
+      </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>
   )
 }
 

web/components/contract/contract-overview.tsx

@@ -75,12 +75,14 @@ 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>
         <Row className="items-center justify-between gap-4 xl:hidden">
           <BinaryResolutionOrChance contract={contract} />
           {/* <ExtraMobileContractDetails contract={contract} /> */}

web/components/follow-button.tsx

@@ -129,6 +129,7 @@ export function MiniUserFollowButton(props: { userId: string }) {
           className={clsx('h-[24px] w-5 sm:mr-2')}
           aria-hidden="true"
         />
+        <circle className="absolute h-5 w-5 text-white" />
       </Button>
     </>
   )