Clean up extra wrapper and CSS on BetRow (#178)

web/components/bet-panel.tsx

@@ -303,6 +303,7 @@ function BuyPanel(props: {
     <>
       <YesNoSelector
         className="mb-4"
+        btnClassName="flex-1"
         selected={betChoice}
         onSelect={(choice) => onBetChoice(choice)}
       />

web/components/bet-row.tsx

@@ -15,9 +15,9 @@ import { useSaveShares } from './use-save-shares'
 export default function BetRow(props: {
   contract: FullContract<DPM | CPMM, Binary>
   className?: string
-  labelClassName?: string
+  btnClassName?: string
 }) {
-  const { className, labelClassName, contract } = props
+  const { className, btnClassName, contract } = props
   const [open, setOpen] = useState(false)
   const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(
     undefined
@@ -31,38 +31,34 @@ export default function BetRow(props: {
 
   return (
     <>
-      <Row className={clsx('mt-2 justify-end space-x-3', className)}>
+      <YesNoSelector
-        {/* <div className={clsx('mr-2 text-gray-400', labelClassName)}>
+        className={clsx('mt-2 justify-end', className)}
-          Place a trade
+        btnClassName={clsx('btn-sm w-24', btnClassName)}
-        </div> */}
+        onSelect={(choice) => {
-        <YesNoSelector
+          setOpen(true)
-          btnClassName="btn-sm w-24"
+          setBetChoice(choice)
-          onSelect={(choice) => {
+        }}
-            setOpen(true)
+        replaceNoButton={
-            setBetChoice(choice)
+          yesFloorShares > 0 ? (
-          }}
+            <SellButton
-          replaceNoButton={
+              contract={contract}
-            yesFloorShares > 0 ? (
+              user={user}
-              <SellButton
+              sharesOutcome={'YES'}
-                contract={contract}
+              shares={yesShares}
-                user={user}
+            />
-                sharesOutcome={'YES'}
+          ) : undefined
-                shares={yesShares}
+        }
-              />
+        replaceYesButton={
-            ) : undefined
+          noFloorShares > 0 ? (
-          }
+            <SellButton
-          replaceYesButton={
+              contract={contract}
-            noFloorShares > 0 ? (
+              user={user}
-              <SellButton
+              sharesOutcome={'NO'}
-                contract={contract}
+              shares={noShares}
-                user={user}
+            />
-                sharesOutcome={'NO'}
+          ) : undefined
-                shares={noShares}
+        }
-              />
+      />
-            ) : undefined
-          }
-        />
-      </Row>
       <Modal open={open} setOpen={setOpen}>
         <BetPanelSwitcher
           contract={contract}

web/components/contract/contract-overview.tsx

@@ -53,9 +53,7 @@ export const ContractOverview = (props: {
           <Row className="items-center justify-between gap-4 xl:hidden">
             <BinaryResolutionOrChance contract={contract} />
 
-            {tradingAllowed(contract) && (
+            {tradingAllowed(contract) && <BetRow contract={contract} />}
-              <BetRow contract={contract} labelClassName="hidden" />
-            )}
           </Row>
         ) : (
           outcomeType === 'FREE_RESPONSE' &&

web/components/yes-no-selector.tsx

@@ -22,7 +22,7 @@ export function YesNoSelector(props: {
   } = props
 
   const commonClassNames =
-    'inline-flex flex-1  items-center justify-center rounded-3xl border-2 p-2'
+    'inline-flex items-center justify-center rounded-3xl border-2 p-2'
 
   return (
     <Row className={clsx('space-x-3', className)}>