Changes based on review comments

web/components/bet-panel.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { Contract } from '../lib/firebase/contracts'
-import { Button } from './button'
 import { Col } from './layout/col'
 import { Spacer } from './layout/spacer'
 import { YesNoSelector } from './yes-no-selector'
@@ -8,7 +7,7 @@ import { YesNoSelector } from './yes-no-selector'
 export function BetPanel(props: { contract: Contract; className?: string }) {
   const { contract, className } = props
 
-  const [betChoice, setBetChoice] = useState<'yes' | 'no'>('yes')
+  const [betChoice, setBetChoice] = useState<'YES' | 'NO'>('YES')
   const [shares, setShares] = useState(0)
 
   return (
@@ -40,13 +39,13 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
 
       <div className="p-2 font-medium">Price</div>
       <div className="px-2">
-        {shares * (betChoice === 'yes' ? 57 : 43)} points
+        {shares * (betChoice === 'YES' ? 57 : 43)} points
       </div>
 
       <Spacer h={6} />
 
       {shares !== 0 && (
-        <Button color={shares ? 'green' : 'deemphasized'}>Place bet</Button>
+        <button className="btn btn-primary">Place bet</button>
       )}
     </Col>
   )

web/components/button.tsx

@@ -1,32 +0,0 @@
-export function Button(props: {
-  className?: string
-  onClick?: () => void
-  color: 'green' | 'red' | 'deemphasized'
-  hideFocusRing?: boolean
-  children?: any
-}) {
-  const { className, onClick, children, color, hideFocusRing } = props
-
-  return (
-    <button
-      type="button"
-      className={classNames(
-        'inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white',
-        !hideFocusRing && 'focus:outline-none focus:ring-2 focus:ring-offset-2',
-        color === 'green' &&
-          'bg-green-500 hover:bg-green-600 focus:ring-green-500',
-        color === 'red' && 'bg-red-500 hover:bg-red-600 focus:ring-red-500',
-        color === 'deemphasized' &&
-          'bg-transparent hover:bg-gray-500 focus:ring-gray-400',
-        className
-      )}
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  )
-}
-
-function classNames(...classes: any[]) {
-  return classes.filter(Boolean).join(' ')
-}

web/components/yes-no-selector.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import { Button } from './button'
 import { Row } from './layout/row'
 
 export function YesNoSelector(props: {
-  selected: 'yes' | 'no'
+  selected: 'YES' | 'NO'
-  onSelect: (selected: 'yes' | 'no') => void
+  onSelect: (selected: 'YES' | 'NO') => void
   yesLabel?: string
   noLabel?: string
   className?: string
@@ -14,17 +13,17 @@ export function YesNoSelector(props: {
   return (
     <Row className={className}>
       <Button
-        color={selected === 'yes' ? 'green' : 'deemphasized'}
+        color={selected === 'YES' ? 'green' : 'deemphasized'}
         hideFocusRing
-        onClick={() => onSelect('yes')}
+        onClick={() => onSelect('YES')}
       >
         {yesLabel ?? 'Yes'}
       </Button>
 
       <Button
-        color={selected === 'no' ? 'red' : 'deemphasized'}
+        color={selected === 'NO' ? 'red' : 'deemphasized'}
         hideFocusRing
-        onClick={() => onSelect('no')}
+        onClick={() => onSelect('NO')}
         className="ml-3"
       >
         {noLabel ?? 'No'}
@@ -32,3 +31,36 @@ export function YesNoSelector(props: {
     </Row>
   )
 }
+
+function Button(props: {
+  className?: string
+  onClick?: () => void
+  color: 'green' | 'red' | 'deemphasized'
+  hideFocusRing?: boolean
+  children?: any
+}) {
+  const { className, onClick, children, color, hideFocusRing } = props
+
+  return (
+    <button
+      type="button"
+      className={classNames(
+        'inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white',
+        !hideFocusRing && 'focus:outline-none focus:ring-2 focus:ring-offset-2',
+        color === 'green' &&
+          'bg-green-500 hover:bg-green-600 focus:ring-green-500',
+        color === 'red' && 'bg-red-500 hover:bg-red-600 focus:ring-red-500',
+        color === 'deemphasized' &&
+          'bg-transparent hover:bg-gray-500 focus:ring-gray-400',
+        className
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  )
+}
+
+function classNames(...classes: any[]) {
+  return classes.filter(Boolean).join(' ')
+}