No gray background for add answer & resolve panel. Tweak spacing

web/components/answers/answer-resolve-panel.tsx

@@ -71,7 +71,7 @@ export function AnswerResolvePanel(props: {
       : 'btn-disabled'
 
   return (
-    <Col className="gap-4 rounded bg-gray-50 p-4">
+    <Col className="gap-4 rounded">
       <div>Resolve your market</div>
       <Col className="gap-4 sm:flex-row sm:items-center">
         <ChooseCancelSelector

web/components/answers/answers-panel.tsx

@@ -10,6 +10,7 @@ import { tradingAllowed } from '../../lib/firebase/contracts'
 import { AnswerItem } from './answer-item'
 import { CreateAnswerPanel } from './create-answer-panel'
 import { AnswerResolvePanel } from './answer-resolve-panel'
+import { Spacer } from '../layout/spacer'
 
 export function AnswersPanel(props: {
   contract: FullContract<DPM, FreeResponse>
@@ -105,12 +106,15 @@ export function AnswersPanel(props: {
       )}
 
       {user?.id === creatorId && !resolution && (
-        <AnswerResolvePanel
+        <>
-          contract={contract}
+          <Spacer h={2} />
-          resolveOption={resolveOption}
+          <AnswerResolvePanel
-          setResolveOption={setResolveOption}
+            contract={contract}
-          chosenAnswers={chosenAnswers}
+            resolveOption={resolveOption}
-        />
+            setResolveOption={setResolveOption}
+            chosenAnswers={chosenAnswers}
+          />
+        </>
       )}
     </Col>
   )

web/components/answers/create-answer-panel.tsx

@@ -75,7 +75,7 @@ export function CreateAnswerPanel(props: {
   const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
 
   return (
-    <Col className="gap-4 rounded bg-gray-50 p-4">
+    <Col className="gap-4 rounded">
       <Col className="flex-1 gap-2">
         <div className="mb-1">Add your answer</div>
         <Textarea

web/components/contract/contract-overview.tsx

@@ -18,10 +18,9 @@ export const ContractOverview = (props: {
   contract: Contract
   bets: Bet[]
   comments: Comment[]
-  children?: any
   className?: string
 }) => {
-  const { contract, bets, comments, children, className } = props
+  const { contract, bets, comments, className } = props
   const { question, resolution, creatorId, outcomeType } = contract
 
   const user = useUser()
@@ -80,12 +79,6 @@ export const ContractOverview = (props: {
         contract={contract}
         isCreator={isCreator}
       />
-
-      <Spacer h={4} />
-
-      {children}
-
-      <Spacer h={4} />
     </Col>
   )
 }