From 94487f0a04dab39ae0be9f91b04c9f664e717fe5 Mon Sep 17 00:00:00 2001
From: ingawei <ingawei@gmail.com>
Date: Tue, 4 Oct 2022 15:25:44 -0700
Subject: [PATCH] added buy button

---
 web/components/answers/answers-panel.tsx | 17 +++++++++++++----
 web/components/button.tsx                |  3 +++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/web/components/answers/answers-panel.tsx b/web/components/answers/answers-panel.tsx
index 32236bfa..4ac14b9f 100644
--- a/web/components/answers/answers-panel.tsx
+++ b/web/components/answers/answers-panel.tsx
@@ -210,12 +210,11 @@ function OpenAnswer(props: {
         className={clsx(
           'bg-greyscale-1 relative w-full rounded-lg transition-all',
           tradingAllowed(contract)
-            ? 'text-greyscale-7 drop-shadow-sm hover:drop-shadow-md'
+            ? 'text-greyscale-7'
             : 'text-greyscale-5 pointer-events-none'
         )}
-        onClick={() => setOpen(true)}
       >
-        <Row className="z-20 -mb-1 justify-between py-2 px-3">
+        <Row className="z-20 -mb-1 justify-between gap-2 py-2 px-3">
           <div>
             <span>
               <Avatar
@@ -229,7 +228,17 @@ function OpenAnswer(props: {
               text={text}
             />
           </div>
-          <div className="my-auto text-xl">{probPercent}</div>
+          <Row className="gap-2">
+            <div className="my-auto text-xl">{probPercent}</div>
+            <Button
+              size="2xs"
+              color="gray-outline"
+              onClick={() => setOpen(true)}
+              className="my-auto"
+            >
+              BUY
+            </Button>
+          </Row>
         </Row>
         <hr
           color={color}
diff --git a/web/components/button.tsx b/web/components/button.tsx
index 90e087c8..57c0bb4b 100644
--- a/web/components/button.tsx
+++ b/web/components/button.tsx
@@ -10,6 +10,7 @@ export type ColorType =
   | 'indigo'
   | 'yellow'
   | 'gray'
+  | 'gray-outline'
   | 'gradient'
   | 'gray-white'
   | 'highlight-blue'
@@ -63,6 +64,8 @@ export function Button(props: {
           'disabled:bg-greyscale-2 bg-indigo-500 text-white hover:bg-indigo-600',
         color === 'gray' &&
           'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
+        color === 'gray-outline' &&
+          'border-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 border-2 hover:text-white disabled:opacity-50',
         color === 'gradient' &&
           'disabled:bg-greyscale-2 border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
         color === 'gray-white' &&