Standardize spacing across pages.

web/components/bet-panel.tsx

@@ -96,10 +96,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
 
   return (
     <Col
-      className={clsx(
-        'bg-gray-100 shadow-xl px-8 py-6 rounded-md w-full md:w-auto',
-        className
-      )}
+      className={clsx('bg-gray-100 shadow-xl px-8 py-6 rounded-md', className)}
     >
       <Title className="!mt-0 whitespace-nowrap" text="Place a bet" />
 

web/components/bets-list.tsx

@@ -114,7 +114,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
     >
       <Row className="flex-wrap gap-4">
         <Col className="flex-[2] gap-1">
-          <div>
+          <Row>
             <Link href={path(contract)}>
               <a
                 className="font-medium text-indigo-700 hover:underline hover:decoration-indigo-400 hover:decoration-2"
@@ -123,7 +123,13 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
                 {contract.question}
               </a>
             </Link>
-          </div>
+
+            {/* Show carrot for collapsing. Hack the positioning. */}
+            <div
+              className="collapse-title flex-1 p-0 pr-8 relative w-0 h-0 min-h-0"
+              style={{ top: -10, right: -20 }}
+            />
+          </Row>
 
           <Row className="gap-2 text-gray-500 text-sm">
             <div>
@@ -140,19 +146,11 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
           </Row>
         </Col>
 
-        <Row className="flex-nowrap">
-          <MyBetsSummary
-            className="flex-1 justify-end"
-            contract={contract}
-            bets={bets}
-          />
-
-          {/* Show carrot for collapsing. Hack the positioning. */}
-          <div
-            className="collapse-title p-0 pr-8 relative w-0 h-0 min-h-0"
-            style={{ top: -10, right: -20 }}
-          />
-        </Row>
+        <MyBetsSummary
+          className="flex-1 justify-end"
+          contract={contract}
+          bets={bets}
+        />
       </Row>
 
       <div className="collapse-content" style={{ backgroundColor: 'white' }}>

web/components/contract-overview.tsx

@@ -145,7 +145,7 @@ export const ContractOverview = (props: {
     <Col className={className}>
       <Col className="justify-between md:flex-row">
         <Col>
-          <div className="text-3xl text-indigo-700 mt-2 mb-4">
+          <div className="text-3xl text-indigo-700 mb-4">
             {contract.question}
           </div>
 
@@ -153,12 +153,12 @@ export const ContractOverview = (props: {
         </Col>
 
         {resolution ? (
-          <Col className="text-4xl mt-4 md:mt-2 md:ml-4 md:mr-6 items-end self-center md:self-start">
+          <Col className="text-4xl mt-8 md:mt-0 md:ml-4 md:mr-6 items-end self-center md:self-start">
             <div className="text-xl text-gray-500">Resolved</div>
             <div className={resolutionColor}>{resolution}</div>
           </Col>
         ) : (
-          <Col className="text-4xl mt-4 md:mt-2 md:ml-4 md:mr-6 text-primary items-end self-center md:self-start">
+          <Col className="text-4xl mt-8 md:mt-0 md:ml-4 md:mr-6 text-primary items-end self-center md:self-start">
             {probPercent}
             <div className="text-xl">chance</div>
           </Col>

web/components/contracts-list.tsx

@@ -57,7 +57,7 @@ function ContractCard(props: { contract: Contract }) {
         <li className="col-span-1 bg-white hover:bg-gray-100 shadow-xl rounded-lg divide-y divide-gray-200">
           <div className="card">
             <div className="card-body p-6">
-              <Row className="justify-between gap-2 mb-2">
+              <Row className="justify-between gap-4 mb-2">
                 <p className="font-medium text-indigo-700">
                   {contract.question}
                 </p>
@@ -88,7 +88,7 @@ function ContractsGrid(props: { contracts: Contract[] }) {
 
   if (contracts.length === 0) {
     return (
-      <p>
+      <p className="mx-4">
         No markets found. Would you like to{' '}
         <Link href="/create">
           <a className="text-green-500 hover:underline hover:decoration-2">
@@ -105,7 +105,6 @@ function ContractsGrid(props: { contracts: Contract[] }) {
       {contracts.map((contract) => (
         <ContractCard contract={contract} key={contract.id} />
       ))}
-      {/* TODO: Show placeholder if empty */}
     </ul>
   )
 }

web/components/header.tsx

@@ -53,7 +53,7 @@ function SignedInHeaders(props: { user: User; themeClasses?: string }) {
       <Link href="/create">
         <a
           className={clsx(
-            'text-base font-medium hidden md:block',
+            'text-base font-medium hidden md:block whitespace-nowrap',
             themeClasses
           )}
         >
@@ -64,7 +64,7 @@ function SignedInHeaders(props: { user: User; themeClasses?: string }) {
       <Link href="/bets">
         <a
           className={clsx(
-            'text-base font-medium hidden md:block',
+            'text-base font-medium hidden md:block whitespace-nowrap',
             themeClasses
           )}
         >
@@ -111,7 +111,7 @@ export function Header(props: { darkBackground?: boolean; children?: any }) {
 
   return (
     <nav
-      className="max-w-7xl w-full flex flex-row justify-between md:justify-start mx-auto pt-5 px-4 sm:px-6"
+      className="max-w-7xl w-full flex flex-row justify-between md:justify-start pt-5 pb-4"
       aria-label="Global"
     >
       <Link href="/">

web/components/resolution-panel.tsx

@@ -28,8 +28,10 @@ export function ResolutionPanel(props: {
   const resolve = async () => {
     setIsSubmitting(true)
 
-    const result = await resolveMarket({ outcome, contractId: contract.id })
-      .then(r => r.data as any)
+    const result = await resolveMarket({
+      outcome,
+      contractId: contract.id,
+    }).then((r) => r.data as any)
 
     console.log('resolved', outcome, 'result:', result)
 
@@ -43,17 +45,14 @@ export function ResolutionPanel(props: {
     outcome === 'YES'
       ? 'btn-primary'
       : outcome === 'NO'
-        ? 'bg-red-400 hover:bg-red-500'
-        : outcome === 'CANCEL'
-          ? 'bg-yellow-400 hover:bg-yellow-500'
-          : 'btn-disabled'
+      ? 'bg-red-400 hover:bg-red-500'
+      : outcome === 'CANCEL'
+      ? 'bg-yellow-400 hover:bg-yellow-500'
+      : 'btn-disabled'
 
   return (
     <Col
-      className={clsx(
-        'bg-gray-100 shadow-xl px-8 py-6 rounded-md w-full md:w-auto',
-        className
-      )}
+      className={clsx('bg-gray-100 shadow-xl px-8 py-6 rounded-md', className)}
     >
       <Title className="mt-0" text="Your market" />
 
@@ -68,7 +67,6 @@ export function ResolutionPanel(props: {
 
       <Spacer h={3} />
 
-
       <div>
         {outcome === 'YES' ? (
           <>
@@ -87,12 +85,9 @@ export function ResolutionPanel(props: {
         )}
       </div>
 
-
       <Spacer h={3} />
 
-      {!!error &&
-        <div className='text-red-500'>{error}</div>
-      }
+      {!!error && <div className="text-red-500">{error}</div>}
 
       <ConfirmationButton
         id="resolution-modal"

web/components/title.tsx

@@ -5,7 +5,7 @@ export function Title(props: { text: string; className?: string }) {
   return (
     <h1
       className={clsx(
-        'text-3xl font-major-mono text-indigo-700 inline-block mt-6 mb-4',
+        'text-3xl font-major-mono text-indigo-700 inline-block my-6',
         className
       )}
     >

web/components/user-page.tsx

@@ -29,7 +29,7 @@ export function UserLink(props: { username: string; className?: string }) {
 function UserCard(props: { user: User; showPrivateInfo?: boolean }) {
   const { user, showPrivateInfo } = props
   return (
-    <Row className="card glass lg:card-side shadow-xl hover:shadow-xl text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-auto my-12">
+    <Row className="card glass lg:card-side shadow-xl hover:shadow-xl text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm my-12">
       <div className="p-4">
         {user?.avatarUrl && (
           <img
@@ -70,7 +70,7 @@ export function UserPage(props: { user: User; currentUser?: User }) {
   const possesive = isCurrentUser ? 'Your ' : `${user.username}'s `
 
   return (
-    <div>
+    <div className="max-w-4xl px-4 pb-8 mx-auto">
       <SEO
         title={possesive + 'markets'}
         description={possesive + 'markets'}
@@ -79,15 +79,11 @@ export function UserPage(props: { user: User; currentUser?: User }) {
 
       <Header />
 
-      <div className="max-w-4xl pt-8 pb-0 sm:pb-8 mx-auto">
-        <div>
-          <UserCard user={user} showPrivateInfo={isCurrentUser} />
+      <UserCard user={user} showPrivateInfo={isCurrentUser} />
 
-          <Title text={possesive + 'markets'} />
+      <Title text={possesive + 'markets'} />
 
-          <ContractsList creator={user} />
-        </div>
-      </div>
+      <ContractsList creator={user} />
     </div>
   )
 }

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

@@ -52,7 +52,12 @@ export default function ContractPage(props: {
   const isCreator = user?.id === creatorId
 
   return (
-    <Col className="max-w-7xl mx-auto sm:px-6 lg:px-8">
+    <Col
+      className={clsx(
+        'px-4 pb-8 mx-auto',
+        isResolved ? 'max-w-4xl' : 'max-w-7xl'
+      )}
+    >
       <SEO
         title={contract.question}
         description={contract.description}
@@ -61,22 +66,17 @@ export default function ContractPage(props: {
 
       <Header />
 
-      <Col
-        className={clsx(
-          'w-full items-start md:flex-row mt-4',
-          isResolved ? 'md:justify-center' : 'md:justify-between'
-        )}
-      >
-        <div className="max-w-4xl w-full ">
-          <ContractOverview contract={contract} className="p-4" />
+      <Col className="w-full md:flex-row justify-between mt-6">
+        <div className="flex-[3]">
+          <ContractOverview contract={contract} />
           <BetsSection contract={contract} user={user ?? null} />
         </div>
 
         {!isResolved && (
           <>
-            <div className="mt-12 md:mt-0 md:ml-8" />
+            <div className="md:ml-8" />
 
-            <Col className="w-full sm:w-auto">
+            <Col className="flex-1">
               <BetPanel contract={contract} />
 
               {isCreator && user && (
@@ -104,12 +104,13 @@ function BetsSection(props: { contract: Contract; user: User | null }) {
   if (!userBets || userBets.length === 0) return <></>
 
   return (
-    <div className="p-4">
+    <div>
+      <Spacer h={6} />
       <Title text="Your bets" />
       <MyBetsSummary contract={contract} bets={userBets} />
       <Spacer h={6} />
       <ContractBetsTable contract={contract} bets={userBets} />
-      <Spacer h={6} />
+      <Spacer h={12} />
     </div>
   )
 }

web/pages/account.tsx

@@ -5,7 +5,7 @@ import { firebaseLogin } from '../lib/firebase/users'
 
 function SignInCard() {
   return (
-    <div className="card glass lg:card-side shadow-xl hover:shadow-xl text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-auto my-12">
+    <div className="card glass sm:card-side shadow-xl hover:shadow-xl text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-4 sm:mx-auto my-12">
       <div className="p-4">
         <img
           src="/logo-icon-white-bg.png"

web/pages/bets.tsx

@@ -8,17 +8,11 @@ export default function BetsPage() {
   const user = useUser()
 
   return (
-    <div>
+    <div className="max-w-4xl px-4 pb-8 mx-auto">
       <SEO title="Your bets" description="Your bets" url="/bets" />
-
       <Header />
-
-      <div className="max-w-4xl pt-8 pb-0 sm:pb-8 mx-auto">
-        <div>
-          <Title text="Your bets" />
-          {user && <BetsList user={user} />}
-        </div>
-      </div>
+      <Title text="Your bets" />
+      {user && <BetsList user={user} />}
     </div>
   )
 }

web/pages/create.tsx

@@ -42,88 +42,86 @@ export default function NewContract() {
   if (!creator) return <></>
 
   return (
-    <div>
+    <div className="max-w-4xl px-4 pb-8 mx-auto">
       <Header />
 
-      <div className="max-w-4xl py-12 lg:mx-auto px-4">
-        <Title text="Create a new prediction market" />
+      <Title text="Create a new prediction market" />
 
-        <div className="w-full bg-gray-100 rounded-lg shadow-xl px-6 py-4">
-          {/* Create a Tailwind form that takes in all the fields needed for a new contract */}
-          {/* When the form is submitted, create a new contract in the database */}
-          <form>
-            <div className="form-control">
-              <label className="label">
-                <span className="label-text">Question</span>
-              </label>
+      <div className="w-full bg-gray-100 rounded-lg shadow-xl px-6 py-4">
+        {/* Create a Tailwind form that takes in all the fields needed for a new contract */}
+        {/* When the form is submitted, create a new contract in the database */}
+        <form>
+          <div className="form-control">
+            <label className="label">
+              <span className="label-text">Question</span>
+            </label>
 
-              <input
-                type="text"
-                placeholder="e.g. Will the FDA approve Paxlovid before Jun 2nd, 2022?"
-                className="input"
-                value={question}
-                onChange={(e) => setQuestion(e.target.value || '')}
-              />
-            </div>
+            <input
+              type="text"
+              placeholder="e.g. Will the FDA approve Paxlovid before Jun 2nd, 2022?"
+              className="input"
+              value={question}
+              onChange={(e) => setQuestion(e.target.value || '')}
+            />
+          </div>
 
-            <Spacer h={4} />
+          <Spacer h={4} />
 
-            <div className="form-control">
-              <label className="label">
-                <span className="label-text">Description (optional)</span>
-              </label>
+          <div className="form-control">
+            <label className="label">
+              <span className="label-text">Description (optional)</span>
+            </label>
 
-              <textarea
-                className="textarea h-24 textarea-bordered"
-                placeholder={descriptionPlaceholder}
-                value={description}
-                onChange={(e) => setDescription(e.target.value || '')}
-              ></textarea>
-            </div>
+            <textarea
+              className="textarea h-24 textarea-bordered"
+              placeholder={descriptionPlaceholder}
+              value={description}
+              onChange={(e) => setDescription(e.target.value || '')}
+            ></textarea>
+          </div>
 
-            <Spacer h={4} />
+          <Spacer h={4} />
 
-            <div className="form-control">
-              <label className="label">
-                <span className="label-text">
-                  Initial probability: {initialProb}%
-                </span>
-              </label>
+          <div className="form-control">
+            <label className="label">
+              <span className="label-text">
+                Initial probability: {initialProb}%
+              </span>
+            </label>
 
-              <input
-                type="range"
-                className="range range-lg range-primary"
-                min="1"
-                max={99}
-                value={initialProb}
-                onChange={(e) => setInitialProb(parseInt(e.target.value))}
-              />
-            </div>
+            <input
+              type="range"
+              className="range range-lg range-primary"
+              min="1"
+              max={99}
+              value={initialProb}
+              onChange={(e) => setInitialProb(parseInt(e.target.value))}
+            />
+          </div>
 
-            <Spacer h={4} />
+          <Spacer h={4} />
 
-            <div className="flex justify-end my-4">
-              <button
-                type="submit"
-                className="btn btn-primary"
-                disabled={isSubmitting || !question}
-                onClick={(e) => {
-                  e.preventDefault()
-                  submit()
-                }}
-              >
-                Create market
-              </button>
-            </div>
-          </form>
-        </div>
-
-        <Spacer h={10} />
-
-        <Title text="Your markets" />
-
-        {creator && <ContractsList creator={creator} />}
+          <div className="flex justify-end my-4">
+            <button
+              type="submit"
+              className="btn btn-primary"
+              disabled={isSubmitting || !question}
+              onClick={(e) => {
+                e.preventDefault()
+                submit()
+              }}
+            >
+              Create market
+            </button>
+          </div>
+        </form>
       </div>
+
+      <Spacer h={10} />
+
+      <Title text="Your markets" />
+
+      {creator && <ContractsList creator={creator} />}
     </div>
   )
 }

web/pages/markets.tsx

@@ -6,11 +6,9 @@ export default function Markets() {
   const contracts = useContracts()
 
   return (
-    <div>
+    <div className="max-w-4xl px-4 pb-8 mx-auto">
       <Header />
-      <div className="max-w-4xl py-8 mx-auto">
-        <SearchableGrid contracts={contracts === 'loading' ? [] : contracts} />
-      </div>
+      <SearchableGrid contracts={contracts === 'loading' ? [] : contracts} />
     </div>
   )
 }