Improve navbar styles. Create Page component with navbar and page structure.

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">
-          <Row className="mr-10">
+          <Row className="mr-6">
             <Link href={path(contract)}>
               <a
                 className="font-medium text-indigo-700 hover:underline hover:decoration-indigo-400 hover:decoration-2"
@@ -147,7 +147,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
         </Col>
 
         <MyBetsSummary
-          className="flex-1 justify-end mr-8"
+          className="flex-1 justify-end mr-5 sm:mr-8"
           contract={contract}
           bets={bets}
         />
@@ -187,7 +187,7 @@ export function MyBetsSummary(props: {
   )
 
   return (
-    <Row className={clsx('gap-6', className)}>
+    <Row className={clsx('gap-4 sm:gap-6', className)}>
       <Col>
         <div className="text-sm text-gray-500 whitespace-nowrap">
           Total bets

web/components/menu.tsx

@@ -28,7 +28,7 @@ export function MenuButton(props: {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1 focus:outline-none">
+        <Menu.Items className="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1 focus:outline-none">
           {menuItems.map((item) => (
             <Menu.Item key={item.name}>
               {({ active }) => (

web/components/nav-bar.tsx

@@ -7,9 +7,6 @@ import { firebaseLogin, User } from '../lib/firebase/users'
 import { ManticLogo } from './mantic-logo'
 import { ProfileMenu } from './profile-menu'
 
-const hoverClasses =
-  'hover:underline hover:decoration-indigo-400 hover:decoration-2'
-
 export function NavBar(props: {
   darkBackground?: boolean
   className?: string
@@ -19,19 +16,22 @@ export function NavBar(props: {
 
   const user = useUser()
 
+  const hoverClasses =
+    'hover:underline hover:decoration-indigo-400 hover:decoration-2'
   const themeClasses = clsx(darkBackground && 'text-white', hoverClasses)
 
   return (
     <nav
       className={clsx(
-        'w-full flex flex-row justify-between md:justify-start pt-5 pb-4',
+        'w-full flex flex-row justify-center items-center p-4 shadow-sm mb-4',
+        !darkBackground && 'bg-white',
         className
       )}
       aria-label="Global"
     >
       <ManticLogo darkBackground={darkBackground} />
 
-      <Row className="gap-6 sm:gap-8 mt-1 md:ml-16">
+      <Row className="items-center gap-6 sm:gap-8 md:ml-16 lg:ml-40">
         {children}
 
         {user ? (

web/components/page.tsx

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

web/components/user-page.tsx

@@ -1,5 +1,4 @@
 import { firebaseLogout, User } from '../lib/firebase/users'
-import { NavBar } from './nav-bar'
 import { ContractsList } from './contracts-list'
 import { Title } from './title'
 import { Row } from './layout/row'
@@ -7,6 +6,7 @@ import { formatMoney } from '../lib/util/format'
 import Link from 'next/link'
 import clsx from 'clsx'
 import { SEO } from './SEO'
+import { Page } from './page'
 
 export function UserLink(props: { username: string; className?: string }) {
   const { username, className } = props
@@ -70,20 +70,18 @@ export function UserPage(props: { user: User; currentUser?: User }) {
   const possesive = isCurrentUser ? 'Your ' : `${user.username}'s `
 
   return (
-    <div className="max-w-4xl px-4 pb-8 mx-auto">
+    <Page>
       <SEO
         title={possesive + 'markets'}
         description={possesive + 'markets'}
         url={`/@${user.username}`}
       />
 
-      <NavBar />
-
       {/* <UserCard user={user} showPrivateInfo={isCurrentUser} /> */}
 
       <Title text={possesive + 'markets'} />
 
       <ContractsList creator={user} />
-    </div>
+    </Page>
   )
 }

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

@@ -1,8 +1,6 @@
 import React from 'react'
-import clsx from 'clsx'
 
 import { useContractWithPreload } from '../../hooks/use-contract'
-import { NavBar } from '../../components/nav-bar'
 import { ContractOverview } from '../../components/contract-overview'
 import { BetPanel } from '../../components/bet-panel'
 import { Col } from '../../components/layout/col'
@@ -15,6 +13,7 @@ import { Spacer } from '../../components/layout/spacer'
 import { User } from '../../lib/firebase/users'
 import { Contract, getContractFromSlug } from '../../lib/firebase/contracts'
 import { SEO } from '../../components/SEO'
+import { Page } from '../../components/page'
 
 export async function getStaticProps(props: { params: any }) {
   const { username, contractSlug } = props.params
@@ -52,20 +51,13 @@ export default function ContractPage(props: {
   const isCreator = user?.id === creatorId
 
   return (
-    <Col
-      className={clsx(
-        'px-4 pb-8 mx-auto',
-        isResolved ? 'max-w-4xl' : 'max-w-7xl'
-      )}
-    >
+    <Page wide={!isResolved}>
       <SEO
         title={contract.question}
         description={contract.description}
         url={`/${props.username}/${props.slug}`}
       />
 
-      <NavBar />
-
       <Col className="w-full md:flex-row justify-between mt-6">
         <div className="flex-[3]">
           <ContractOverview contract={contract} />
@@ -86,7 +78,7 @@ export default function ContractPage(props: {
           </>
         )}
       </Col>
-    </Col>
+    </Page>
   )
 }
 

web/pages/about.tsx

@@ -1,15 +1,14 @@
 import { cloneElement } from 'react'
-import { NavBar } from '../components/nav-bar'
+import { Page } from '../components/page'
 import { SEO } from '../components/SEO'
 import styles from './about.module.css'
 
 export default function About() {
   return (
-    <div className="max-w-3xl px-4 mx-auto">
+    <Page>
       <SEO title="About" description="About" url="/about" />
-      <NavBar />
       <Contents />
-    </div>
+    </Page>
   )
 }
 

web/pages/account.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { NavBar } from '../components/nav-bar'
+import { Page } from '../components/page'
 import { UserPage } from '../components/user-page'
 import { useUser } from '../hooks/use-user'
 import { firebaseLogin } from '../lib/firebase/users'
@@ -34,9 +34,8 @@ export default function Account() {
   return user ? (
     <UserPage user={user} currentUser={user} />
   ) : (
-    <div className="max-w-4xl px-4 pb-8 mx-auto">
-      <NavBar />
+    <Page>
       <SignInCard />
-    </div>
+    </Page>
   )
 }

web/pages/bets.tsx

@@ -1,5 +1,5 @@
 import { BetsList } from '../components/bets-list'
-import { NavBar } from '../components/nav-bar'
+import { Page } from '../components/page'
 import { SEO } from '../components/SEO'
 import { Title } from '../components/title'
 import { useUser } from '../hooks/use-user'
@@ -8,11 +8,10 @@ export default function BetsPage() {
   const user = useUser()
 
   return (
-    <div className="max-w-4xl px-4 pb-8 mx-auto">
+    <Page>
       <SEO title="Your bets" description="Your bets" url="/bets" />
-      <NavBar />
       <Title text="Your bets" />
       {user && <BetsList user={user} />}
-    </div>
+    </Page>
   )
 }

web/pages/create.tsx

@@ -2,12 +2,12 @@ import router from 'next/router'
 import { useEffect, useState } from 'react'
 
 import { ContractsList } from '../components/contracts-list'
-import { NavBar } from '../components/nav-bar'
 import { Spacer } from '../components/layout/spacer'
 import { Title } from '../components/title'
 import { useUser } from '../hooks/use-user'
 import { path } from '../lib/firebase/contracts'
 import { createContract } from '../lib/service/create-contract'
+import { Page } from '../components/page'
 
 // Allow user to create a new contract
 export default function NewContract() {
@@ -42,9 +42,7 @@ export default function NewContract() {
   if (!creator) return <></>
 
   return (
-    <div className="max-w-4xl px-4 pb-8 mx-auto">
-      <NavBar />
-
+    <Page>
       <Title text="Create a new prediction market" />
 
       <div className="w-full bg-gray-100 rounded-lg shadow-xl px-6 py-4">
@@ -122,6 +120,6 @@ export default function NewContract() {
       <Title text="Your markets" />
 
       {creator && <ContractsList creator={creator} />}
-    </div>
+    </Page>
   )
 }

web/pages/landing-page.tsx

@@ -24,24 +24,22 @@ export default function LandingPage() {
   )
 }
 
-function Hero() {
-  const scrollToAbout = () => {
-    const aboutElem = document.getElementById('about')
-    window.scrollTo({ top: aboutElem?.offsetTop, behavior: 'smooth' })
-  }
+const scrollToAbout = () => {
+  const aboutElem = document.getElementById('about')
+  window.scrollTo({ top: aboutElem?.offsetTop, behavior: 'smooth' })
+}
 
+function Hero() {
   return (
     <div className="overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900 bg-center lg:bg-left">
-      <div className="max-w-7xl w-full mx-auto">
-        <NavBar className="px-6 sm:px-8" darkBackground>
-          <div
-            className="text-base font-medium text-white cursor-pointer hover:underline hover:decoration-teal-500 hover:decoration-2"
-            onClick={scrollToAbout}
-          >
-            About
-          </div>
-        </NavBar>
-      </div>
+      <NavBar className="max-w-4xl" darkBackground>
+        <div
+          className="text-base font-medium text-white ml-8 cursor-pointer hover:underline hover:decoration-teal-500 hover:decoration-2"
+          onClick={scrollToAbout}
+        >
+          About
+        </div>
+      </NavBar>
       <main>
         <div className="pt-32 sm:pt-8 lg:pt-0 lg:pb-14 lg:overflow-hidden">
           <div className="mx-auto max-w-7xl lg:px-8">

web/pages/markets.tsx

@@ -1,5 +1,5 @@
 import { SearchableGrid } from '../components/contracts-list'
-import { NavBar } from '../components/nav-bar'
+import { Page } from '../components/page'
 import { useContracts } from '../hooks/use-contracts'
 import { Contract, listAllContracts } from '../lib/firebase/contracts'
 
@@ -19,13 +19,12 @@ export default function Markets(props: { contracts: Contract[] }) {
   const contracts = useContracts()
 
   return (
-    <div className="max-w-4xl px-4 pb-8 mx-auto">
-      <NavBar />
+    <Page>
       {(props.contracts || contracts !== 'loading') && (
         <SearchableGrid
           contracts={contracts === 'loading' ? props.contracts : contracts}
         />
       )}
-    </div>
+    </Page>
   )
 }

web/pages/tag/[tag].tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { SearchableGrid } from '../../components/contracts-list'
-import { NavBar } from '../../components/nav-bar'
+import { Page } from '../../components/page'
 import { Title } from '../../components/title'
 import { useContracts } from '../../hooks/use-contracts'
 
@@ -19,10 +19,9 @@ export default function TagPage() {
   }
 
   return (
-    <div className="max-w-4xl px-4 pb-8 mx-auto">
-      <NavBar />
+    <Page>
       <Title text={`#${tag}`} />
       <SearchableGrid contracts={contracts === 'loading' ? [] : contracts} />
-    </div>
+    </Page>
   )
 }