From 3dd7b12e719fc9c6e5fef3f77aabb621f60dab03 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Thu, 17 Feb 2022 18:24:10 -0800
Subject: [PATCH] Iconify contract details; show relative closing time

---
 web/components/contract-card.tsx | 64 ++++++++++++++++++--------------
 1 file changed, 36 insertions(+), 28 deletions(-)

diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx
index 89c4c7ec..105c80f4 100644
--- a/web/components/contract-card.tsx
+++ b/web/components/contract-card.tsx
@@ -13,7 +13,7 @@ import { Col } from './layout/col'
 import dayjs from 'dayjs'
 import { TrendingUpIcon } from '@heroicons/react/solid'
 import { DateTimeTooltip } from './datetime-tooltip'
-import { ClockIcon } from '@heroicons/react/outline'
+import { ClockIcon, DatabaseIcon } from '@heroicons/react/outline'
 import { fromNow } from '../lib/util/time'
 import { Avatar } from './avatar'
 import { Spacer } from './layout/spacer'
@@ -48,7 +48,7 @@ export function ContractCard(props: {
 
         <Row className="justify-between gap-4">
           <p
-            className="font-medium text-indigo-700 break-words"
+            className="break-words font-medium text-indigo-700"
             style={{ /* For iOS safari */ wordBreak: 'break-word' }}
           >
             {question}
@@ -141,17 +141,19 @@ function AbbrContractDetails(props: {
         </Row>
 
         {showHotVolume ? (
-          <div className="whitespace-nowrap">
-            <TrendingUpIcon className="inline h-5 w-5 text-gray-500" />{' '}
-            {formatMoney(volume24Hours)}
-          </div>
+          <Row className="gap-1">
+            <TrendingUpIcon className="h-5 w-5" /> {formatMoney(volume24Hours)}
+          </Row>
         ) : showCloseTime ? (
-          <div className="whitespace-nowrap">
-            <ClockIcon className="-my-1 inline h-5 w-5 text-gray-500" /> Closes{' '}
-            {fromNow(closeTime || 0)}
-          </div>
+          <Row className="gap-1">
+            <ClockIcon className="h-5 w-5" />
+            Closes {fromNow(closeTime || 0)}
+          </Row>
         ) : (
-          <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
+          <Row className="gap-1">
+            {/* <DatabaseIcon className="h-5 w-5" /> */}
+            {formatMoney(truePool)} pool
+          </Row>
         )}
       </Row>
     </Col>
@@ -165,20 +167,23 @@ export function ContractDetails(props: { contract: Contract }) {
 
   return (
     <Col className="gap-2 text-sm text-gray-500 sm:flex-row sm:flex-wrap">
-      <Row className="flex-wrap items-center gap-2">
-        <Avatar
-          username={creatorUsername}
-          avatarUrl={contract.creatorAvatarUrl}
-          size={6}
-        />
-        <UserLink
-          className="whitespace-nowrap"
-          name={creatorName}
-          username={creatorUsername}
-        />
-        <div className="">•</div>
+      <Row className="flex-wrap items-center gap-x-4 gap-y-2">
+        <Row className="items-center gap-2">
+          <Avatar
+            username={creatorUsername}
+            avatarUrl={contract.creatorAvatarUrl}
+            size={6}
+          />
+          <UserLink
+            className="whitespace-nowrap"
+            name={creatorName}
+            username={creatorUsername}
+          />
+        </Row>
+
+        <Row className="items-center gap-1">
+          <ClockIcon className="h-5 w-5" />
 
-        <div className="whitespace-nowrap">
           <DateTimeTooltip text="Market created:" time={contract.createdTime}>
             {createdDate}
           </DateTimeTooltip>
@@ -204,14 +209,17 @@ export function ContractDetails(props: { contract: Contract }) {
                 }
                 time={closeTime}
               >
-                {dayjs(closeTime).format('MMM D, YYYY')}
+                {dayjs(closeTime).format('MMM D')} ({fromNow(closeTime)})
               </DateTimeTooltip>
             </>
           )}
-        </div>
+        </Row>
 
-        <div className="">•</div>
-        <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
+        <Row className="items-center gap-1">
+          <DatabaseIcon className="h-5 w-5" />
+
+          <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
+        </Row>
       </Row>
     </Col>
   )