From 9ce82b1b6f02c76abd91e288a3ca4c3d4b7aaf3d Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 20 Apr 2022 23:03:16 -0700
Subject: [PATCH] Show "New" badge on contract cards too

---
 web/components/contract/contract-details.tsx | 11 ++++++-----
 web/components/feed/feed-items.tsx           | 20 ++++----------------
 web/components/new-contract-badge.tsx        |  9 +++++++++
 3 files changed, 19 insertions(+), 21 deletions(-)
 create mode 100644 web/components/new-contract-badge.tsx

diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index 83c3c25a..8cc27496 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -18,6 +18,7 @@ import { Avatar } from '../avatar'
 import { useState } from 'react'
 import { ContractInfoDialog } from './contract-info-dialog'
 import { Bet } from '../../../common/bet'
+import NewContractBadge from '../new-contract-badge'
 
 export function AbbrContractDetails(props: {
   contract: Contract
@@ -25,7 +26,8 @@ export function AbbrContractDetails(props: {
   showCloseTime?: boolean
 }) {
   const { contract, showHotVolume, showCloseTime } = props
-  const { volume24Hours, creatorName, creatorUsername, closeTime } = contract
+  const { volume, volume24Hours, creatorName, creatorUsername, closeTime } =
+    contract
   const { volumeLabel } = contractMetrics(contract)
 
   return (
@@ -54,11 +56,10 @@ export function AbbrContractDetails(props: {
             {(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
             {fromNow(closeTime || 0)}
           </Row>
+        ) : volume > 0 ? (
+          <Row>{volumeLabel}</Row>
         ) : (
-          <Row className="gap-1">
-            {/* <DatabaseIcon className="h-5 w-5" /> */}
-            {volumeLabel}
-          </Row>
+          <NewContractBadge />
         )}
       </Row>
     </Col>
diff --git a/web/components/feed/feed-items.tsx b/web/components/feed/feed-items.tsx
index 2200bbbb..33fb0912 100644
--- a/web/components/feed/feed-items.tsx
+++ b/web/components/feed/feed-items.tsx
@@ -48,6 +48,7 @@ import { User } from '../../../common/user'
 import { Modal } from '../layout/modal'
 import { trackClick } from '../../lib/firebase/tracking'
 import { DAY_MS } from '../../../common/util/time'
+import NewContractBadge from '../new-contract-badge'
 
 export function FeedItems(props: {
   contract: Contract
@@ -313,7 +314,6 @@ export function FeedQuestion(props: {
     creatorName,
     creatorUsername,
     question,
-    resolution,
     outcomeType,
     volume,
     createdTime,
@@ -322,15 +322,6 @@ export function FeedQuestion(props: {
   const isBinary = outcomeType === 'BINARY'
   const isNew = createdTime > Date.now() - DAY_MS
 
-  // const closeMessage =
-  //   contract.isResolved || !contract.closeTime ? null : (
-  //     <>
-  //       <span className="mx-2">•</span>
-  //       {contract.closeTime > Date.now() ? 'Closes' : 'Closed'}
-  //       <RelativeTimestamp time={contract.closeTime || 0} />
-  //     </>
-  //   )
-
   return (
     <>
       <Avatar
@@ -346,15 +337,12 @@ export function FeedQuestion(props: {
           />{' '}
           asked
           {/* Currently hidden on mobile; ideally we'd fit this in somewhere. */}
-          <div className="relative -top-2 float-right text-gray-400">
+          <div className="relative -top-2 float-right ">
             {isNew || volume === 0 ? (
-              <Row className="gap-1">
-                <SparklesIcon className="h-5 w-5" aria-hidden="true" /> New
-              </Row>
+              <NewContractBadge />
             ) : (
-              <span className="hidden sm:inline">
+              <span className="hidden text-gray-400 sm:inline">
                 {volumeLabel}
-                {/* {closeMessage} */}
               </span>
             )}
           </div>
diff --git a/web/components/new-contract-badge.tsx b/web/components/new-contract-badge.tsx
new file mode 100644
index 00000000..3cd47eab
--- /dev/null
+++ b/web/components/new-contract-badge.tsx
@@ -0,0 +1,9 @@
+import { SparklesIcon } from '@heroicons/react/solid'
+
+export default function NewContractBadge() {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full bg-blue-100 px-3  py-0.5 text-sm font-medium text-blue-800">
+      <SparklesIcon className="h-4 w-4" aria-hidden="true" /> New
+    </span>
+  )
+}