Add background to bet panel

web/components/bet-panel.tsx

@@ -5,16 +5,14 @@ import { Col } from './layout/col'
 import { Spacer } from './layout/spacer'
 import { YesNoSelector } from './yes-no-selector'
 
-export function BetPanel(props: { contract: Contract }) {
+export function BetPanel(props: { contract: Contract; className?: string }) {
-  const { contract } = props
+  const { contract, className } = props
 
   const [betChoice, setBetChoice] = useState<'yes' | 'no'>('yes')
   const [shares, setShares] = useState(0)
 
   return (
-    <Col>
+    <Col className={'bg-gray-600 p-6 rounded ' + className}>
-      <Spacer h={12} />
-
       <div className="p-2 font-medium">Pick outcome</div>
       <YesNoSelector
         className="p-2"

web/components/button.tsx

@@ -17,7 +17,7 @@ export function Button(props: {
           '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-600 focus:ring-gray-400',
+          'bg-transparent hover:bg-gray-500 focus:ring-gray-400',
         className
       )}
       onClick={onClick}

web/pages/contract/[contractId].tsx

@@ -28,7 +28,7 @@ export default function ContractPage() {
         <Row className="justify-between">
           <ContractOverview contract={contract} />
 
-          <BetPanel contract={contract} />
+          <BetPanel className="self-start" contract={contract} />
         </Row>
       </div>
     </div>