From 9240cd3d1c533402f0431d7ca5fb78bc8781c6d0 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Wed, 13 Jul 2022 18:23:03 -0500
Subject: [PATCH] Bet panel: Quick vs Limit pill buttons. Also, pill buttons
 for Yes vs No.

---
 web/components/bet-panel.tsx           | 67 +++++++++++++++++---------
 web/components/buttons/pill-button.tsx | 27 +++++++++++
 web/components/yes-no-selector.tsx     | 62 ------------------------
 3 files changed, 71 insertions(+), 85 deletions(-)
 create mode 100644 web/components/buttons/pill-button.tsx

diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index c8356a06..bd2bfebb 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -8,7 +8,6 @@ import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
 import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
-import { YesNoSelector } from './yes-no-selector'
 import {
   formatMoney,
   formatMoneyWithDecimals,
@@ -41,6 +40,7 @@ import { removeUndefinedProps } from 'common/util/object'
 import { useUnfilledBets } from 'web/hooks/use-bets'
 import { LimitBets } from './limit-bets'
 import { BucketInput } from './bucket-input'
+import { PillButton } from './buttons/pill-button'
 
 export function BetPanel(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
@@ -54,10 +54,6 @@ export function BetPanel(props: {
   const { sharesOutcome } = useSaveBinaryShares(contract, userBets)
 
   const [isLimitOrder, setIsLimitOrder] = useState(false)
-  const toggleLimitOrder = () => {
-    setIsLimitOrder(!isLimitOrder)
-    track('toggle limit order')
-  }
 
   const showLimitOrders =
     (isLimitOrder && unfilledBets.length > 0) || yourUnfilledBets.length > 0
@@ -71,21 +67,33 @@ export function BetPanel(props: {
       />
       <Col
         className={clsx(
-          'relative rounded-b-md bg-white px-8 py-6',
+          'relative rounded-b-md bg-white px-6 py-6',
           !sharesOutcome && 'rounded-t-md',
           className
         )}
       >
-        <Row className="align-center justify-between">
-          <div className="mb-6 text-2xl">
-            {isLimitOrder ? <>Limit order</> : <>Place your bet</>}
-          </div>
-          <button
-            className="btn btn-ghost btn-sm text-sm normal-case"
-            onClick={toggleLimitOrder}
-          >
-            <SwitchHorizontalIcon className="inline h-6 w-6" />
-          </button>
+        <Row className="align-center mb-4 justify-between">
+          <div className="text-4xl">Bet</div>
+          <Row className="mt-2 items-center gap-2">
+            <PillButton
+              selected={!isLimitOrder}
+              onSelect={() => {
+                setIsLimitOrder(false)
+                track('select quick order')
+              }}
+            >
+              Quick
+            </PillButton>
+            <PillButton
+              selected={isLimitOrder}
+              onSelect={() => {
+                setIsLimitOrder(true)
+                track('select limit order')
+              }}
+            >
+              Limit
+            </PillButton>
+          </Row>
         </Row>
 
         <BuyPanel
@@ -287,13 +295,26 @@ function BuyPanel(props: {
 
   return (
     <>
-      <YesNoSelector
-        className="mb-4"
-        btnClassName="flex-1"
-        selected={betChoice}
-        onSelect={(choice) => onBetChoice(choice)}
-        isPseudoNumeric={isPseudoNumeric}
-      />
+      <div className="my-3 text-left text-sm text-gray-500">Direction</div>
+      <Row className="mb-4 items-center gap-2">
+        <PillButton
+          selected={betChoice === 'YES'}
+          onSelect={() => onBetChoice('YES')}
+          big
+          color="bg-primary"
+        >
+          {isPseudoNumeric ? 'Higher' : 'Yes'}
+        </PillButton>
+        <PillButton
+          selected={betChoice === 'NO'}
+          onSelect={() => onBetChoice('NO')}
+          big
+          color="bg-red-400"
+        >
+          {isPseudoNumeric ? 'Lower' : 'No'}
+        </PillButton>
+      </Row>
+
       <div className="my-3 text-left text-sm text-gray-500">Amount</div>
       <BuyAmountInput
         inputClassName="w-full max-w-none"
diff --git a/web/components/buttons/pill-button.tsx b/web/components/buttons/pill-button.tsx
new file mode 100644
index 00000000..796036d1
--- /dev/null
+++ b/web/components/buttons/pill-button.tsx
@@ -0,0 +1,27 @@
+import clsx from 'clsx'
+import { ReactNode } from 'react'
+
+export function PillButton(props: {
+  selected: boolean
+  onSelect: () => void
+  color?: string
+  big?: boolean
+  children: ReactNode
+}) {
+  const { children, selected, onSelect, color, big } = props
+
+  return (
+    <button
+      className={clsx(
+        'cursor-pointer select-none rounded-full',
+        selected
+          ? ['text-white', color ?? 'bg-gray-700']
+          : 'bg-gray-100 hover:bg-gray-200',
+        big ? 'px-8 py-2' : 'px-3 py-1.5 text-sm'
+      )}
+      onClick={onSelect}
+    >
+      {children}
+    </button>
+  )
+}
diff --git a/web/components/yes-no-selector.tsx b/web/components/yes-no-selector.tsx
index 3b3cc21d..dda97c0c 100644
--- a/web/components/yes-no-selector.tsx
+++ b/web/components/yes-no-selector.tsx
@@ -5,68 +5,6 @@ import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { resolution } from 'common/contract'
 
-export function YesNoSelector(props: {
-  selected?: 'YES' | 'NO'
-  onSelect: (selected: 'YES' | 'NO') => void
-  className?: string
-  btnClassName?: string
-  replaceYesButton?: React.ReactNode
-  replaceNoButton?: React.ReactNode
-  isPseudoNumeric?: boolean
-}) {
-  const {
-    selected,
-    onSelect,
-    className,
-    btnClassName,
-    replaceNoButton,
-    replaceYesButton,
-    isPseudoNumeric,
-  } = props
-
-  const commonClassNames =
-    'inline-flex items-center justify-center rounded-3xl border-2 p-2'
-
-  return (
-    <Row className={clsx('space-x-3', className)}>
-      {replaceYesButton ? (
-        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')}
-        >
-          {isPseudoNumeric ? 'HIGHER' : 'YES'}
-        </button>
-      )}
-      {replaceNoButton ? (
-        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')}
-        >
-          {isPseudoNumeric ? 'LOWER' : 'NO'}
-        </button>
-      )}
-    </Row>
-  )
-}
-
 export function YesNoCancelSelector(props: {
   selected: resolution | undefined
   onSelect: (selected: resolution) => void