Switch to light theme!
This commit is contained in:
jahooma
parent
3610ac8917
commit
165f2ef3b5
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<img
|
||||
className="w-auto h-6 sm:h-10 inline-block mr-3"
|
||||
src="/logo-icon.svg"
|
||||
/>
|
||||
<span className="text-white font-major-mono lowercase sm:text-2xl my-auto">
|
||||
<a className="flex flex-row items-center align-items-center h-6 sm:h-10">
|
||||
<div className="inline-block mr-3 mt-2">
|
||||
<Image
|
||||
className="h-6 sm:h-10"
|
||||
src="/logo-icon.svg"
|
||||
width={40}
|
||||
height={40}
|
||||
/>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user