From 19e840648061c99fc225cecb085a7873ff3a5a5f Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Fri, 10 Dec 2021 17:43:22 -0600
Subject: [PATCH] Change color scheme to be primary green (secondary purple,
 accent yellow).

---
 web/components/bet-panel.tsx       | 12 ++++++---
 web/components/contracts-list.tsx  |  2 +-
 web/components/yes-no-selector.tsx |  2 +-
 web/next.config.js                 |  3 +++
 web/pages/_document.tsx            |  2 +-
 web/pages/account.tsx              | 18 ++++++++++----
 web/pages/contract/index.tsx       | 10 ++++----
 web/tailwind.config.js             | 39 ++++++++++++++++++++++++++++++
 8 files changed, 72 insertions(+), 16 deletions(-)

diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index 7845f0b2..acb081a6 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -57,7 +57,9 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
   const betDisabled = isSubmitting || wasSubmitted
 
   return (
-    <Col className={clsx('bg-gray-100 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"
@@ -101,7 +103,11 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
           <button
             className={clsx(
               'btn',
-              betDisabled ? 'btn-disabled' : 'btn-primary'
+              betDisabled
+                ? 'btn-disabled'
+                : betChoice === 'YES'
+                ? 'bg-green-500 hover:bg-green-600 focus:ring-green-500'
+                : 'bg-red-400 hover:bg-red-500 focus:ring-red-400'
             )}
             onClick={betDisabled ? undefined : submitBet}
           >
@@ -116,7 +122,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
 
               <Spacer h={4} />
 
-              <button className="btn btn-primary btn-xs" onClick={newBet}>
+              <button className="btn btn-accent btn-xs" onClick={newBet}>
                 New bet
               </button>
             </Col>
diff --git a/web/components/contracts-list.tsx b/web/components/contracts-list.tsx
index c9acebbf..92fb8cbc 100644
--- a/web/components/contracts-list.tsx
+++ b/web/components/contracts-list.tsx
@@ -9,7 +9,7 @@ function ContractCard(props: { contract: Contract }) {
         <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-500 truncate">
+              <p className="text-sm font-medium text-green-600 truncate">
                 {contract.question}
               </p>
               <div className="ml-2 flex-shrink-0 flex">
diff --git a/web/components/yes-no-selector.tsx b/web/components/yes-no-selector.tsx
index d4162067..2c6b2bbf 100644
--- a/web/components/yes-no-selector.tsx
+++ b/web/components/yes-no-selector.tsx
@@ -49,7 +49,7 @@ function Button(props: {
         !hideFocusRing && 'focus:outline-none focus:ring-2 focus:ring-offset-2',
         color === 'green' &&
           '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 === 'red' && 'bg-red-400 hover:bg-red-500 focus:ring-red-400',
         color === 'deemphasized' &&
           'text-gray-700 bg-gray-200 hover:bg-gray-300 focus:ring-gray-300',
         className
diff --git a/web/next.config.js b/web/next.config.js
index 8b61df4e..a0c27a69 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
+  images: {
+    domains: ['lh3.googleusercontent.com'],
+  },
 }
diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
index 303701fa..91a70e51 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="light" className="h-full">
+    <Html data-theme="mantic" className="h-full">
       <Head>
         <title>Mantic Markets</title>
 
diff --git a/web/pages/account.tsx b/web/pages/account.tsx
index 8c9c5ca2..cc50959b 100644
--- a/web/pages/account.tsx
+++ b/web/pages/account.tsx
@@ -5,6 +5,7 @@ import { useUser } from '../hooks/use-user'
 import { useState, useEffect } from 'react'
 import { Contract, listContracts } from '../lib/firebase/contracts'
 import { ContractsList } from '../components/contracts-list'
+import Image from 'next/image'
 
 export default function Account() {
   const user = useUser()
@@ -19,11 +20,18 @@ export default function Account() {
   return (
     <div>
       <Header />
-      <div className="max-w-4xl my-20 mx-auto">
+      <div className="max-w-4xl py-20 mx-auto">
         <div>
-          <div className="card glass lg:card-side text-neutral-content bg-gray-800 transition-all max-w-sm mx-auto my-20">
+          <div className="card glass lg:card-side text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-auto my-20">
             <figure className="p-6">
-              <img src={user?.avatarUrl} className="rounded-lg shadow-lg" />
+              {user?.avatarUrl && (
+                <Image
+                  src={user.avatarUrl}
+                  className="rounded-lg shadow-lg"
+                  width={96}
+                  height={96}
+                />
+              )}
             </figure>
             <div className="max-w-md card-body">
               <h2 className="card-title font-major-mono">{user?.name}</h2>
@@ -31,7 +39,7 @@ export default function Account() {
               <p>${user?.balanceUsd} USD</p>
               <div className="card-actions">
                 <button
-                  className="btn glass rounded-full"
+                  className="btn glass rounded-full hover:bg-green-500"
                   onClick={() => {
                     firebaseLogout()
                     router.push('/')
@@ -44,7 +52,7 @@ export default function Account() {
           </div>
         </div>
 
-        <h1 className="text-2xl font-major-mono text-indigo-300 font-bold mt-6 mb-4">
+        <h1 className="text-2xl font-major-mono text-green-600 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 b3e6488c..34367333 100644
--- a/web/pages/contract/index.tsx
+++ b/web/pages/contract/index.tsx
@@ -32,9 +32,9 @@ export default function NewContract() {
         creatorId: creator.id,
         creatorName: creator.name,
       }))
-      listContracts(creator?.id).then(setContracts)
+      listContracts(creator.id).then(setContracts)
     }
-  }, [creator?.id])
+  }, [creator])
 
   async function saveContract() {
     await pushContract(contract)
@@ -52,8 +52,8 @@ export default function NewContract() {
   return (
     <div>
       <Header />
-      <div className="max-w-4xl my-20 lg:mx-auto mx-4">
-        <h1 className="text-2xl font-major-mono text-indigo-500 font-bold mt-6 mb-4">
+      <div className="max-w-4xl py-20 lg:mx-auto px-4">
+        <h1 className="text-2xl font-major-mono text-green-600 font-bold mt-6 mb-4">
           Create a new prediction market
         </h1>
         <div className="w-full bg-gray-100 rounded-lg shadow-xl p-6">
@@ -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-500 font-bold mt-6 mb-4">
+        <h1 className="text-2xl font-major-mono text-green-600 font-bold mt-6 mb-4">
           Your markets
         </h1>
 
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index ece84771..2ea8587f 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -17,4 +17,43 @@ module.exports = {
     extend: {},
   },
   plugins: [require('@tailwindcss/forms'), require('daisyui')],
+
+  daisyui: {
+    themes: [
+      {
+        mantic: {
+          'primary': '#11b981',
+          'primary-focus': '#069668',
+          // Foreground content color to use on primary color
+          'primary-content': '#ffffff',
+
+          secondary: '#a991f7',
+          'secondary-focus': '#8462f4',
+          // Foreground content color to use on secondary color
+          'secondary-content': '#ffffff',
+
+          accent: '#f6d860',
+          'accent-focus': '#f3cc30',
+          // Foreground content color to use on accent color
+          'accent-content': '#ffffff',
+
+          neutral: '#3d4451',
+          'neutral-focus': '#2a2e37',
+          // Foreground content color to use on neutral color
+          'neutral-content': '#ffffff',
+
+          'base-100': '#ffffff' /* Base page color, for blank backgrounds */,
+          'base-200': '#f9fafb' /* Base color, a little darker */,
+          'base-300': '#d1d5db' /* Base color, even more dark */,
+          // Foreground content color to use on base color
+          'base-content': '#1f2937',
+
+          info: '#2094f3',
+          success: '#009485',
+          warning: '#ff9900',
+          error: '#ff5724',
+        },
+      },
+    ],
+  },
 }