From 2a4ad3734bc028e3e1623b347017e5e0db4400f4 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Sat, 18 Dec 2021 17:23:34 -0800
Subject: [PATCH] Various spacing fixes

---
 web/components/header.tsx    | 17 +++++++++++++----
 web/components/user-page.tsx |  2 +-
 web/pages/account.tsx        | 10 +++++++++-
 web/pages/landing-page.tsx   | 19 ++++++++++---------
 web/pages/tag/[tag].tsx      |  8 +++-----
 5 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/web/components/header.tsx b/web/components/header.tsx
index 23a6dca0..b3921000 100644
--- a/web/components/header.tsx
+++ b/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 ? (
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index 87ba0189..ed861e27 100644
--- a/web/components/user-page.tsx
+++ b/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
diff --git a/web/pages/account.tsx b/web/pages/account.tsx
index ec21fd62..132e0d0d 100644
--- a/web/pages/account.tsx
+++ b/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>
+  )
 }
diff --git a/web/pages/landing-page.tsx b/web/pages/landing-page.tsx
index 19559a9a..3f158b33 100644
--- a/web/pages/landing-page.tsx
+++ b/web/pages/landing-page.tsx
@@ -32,17 +32,18 @@ function Hero() {
 
   return (
     <div className="overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900 bg-center lg:bg-left">
-      <Header darkBackground>
-        <div
-          className="text-base font-medium text-white cursor-pointer hover:underline hover:decoration-teal-500 hover:decoration-2"
-          onClick={scrollToAbout}
-        >
-          About
-        </div>
-      </Header>
       <main>
-        <div className="pt-40 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
+        <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"
+                onClick={scrollToAbout}
+              >
+                About
+              </div>
+            </Header>
+
             <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">
diff --git a/web/pages/tag/[tag].tsx b/web/pages/tag/[tag].tsx
index 638e4e55..67e3d314 100644
--- a/web/pages/tag/[tag].tsx
+++ b/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>
+      <Title text={`#${tag}`} />
+      <SearchableGrid contracts={contracts === 'loading' ? [] : contracts} />
     </div>
   )
 }