From d3cf8cb3addfb32eccae39d5539cfeacc09e87c9 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Tue, 19 Apr 2022 15:11:34 -0600
Subject: [PATCH] Allow sell button on the same line as bet button

---
 web/components/yes-no-selector.tsx | 62 +++++++++++++++++-------------
 1 file changed, 36 insertions(+), 26 deletions(-)

diff --git a/web/components/yes-no-selector.tsx b/web/components/yes-no-selector.tsx
index d2e7ae41..2d697a0a 100644
--- a/web/components/yes-no-selector.tsx
+++ b/web/components/yes-no-selector.tsx
@@ -9,6 +9,8 @@ export function YesNoSelector(props: {
   onSelect: (selected: 'YES' | 'NO') => void
   className?: string
   btnClassName?: string
+  replaceYesButton?: React.ReactNode
+  replaceNoButton?: React.ReactNode
 }) {
   const { selected, onSelect, className, btnClassName } = props
 
@@ -17,32 +19,40 @@ export function YesNoSelector(props: {
 
   return (
     <Row className={clsx('space-x-3', className)}>
-      <button
-        className={clsx(
-          commonClassNames,
-          'hover:bg-primary-focus border-primary hover:border-primary-focus hover:text-white',
-          selected == 'YES'
-            ? 'bg-primary text-white'
-            : 'text-primary bg-transparent',
-          btnClassName
-        )}
-        onClick={() => onSelect('YES')}
-      >
-        Bet YES
-      </button>
-      <button
-        className={clsx(
-          commonClassNames,
-          'border-red-400 hover:border-red-500 hover:bg-red-500 hover:text-white',
-          selected == 'NO'
-            ? 'bg-red-400 text-white'
-            : 'bg-transparent text-red-400',
-          btnClassName
-        )}
-        onClick={() => onSelect('NO')}
-      >
-        Bet NO
-      </button>
+      {props.replaceYesButton ? (
+        props.replaceYesButton
+      ) : (
+        <button
+          className={clsx(
+            commonClassNames,
+            'hover:bg-primary-focus border-primary hover:border-primary-focus hover:text-white',
+            selected == 'YES'
+              ? 'bg-primary text-white'
+              : 'text-primary bg-transparent',
+            btnClassName
+          )}
+          onClick={() => onSelect('YES')}
+        >
+          Bet YES
+        </button>
+      )}
+      {props.replaceNoButton ? (
+        props.replaceNoButton
+      ) : (
+        <button
+          className={clsx(
+            commonClassNames,
+            'border-red-400 hover:border-red-500 hover:bg-red-500 hover:text-white',
+            selected == 'NO'
+              ? 'bg-red-400 text-white'
+              : 'bg-transparent text-red-400',
+            btnClassName
+          )}
+          onClick={() => onSelect('NO')}
+        >
+          Bet NO
+        </button>
+      )}
     </Row>
   )
 }