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,12 +31,9 @@ export default function BetRow(props: {
 
   return (
     <>
-      <Row className={clsx('mt-2 justify-end space-x-3', className)}>
-        {/* <div className={clsx('mr-2 text-gray-400', labelClassName)}>
-          Place a trade
-        </div> */}
       <YesNoSelector
-          btnClassName="btn-sm w-24"
+        className={clsx('mt-2 justify-end', className)}
+        btnClassName={clsx('btn-sm w-24', btnClassName)}
         onSelect={(choice) => {
           setOpen(true)
           setBetChoice(choice)
@@ -62,7 +59,6 @@ export default function BetRow(props: {
           ) : 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)}>