Show DateTime tooltips whereever we show dates

web/components/contract-card.tsx

@@ -13,6 +13,7 @@ import { Col } from './layout/col'
 import { parseTags } from '../lib/util/parse'
 import dayjs from 'dayjs'
 import { TrendingUpIcon } from '@heroicons/react/solid'
+import { DateTimeTooltip } from './datetime-tooltip'
 
 export function ContractCard(props: {
   contract: Contract
@@ -143,14 +144,26 @@ export function ContractDetails(props: { contract: Contract }) {
         />
         <div className="">•</div>
         <div className="whitespace-nowrap">
-          {resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}
+          <DateTimeTooltip time={contract.createdTime}>
+            {createdDate}
+          </DateTimeTooltip>
+          {resolvedDate && contract.resolutionTime ? (
+            <>
+              {' - '}
+              <DateTimeTooltip time={contract.resolutionTime}>
+                {resolvedDate}
+              </DateTimeTooltip>
+            </>
+          ) : null}
         </div>
         {!resolvedDate && closeTime && (
           <>
             <div className="">•</div>
             <div className="whitespace-nowrap">
               {closeTime > Date.now() ? 'Closes' : 'Closed'}{' '}
-              {dayjs(closeTime).format('MMM D, YYYY')}
+              <DateTimeTooltip time={closeTime}>
+                {dayjs(closeTime).format('MMM D, YYYY')}
+              </DateTimeTooltip>
             </div>
           </>
         )}

web/components/contract-feed.tsx

@@ -32,6 +32,7 @@ import { ResolutionOrChance } from './contract-card'
 import { SiteLink } from './site-link'
 import { Col } from './layout/col'
 import { UserLink } from './user-page'
+import { DateTimeTooltip } from './datetime-tooltip'
 dayjs.extend(relativeTime)
 
 function FeedComment(props: { activityItem: any }) {
@@ -75,12 +76,11 @@ function FeedComment(props: { activityItem: any }) {
 function Timestamp(props: { time: number }) {
   const { time } = props
   return (
-    <span
+    <DateTimeTooltip time={time}>
-      className="whitespace-nowrap text-gray-400 ml-1"
+      <span className="whitespace-nowrap text-gray-400 ml-1">
-      title={dayjs(time).format('MMM D, h:mma')}
+        {dayjs(time).fromNow()}
-    >
+      </span>
-      {dayjs(time).fromNow()}
+    </DateTimeTooltip>
-    </span>
   )
 }
 

web/components/datetime-tooltip.tsx

@@ -0,0 +1,23 @@
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+import advanced from 'dayjs/plugin/advancedFormat'
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.extend(advanced)
+
+export function DateTimeTooltip(props: {
+  time: number
+  children?: React.ReactNode
+}) {
+  const { time } = props
+  return (
+    <span
+      className="tooltip cursor-default"
+      data-tip={dayjs(time).format('MMM DD, YYYY hh:mm a z')}
+    >
+      {props.children}
+    </span>
+  )
+}