Switch to light theme!

web/components/bet-panel.tsx

@@ -57,7 +57,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
   const betDisabled = isSubmitting || wasSubmitted
 
   return (
-    <Col className={clsx('bg-gray-600 p-6 rounded w-full md:w-auto', className)}>
+    <Col className={clsx('bg-gray-100 p-6 rounded w-full md:w-auto', className)}>
       <div className="p-2 font-medium">Pick outcome</div>
       <YesNoSelector
         className="p-2"

web/components/contract-overview.tsx

@@ -44,7 +44,7 @@ export const ContractOverview = (props: { contract: Contract }) => {
     <Col className="max-w-3xl w-full">
       <div className="text-3xl font-medium p-2">{contract.question}</div>
 
-      <Row className="flex-wrap text-sm">
+      <Row className="flex-wrap text-sm text-gray-600">
         <div className="p-2 whitespace-nowrap">By {contract.creatorName}</div>
         <div className="py-2">•</div>
         <div className="p-2 whitespace-nowrap">Dec 9</div>
@@ -58,7 +58,7 @@ export const ContractOverview = (props: { contract: Contract }) => {
 
       <Spacer h={12} />
 
-      <div className="text-gray-200">{contract.description}</div>
+      <div className="text-gray-600">{contract.description}</div>
     </Col>
   )
 }

web/components/contracts-list.tsx

@@ -6,10 +6,10 @@ function ContractCard(props: { contract: Contract }) {
   return (
     <li>
       <Link href={`/contract/${contract.id}`}>
-        <a className="block hover:bg-gray-600">
+        <a className="block hover:bg-gray-200">
           <div className="px-4 py-4 sm:px-6">
             <div className="flex items-center justify-between">
-              <p className="text-sm font-medium text-indigo-300 truncate">
+              <p className="text-sm font-medium text-indigo-500 truncate">
                 {contract.question}
               </p>
               <div className="ml-2 flex-shrink-0 flex">
@@ -52,7 +52,7 @@ function ContractCard(props: { contract: Contract }) {
 export function ContractsList(props: { contracts: Contract[] }) {
   const { contracts } = props
   return (
-    <div className="bg-gray-500 shadow overflow-hidden sm:rounded-md max-w-4xl w-full">
+    <div className="bg-gray-100 shadow overflow-hidden sm:rounded-md max-w-4xl w-full">
       <ul role="list" className="divide-y divide-gray-200">
         {contracts.map((contract) => (
           <ContractCard contract={contract} key={contract.id} />

web/components/header.tsx

@@ -1,7 +1,9 @@
+import clsx from 'clsx'
 import { Popover } from '@headlessui/react'
 import Link from 'next/link'
 import { useUser } from '../hooks/use-user'
 import { firebaseLogin } from '../lib/firebase/users'
+import Image from 'next/image'
 
 const navigation = [
   {
@@ -11,28 +13,34 @@ const navigation = [
   { name: 'Simulator', href: '/simulator' },
 ]
 
-function SignInLink() {
+function SignInLink(props: { darkBackground?: boolean }) {
+  const { darkBackground } = props
+
   const user = useUser()
 
+  const themeClasses = darkBackground
+    ? 'text-white hover:text-gray-300'
+    : 'hover:text-gray-500'
+
   return (
     <>
       {user ? (
         <>
           <Link href="/contract">
-            <a className="text-base font-medium text-white hover:text-gray-300">
+            <a className={clsx('text-base font-medium', themeClasses)}>
               Create a market
             </a>
           </Link>
 
           <Link href="/account">
-            <a className="text-base font-medium text-green-400 hover:text-gray-300">
+            <a className={clsx('text-base font-medium', themeClasses)}>
               {user.name}
             </a>
           </Link>
         </>
       ) : (
         <button
-          className="text-base font-medium text-green-400  hover:text-gray-300"
+          className={clsx('text-base font-medium', themeClasses)}
           onClick={() => firebaseLogin()}
         >
           Sign In
@@ -42,7 +50,9 @@ function SignInLink() {
   )
 }
 
-export function Header() {
+export function Header(props: { darkBackground?: boolean }) {
+  const { darkBackground } = props
+
   return (
     <Popover as="header" className="relative">
       <div className="pt-6">
@@ -53,12 +63,21 @@ export function Header() {
           <div className="flex items-center flex-1">
             <div className="flex items-center justify-between w-full md:w-auto">
               <Link href="/">
-                <a className="inline-grid grid-flow-col align-items-center h-6 sm:h-10">
+                <a className="flex flex-row items-center align-items-center h-6 sm:h-10">
-                  <img
+                  <div className="inline-block mr-3 mt-2">
-                    className="w-auto h-6 sm:h-10 inline-block mr-3"
+                    <Image
+                      className="h-6 sm:h-10"
                       src="/logo-icon.svg"
+                      width={40}
+                      height={40}
                     />
-                  <span className="text-white font-major-mono lowercase sm:text-2xl my-auto">
+                  </div>
+                  <span
+                    className={clsx(
+                      'font-major-mono lowercase sm:text-2xl my-auto',
+                      darkBackground && 'text-white'
+                    )}
+                  >
                     Mantic Markets
                   </span>
                 </a>
@@ -68,12 +87,19 @@ export function Header() {
             <div className="space-x-8 md:flex md:ml-16">
               {navigation.map((item) => (
                 <Link key={item.name} href={item.href}>
-                  <a className="text-base font-medium text-white hover:text-gray-300">
+                  <a
+                    className={clsx(
+                      'text-base font-medium',
+                      darkBackground
+                        ? 'text-white hover:text-gray-300'
+                        : 'hover:text-gray-500'
+                    )}
+                  >
                     {item.name}
                   </a>
                 </Link>
               ))}
-              <SignInLink />
+              <SignInLink darkBackground={darkBackground} />
             </div>
           </div>
         </nav>

web/components/hero.tsx

@@ -4,7 +4,7 @@ import { Header } from './header'
 export const Hero = () => {
   return (
     <div className="relative overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900">
-      <Header />
+      <Header darkBackground />
       <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">

web/components/yes-no-selector.tsx

@@ -51,7 +51,7 @@ function Button(props: {
           'bg-green-500 hover:bg-green-600 focus:ring-green-500',
         color === 'red' && 'bg-red-500 hover:bg-red-600 focus:ring-red-500',
         color === 'deemphasized' &&
-          'bg-transparent hover:bg-gray-500 focus:ring-gray-400',
+          'text-gray-700 bg-gray-200 hover:bg-gray-300 focus:ring-gray-300',
         className
       )}
       onClick={onClick}

web/pages/_document.tsx

@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {
   return (
-    <Html data-theme="dark" className="h-full bg-gray-900">
+    <Html data-theme="light" className="h-full">
       <Head>
         <title>Mantic Markets</title>
 

web/pages/contract/index.tsx

@@ -53,10 +53,10 @@ export default function NewContract() {
     <div>
       <Header />
       <div className="max-w-4xl my-20 lg:mx-auto mx-4">
-        <h1 className="text-2xl font-major-mono text-indigo-300 font-bold mt-6 mb-4">
+        <h1 className="text-2xl font-major-mono text-indigo-500 font-bold mt-6 mb-4">
           Create a new prediction market
         </h1>
-        <div className="w-full bg-gray-500 rounded-lg shadow-xl p-6">
+        <div className="w-full bg-gray-100 rounded-lg shadow-xl p-6">
           {/* 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>
@@ -164,7 +164,7 @@ export default function NewContract() {
         </div>
 
         {/* Show a separate card for each contract */}
-        <h1 className="text-2xl  font-major-mono text-indigo-300 font-bold mt-6 mb-4">
+        <h1 className="text-2xl font-major-mono text-indigo-500 font-bold mt-6 mb-4">
           Your markets
         </h1>