From 0de7c67fcb4f339b8a4bd6f0c34bd7a6b8b147f7 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Fri, 10 Dec 2021 16:44:20 -0800
Subject: [PATCH] Use an off-white background, darker text

---
 web/components/bet-panel.tsx      | 2 +-
 web/components/contracts-list.tsx | 8 ++++----
 web/pages/_document.tsx           | 4 ++--
 web/pages/account.tsx             | 2 +-
 web/pages/contract/index.tsx      | 6 +++---
 5 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index 3c40dbfb..f4566eb0 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -50,7 +50,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
 
   return (
     <Col
-      className={clsx('bg-gray-100 p-6 rounded w-full md:w-auto', className)}
+      className={clsx('bg-gray-200 p-6 rounded w-full md:w-auto', className)}
     >
       <div className="p-2 font-medium">Pick outcome</div>
       <YesNoSelector
diff --git a/web/components/contracts-list.tsx b/web/components/contracts-list.tsx
index 92fb8cbc..ac1bf15f 100644
--- a/web/components/contracts-list.tsx
+++ b/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-200">
+        <a className="block hover:bg-gray-300">
           <div className="px-4 py-4 sm:px-6">
             <div className="flex items-center justify-between">
-              <p className="text-sm font-medium text-green-600 truncate">
+              <p className="text-sm font-medium text-green-700 truncate">
                 {contract.question}
               </p>
               <div className="ml-2 flex-shrink-0 flex">
@@ -52,8 +52,8 @@ function ContractCard(props: { contract: Contract }) {
 export function ContractsList(props: { contracts: Contract[] }) {
   const { contracts } = props
   return (
-    <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">
+    <div className="bg-gray-200 shadow overflow-hidden sm:rounded-md max-w-4xl w-full">
+      <ul role="list" className="divide-y divide-gray-300">
         {contracts.map((contract) => (
           <ContractCard contract={contract} key={contract.id} />
         ))}
diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
index 91a70e51..3b005b96 100644
--- a/web/pages/_document.tsx
+++ b/web/pages/_document.tsx
@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {
   return (
-    <Html data-theme="mantic" className="h-full">
+    <Html data-theme="mantic" className="min-h-screen">
       <Head>
         <title>Mantic Markets</title>
 
@@ -57,7 +57,7 @@ export default function Document() {
           }}
         />
       </Head>
-      <body className="h-full font-readex-pro">
+      <body className="min-h-screen font-readex-pro bg-base-200">
         <Main />
         <NextScript />
       </body>
diff --git a/web/pages/account.tsx b/web/pages/account.tsx
index f210bd3b..a594e3a2 100644
--- a/web/pages/account.tsx
+++ b/web/pages/account.tsx
@@ -46,7 +46,7 @@ export default function Account() {
           </div>
         </div>
 
-        <h1 className="text-2xl font-major-mono text-green-600 font-bold mt-6 mb-4">
+        <h1 className="text-2xl font-major-mono text-green-700 font-bold mt-6 mb-4">
           Your markets
         </h1>
         <ContractsList contracts={contracts} />
diff --git a/web/pages/contract/index.tsx b/web/pages/contract/index.tsx
index bc15e743..3ab7a395 100644
--- a/web/pages/contract/index.tsx
+++ b/web/pages/contract/index.tsx
@@ -55,10 +55,10 @@ export default function NewContract() {
     <div>
       <Header />
       <div className="max-w-4xl py-12 lg:mx-auto px-4">
-        <h1 className="text-2xl font-major-mono text-green-600 font-bold my-6">
+        <h1 className="text-2xl font-major-mono text-green-700 font-bold my-6">
           Create a new prediction market
         </h1>
-        <div className="w-full bg-gray-100 rounded-lg shadow-xl p-6">
+        <div className="w-full bg-gray-200 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>
@@ -176,7 +176,7 @@ export default function NewContract() {
         <Spacer h={10} />
 
         {/* Show a separate card for each contract */}
-        <h1 className="text-2xl font-major-mono text-green-600 font-bold my-6">
+        <h1 className="text-2xl font-major-mono text-green-700 font-bold my-6">
           Your markets
         </h1>
 
