From 4cca60b16e791c470ead584406c783ac681fdf2d Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Wed, 19 Jan 2022 16:01:54 -0600
Subject: [PATCH] contract card: simplify date display

---
 web/components/contract-card.tsx    | 33 ++++++++++++++++++-----------
 web/components/datetime-tooltip.tsx |  9 ++++++--
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx
index a452fec1..53b9f131 100644
--- a/web/components/contract-card.tsx
+++ b/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 && (
-          <>
-            <div className="">•</div>
-            <div className="whitespace-nowrap">
-              {closeTime > Date.now() ? 'Closes' : 'Closed'}{' '}
-              <DateTimeTooltip time={closeTime}>
+
+          {!resolvedDate && closeTime && (
+            <>
+              {' - '}
+              <DateTimeTooltip
+                text={
+                  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>
diff --git a/web/components/datetime-tooltip.tsx b/web/components/datetime-tooltip.tsx
index c6bd1723..064943ff 100644
--- a/web/components/datetime-tooltip.tsx
+++ b/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>