added buy button

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}

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' &&