Move contract close time into contract details

web/components/contract-card.tsx

@@ -7,6 +7,7 @@ import { Linkify } from './linkify'
 import { Contract, compute, path } from '../lib/firebase/contracts'
 import { Col } from './layout/col'
 import { parseTags } from '../lib/util/parse'
+import dayjs from 'dayjs'
 
 export function ContractCard(props: { contract: Contract }) {
   const { contract } = props
@@ -104,7 +105,7 @@ export function AbbrContractDetails(props: { contract: Contract }) {
 
 export function ContractDetails(props: { contract: Contract }) {
   const { contract } = props
-  const { question, description } = contract
+  const { question, description, closeTime } = contract
   const { truePool, createdDate, resolvedDate } = compute(contract)
 
   const tags = parseTags(`${question} ${description}`).map((tag) => `#${tag}`)
@@ -119,6 +120,15 @@ export function ContractDetails(props: { contract: Contract }) {
         <div className="whitespace-nowrap">
           {resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}
         </div>
+        {!resolvedDate && closeTime && (
+          <>
+            <div className="">•</div>
+            <div className="whitespace-nowrap">
+              {closeTime > Date.now() ? 'Closes' : 'Closed'}{' '}
+              {dayjs(closeTime).format('MMM D, h:mma')}
+            </div>
+          </>
+        )}
         <div className="">•</div>
         <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
       </Row>

web/components/contract-feed.tsx

@@ -65,7 +65,7 @@ function Timestamp(props: { time: number }) {
   const { time } = props
   return (
     <span
-      className="whitespace-nowrap text-gray-300"
+      className="whitespace-nowrap text-gray-300 ml-1"
       title={dayjs(time).format('MMM D, h:mma')}
     >
       {dayjs(time).fromNow()}

web/components/contract-overview.tsx

@@ -10,26 +10,12 @@ import { ContractProbGraph } from './contract-prob-graph'
 import router from 'next/router'
 import { useUser } from '../hooks/use-user'
 import { Row } from './layout/row'
-import dayjs from 'dayjs'
 import { Linkify } from './linkify'
 import clsx from 'clsx'
 import { ContractDetails, ResolutionOrChance } from './contract-card'
 import { ContractFeed } from './contract-feed'
 import { TweetButton } from './tweet-button'
 
-function ContractCloseTime(props: { contract: Contract }) {
-  const closeTime = props.contract.closeTime
-  if (!closeTime) {
-    return null
-  }
-  return (
-    <div className="text-gray-500 text-sm">
-      Trading {closeTime > Date.now() ? 'closes' : 'closed'} at{' '}
-      {dayjs(closeTime).format('MMM D, h:mma')}
-    </div>
-  )
-}
-
 export const ContractOverview = (props: {
   contract: Contract
   className?: string
@@ -103,10 +89,6 @@ export const ContractOverview = (props: {
       )}
 
       <ContractFeed contract={contract} />
-
-      <Spacer h={4} />
-
-      <ContractCloseTime contract={contract} />
     </Col>
   )
 }