From d32147b53633befa7fbac6261b83d4ddab77c850 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Sun, 16 Jan 2022 04:16:15 -0500
Subject: [PATCH] Show DateTime tooltips whereever we show dates

---
 web/components/contract-card.tsx    | 17 +++++++++++++++--
 web/components/contract-feed.tsx    | 12 ++++++------
 web/components/datetime-tooltip.tsx | 23 +++++++++++++++++++++++
 3 files changed, 44 insertions(+), 8 deletions(-)
 create mode 100644 web/components/datetime-tooltip.tsx

diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx
index 3e39d1c7..d40089d7 100644
--- a/web/components/contract-card.tsx
+++ b/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>
           </>
         )}
diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx
index c74efbb2..4a25e4c6 100644
--- a/web/components/contract-feed.tsx
+++ b/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
-      className="whitespace-nowrap text-gray-400 ml-1"
-      title={dayjs(time).format('MMM D, h:mma')}
-    >
-      {dayjs(time).fromNow()}
-    </span>
+    <DateTimeTooltip time={time}>
+      <span className="whitespace-nowrap text-gray-400 ml-1">
+        {dayjs(time).fromNow()}
+      </span>
+    </DateTimeTooltip>
   )
 }
 
diff --git a/web/components/datetime-tooltip.tsx b/web/components/datetime-tooltip.tsx
new file mode 100644
index 00000000..522d4da1
--- /dev/null
+++ b/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>
+  )
+}