contract card: simplify date display

web/components/contract-card.tsx

@@ -156,30 +156,39 @@ export function ContractDetails(props: { contract: Contract }) {
           username={creatorUsername}
         />
         <div className="">•</div>
+
         <div className="whitespace-nowrap">
-          <DateTimeTooltip time={contract.createdTime}>
+          <DateTimeTooltip text="Market created:" time={contract.createdTime}>
             {createdDate}
           </DateTimeTooltip>
+
           {resolvedDate && contract.resolutionTime ? (
             <>
               {' - '}
-              <DateTimeTooltip time={contract.resolutionTime}>
+              <DateTimeTooltip
+                text="Market resolved:"
+                time={contract.resolutionTime}
+              >
                 {resolvedDate}
               </DateTimeTooltip>
             </>
           ) : null}
-        </div>
+
-        {!resolvedDate && closeTime && (
+          {!resolvedDate && closeTime && (
-          <>
+            <>
-            <div className="">•</div>
+              {' - '}
-            <div className="whitespace-nowrap">
+              <DateTimeTooltip
-              {closeTime > Date.now() ? 'Closes' : 'Closed'}{' '}
+                text={
-              <DateTimeTooltip time={closeTime}>
+                  closeTime > Date.now() ? 'Market closes: ' : 'Market closed:'
+                }
+                time={closeTime}
+              >
                 {dayjs(closeTime).format('MMM D, YYYY')}
               </DateTimeTooltip>
-            </div>
+            </>
-          </>
+          )}
-        )}
+        </div>
+
         <div className="">•</div>
         <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
       </Row>

web/components/datetime-tooltip.tsx

@@ -9,14 +9,19 @@ dayjs.extend(advanced)
 
 export function DateTimeTooltip(props: {
   time: number
+  text?: string
   children?: React.ReactNode
 }) {
-  const { time } = props
+  const { time, text } = props
+
+  const formattedTime = dayjs(time).format('MMM DD, YYYY hh:mm a z')
+  const toolTip = text ? `${text} ${formattedTime}` : formattedTime
+
   return (
     <>
       <span
         className="tooltip cursor-default hidden sm:inline-block"
-        data-tip={dayjs(time).format('MMM DD, YYYY hh:mm a z')}
+        data-tip={toolTip}
       >
         {props.children}
       </span>