Various spacing fixes

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 whitespace-nowrap',
+            'text-base 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 whitespace-nowrap',
+            'text-base hidden md:block whitespace-nowrap',
             themeClasses
           )}
         >
@@ -73,7 +73,11 @@ function SignedInHeaders(props: { user: User; themeClasses?: string }) {
       </Link>
 
       <Link href="/account">
-        <a className={clsx('text-base font-medium hidden md:block')}>
+        <a
+          className={clsx(
+            'text-base hidden md:block hover:underline hover:decoration-2 hover:decoration-indigo-700'
+          )}
+        >
           <ProfileSummary user={user} />
         </a>
       </Link>
@@ -133,7 +137,12 @@ export function Header(props: { darkBackground?: boolean; children?: any }) {
         </a>
       </Link>
 
-      <Row className="gap-8 mt-1 md:ml-16">
+      <Row
+        className={clsx(
+          'gap-8 mt-1',
+          darkBackground ? 'md:ml-16' : 'md:ml-auto'
+        )}
+      >
         {children}
 
         {user ? (

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 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 mx-auto">
       <div className="p-4">
         {user?.avatarUrl && (
           <img

web/pages/account.tsx

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

web/pages/landing-page.tsx

@@ -32,6 +32,9 @@ function Hero() {
 
   return (
     <div className="overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900 bg-center lg:bg-left">
+      <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">
             <Header darkBackground>
               <div
                 className="text-base font-medium text-white cursor-pointer hover:underline hover:decoration-teal-500 hover:decoration-2"
@@ -40,9 +43,7 @@ function Hero() {
                 About
               </div>
             </Header>
-      <main>
-        <div className="pt-40 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
-          <div className="mx-auto max-w-7xl lg:px-8">
+
             <div className="lg:grid lg:grid-cols-2 lg:gap-8">
               <div className="mx-auto max-w-md px-8 sm:max-w-2xl sm:text-center lg:px-0 lg:text-left lg:flex lg:items-center">
                 <div className="lg:py-24">

web/pages/tag/[tag].tsx

@@ -18,12 +18,10 @@ export default function TagPage() {
   }
 
   return (
-    <div>
+    <div className="max-w-4xl px-4 pb-8 mx-auto">
       <Header />
-      <div className="max-w-4xl py-8 mx-auto">
       <Title text={`#${tag}`} />
       <SearchableGrid contracts={contracts === 'loading' ? [] : contracts} />
     </div>
-    </div>
   )
 }