Shrink and label bet row

web/components/bet-row.tsx

@@ -5,7 +5,6 @@ import { Contract } from '../lib/firebase/contracts'
 import { BetPanel } from './bet-panel'
 import { Row } from './layout/row'
 import { YesNoSelector } from './yes-no-selector'
-import clsx from 'clsx'
 
 // Inline version of a bet panel. Opens BetPanel in a new modal.
 export default function BetRow(props: {
@@ -19,24 +18,23 @@ export default function BetRow(props: {
 
   return (
     <>
-      <div className={clsx(props.className)}>
-        <Row className="items-center gap-2 justify-center">
-          <YesNoSelector
-            className="w-60"
-            onSelect={(choice) => {
-              setOpen(true)
-              setBetChoice(choice)
-            }}
-          />
-        </Row>
-        <Modal open={open} setOpen={setOpen}>
-          <BetPanel
-            contract={props.contract}
-            title={props.contract.question}
-            selected={betChoice}
-          />
-        </Modal>
-      </div>
+      <Row className="items-center gap-2 justify-end">
+        <div className=" text-gray-400 mr-2">Place a trade</div>
+        <YesNoSelector
+          btnClassName="btn-sm w-20"
+          onSelect={(choice) => {
+            setOpen(true)
+            setBetChoice(choice)
+          }}
+        />
+      </Row>
+      <Modal open={open} setOpen={setOpen}>
+        <BetPanel
+          contract={props.contract}
+          title={props.contract.question}
+          selected={betChoice}
+        />
+      </Modal>
     </>
   )
 }

web/components/contract-feed.tsx

@@ -702,7 +702,7 @@ export function ContractFeed(props: {
         ))}
       </ul>
       {tradingAllowed(contract) && (
-        <BetRow contract={contract} className="-mt-2 -mx-4" />
+        <BetRow contract={contract} className="-mt-4" />
       )}
     </div>
   )

web/components/yes-no-selector.tsx

@@ -8,8 +8,9 @@ export function YesNoSelector(props: {
   selected?: 'YES' | 'NO'
   onSelect: (selected: 'YES' | 'NO') => void
   className?: string
+  btnClassName?: string
 }) {
-  const { selected, onSelect, className } = props
+  const { selected, onSelect, className, btnClassName } = props
 
   return (
     <Row className={clsx('space-x-3', className)}>
@@ -18,7 +19,8 @@ export function YesNoSelector(props: {
           'flex-1 inline-flex justify-center items-center p-2  hover:bg-primary-focus hover:text-white rounded-lg border-primary hover:border-primary-focus border-2',
           selected == 'YES'
             ? 'bg-primary text-white'
-            : 'bg-transparent text-primary'
+            : 'bg-transparent text-primary',
+          btnClassName
         )}
         onClick={() => onSelect('YES')}
       >
@@ -29,7 +31,8 @@ export function YesNoSelector(props: {
           'flex-1 inline-flex justify-center items-center p-2  hover:bg-red-500 hover:text-white rounded-lg border-red-400 hover:border-red-500 border-2',
           selected == 'NO'
             ? 'bg-red-400 text-white'
-            : 'bg-transparent text-red-400'
+            : 'bg-transparent text-red-400',
+          btnClassName
         )}
         onClick={() => onSelect('NO')}
       >