Change to white backgrounds for content. Remove page's margin, set individually.

web/components/bet-panel.tsx

@@ -134,11 +134,9 @@ export function BetPanel(props: {
   }
 
   return (
-    <Col
+    <Col className={clsx('bg-white px-8 py-6 rounded-md', className)}>
-      className={clsx('bg-gray-100 shadow-md px-8 py-6 rounded-md', className)}
-    >
       <Title
-        className={clsx('!mt-0', title ? '!text-xl' : '!text-neutral')}
+        className={clsx('!mt-0', title ? '!text-xl' : '')}
         text={panelTitle}
       />
 

web/components/bets-list.tsx

@@ -94,7 +94,7 @@ export function BetsList(props: { user: User }) {
 
   return (
     <Col className="mt-6 gap-6">
-      <Row className="gap-8">
+      <Row className="mx-4 md:mx-0 gap-8">
         <Col>
           <div className="text-sm text-gray-500">Currently invested</div>
           <div>{formatMoney(currentBets)}</div>

web/components/contract-feed.tsx

@@ -673,7 +673,7 @@ export function ContractFeed(props: {
   }
 
   return (
-    <div className="flow-root">
+    <div className="flow-root pr-2 md:pr-0">
       <ul role="list" className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}>
         {items.map((activityItem, activityItemIdx) => (
           <li key={activityItem.id}>

web/components/page.tsx

@@ -1,8 +1,12 @@
 import clsx from 'clsx'
 import { NavBar } from './nav-bar'
 
-export function Page(props: { wide?: boolean; children?: any }) {
+export function Page(props: {
-  const { wide, children } = props
+  wide?: boolean
+  margin?: boolean
+  children?: any
+}) {
+  const { wide, margin, children } = props
 
   return (
     <div>
@@ -10,8 +14,9 @@ export function Page(props: { wide?: boolean; children?: any }) {
 
       <div
         className={clsx(
-          'w-full px-2 pb-8 mx-auto',
+          'w-full mx-auto',
-          wide ? 'max-w-6xl' : 'max-w-4xl'
+          wide ? 'max-w-6xl' : 'max-w-4xl',
+          margin && 'px-4'
         )}
       >
         {children}

web/components/resolution-panel.tsx

@@ -57,10 +57,8 @@ export function ResolutionPanel(props: {
       : 'btn-disabled'
 
   return (
-    <Col
+    <Col className={clsx('bg-white px-8 py-6 rounded-md', className)}>
-      className={clsx('bg-gray-100 shadow-md px-8 py-6 rounded-md', className)}
+      <Title className="mt-0" text="Your market" />
-    >
-      <Title className="mt-0 text-neutral" text="Your market" />
 
       <div className="pt-2 pb-1 text-sm text-gray-500">Resolve outcome</div>
 

web/components/user-page.tsx

@@ -37,7 +37,7 @@ export function UserPage(props: { user: User; currentUser?: User }) {
         url={`/@${user.username}`}
       />
 
-      <Title text={possesive + 'markets'} />
+      <Title className="mx-4 md:mx-0" text={possesive + 'markets'} />
 
       <CreatorContractsList creator={user} />
     </Page>

web/pages/[username]/[contractSlug].tsx

@@ -97,8 +97,8 @@ export default function ContractPage(props: {
         ogCardProps={ogCardProps}
       />
 
-      <Col className="w-full md:flex-row justify-between mt-6">
+      <Col className="w-full md:flex-row justify-between">
-        <div className="flex-[3]">
+        <div className="flex-[3] bg-white px-2 py-6 md:px-6 md:py-8 rounded border-0 border-gray-100">
           <ContractOverview
             contract={contract}
             bets={bets ?? []}
@@ -109,7 +109,7 @@ export default function ContractPage(props: {
 
         {(allowTrade || allowResolve) && (
           <>
-            <div className="md:ml-8" />
+            <div className="md:ml-6" />
 
             <Col className="flex-1">
               {allowTrade && (

web/pages/about.tsx

@@ -5,7 +5,7 @@ import styles from './about.module.css'
 
 export default function About() {
   return (
-    <Page>
+    <Page margin>
       <SEO title="About" description="About" url="/about" />
       <Contents />
     </Page>

web/pages/folds.tsx

@@ -63,7 +63,8 @@ export default function Folds(props: {
   return (
     <Page>
       <Col className="items-center">
-        <Col className="max-w-lg w-full px-2 sm:px-0">
+        <Col className="max-w-lg w-full">
+          <Col className="px-4 sm:px-0">
             <Row className="justify-between items-center">
               <Title text="Explore folds" />
               {user && <CreateFoldButton />}
@@ -73,6 +74,7 @@ export default function Folds(props: {
               Folds are communities on Manifold centered around a collection of
               markets.
             </div>
+          </Col>
 
           <Col className="gap-2">
             {folds.map((fold) => (

web/pages/home.tsx

@@ -87,7 +87,6 @@ const Home = (props: {
     <Page>
       <Col className="items-center">
         <Col className="max-w-3xl">
-          <div className="-mx-2 sm:mx-0">
           <FeedCreate user={user ?? undefined} />
           <Spacer h={4} />
 
@@ -102,7 +101,6 @@ const Home = (props: {
             contractBets={activeContractBets ?? []}
             contractComments={activeContractComments ?? []}
           />
-          </div>
         </Col>
       </Col>
     </Page>

web/pages/index.tsx

@@ -30,9 +30,7 @@ const Home = (props: { hotContracts: Contract[] }) => {
     <Page>
       <Col className="items-center">
         <Col className="max-w-3xl">
-          <div className="-mx-2 sm:mx-0">
           <FeedPromo hotContracts={hotContracts ?? []} />
-          </div>
         </Col>
       </Col>
     </Page>

web/pages/trades.tsx

@@ -10,7 +10,7 @@ export default function TradesPage() {
   return (
     <Page>
       <SEO title="Your trades" description="Your trades" url="/trades" />
-      <Title text="Your trades" />
+      <Title className="mx-4 md:mx-0" text="Your trades" />
       {user && <BetsList user={user} />}
     </Page>
   )