From 43b0fe67495bf92fb642f5b7f9571f28e36047c4 Mon Sep 17 00:00:00 2001
From: mantikoros <95266179+mantikoros@users.noreply.github.com>
Date: Mon, 6 Jun 2022 09:54:43 -0500
Subject: [PATCH] =?UTF-8?q?Contract=20card=20ui=20tweaks:=20consistent=20m?=
 =?UTF-8?q?arket=20type=20colors,=20no=20underline,=E2=80=A6=20(#402)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* contract card ui tweaks: consistent market type colors, no underline, adjust font/border size

* bigger probabiity numbers in contract card

* revert non-color changes; change prob bar width to 1.5
---
 web/components/contract/quick-bet.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/web/components/contract/quick-bet.tsx b/web/components/contract/quick-bet.tsx
index 1740a6d9..c5633c0a 100644
--- a/web/components/contract/quick-bet.tsx
+++ b/web/components/contract/quick-bet.tsx
@@ -140,6 +140,8 @@ export function QuickBet(props: { contract: Contract; user: User }) {
     }
   }
 
+  const textColor = `text-${getColor(contract, previewProb)}`
+
   return (
     <Col
       className={clsx(
@@ -164,14 +166,14 @@ export function QuickBet(props: { contract: Contract; user: User }) {
           <TriangleFillIcon
             className={clsx(
               'mx-auto h-5 w-5',
-              upHover ? 'text-green-500' : 'text-gray-400'
+              upHover ? textColor : 'text-gray-400'
             )}
           />
         ) : (
           <TriangleFillIcon
             className={clsx(
               'mx-auto h-5 w-5',
-              upHover ? 'text-green-500' : 'text-gray-200'
+              upHover ? textColor : 'text-gray-200'
             )}
           />
         )}
@@ -227,14 +229,14 @@ export function ProbBar(props: { contract: Contract; previewProb?: number }) {
     <>
       <div
         className={clsx(
-          'absolute right-0 top-0 w-2 rounded-tr-md transition-all',
-          'bg-gray-200'
+          'absolute right-0 top-0 w-1.5 rounded-tr-md transition-all',
+          'bg-gray-100'
         )}
         style={{ height: `${100 * (1 - prob)}%` }}
       />
       <div
         className={clsx(
-          'absolute right-0 bottom-0 w-2 rounded-br-md transition-all',
+          'absolute right-0 bottom-0 w-1.5 rounded-br-md transition-all',
           `bg-${color}`,
           // If we're showing the full bar, also round the top
           prob === 1 ? 'rounded-tr-md' : ''
@@ -305,7 +307,6 @@ function getNumericScale(contract: NumericContract) {
 }
 
 export function getColor(contract: Contract, previewProb?: number) {
-  // TODO: Not sure why eg green-400 doesn't work here; try upgrading Tailwind
   // TODO: Try injecting a gradient here
   // return 'primary'
   const { resolution } = contract
@@ -325,7 +326,10 @@ export function getColor(contract: Contract, previewProb?: number) {
     return 'blue-400'
   }
 
-  const marketClosed = (contract.closeTime || Infinity) < Date.now()
-  const prob = previewProb ?? getProb(contract)
-  return marketClosed ? 'gray-400' : prob >= 0.5 ? 'primary' : 'red-400'
+  if ((contract.closeTime ?? Infinity) < Date.now()) {
+    return 'gray-400'
+  }
+
+  // TODO: Not sure why eg green-400 doesn't work here; try upgrading Tailwind
+  return 'primary'
 }