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,10 +18,10 @@ export default function BetRow(props: {
 
   return (
     <>
-      <div className={clsx(props.className)}>
-        <Row className="items-center gap-2 justify-center">
+      <Row className="items-center gap-2 justify-end">
+        <div className=" text-gray-400 mr-2">Place a trade</div>
         <YesNoSelector
-            className="w-60"
+          btnClassName="btn-sm w-20"
           onSelect={(choice) => {
             setOpen(true)
             setBetChoice(choice)
@@ -36,7 +35,6 @@ export default function BetRow(props: {
           selected={betChoice}
         />
       </Modal>
-      </div>
     </>
   )
 }

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')}
       >