Change color scheme to be primary green (secondary purple, accent yellow).
This commit is contained in:
jahooma
parent
165f2ef3b5
commit
19e8406480
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
module.exports = {
|
||||
reactStrictMode: true,
|
||||
images: {
|
||||
domains: ['lh3.googleusercontent.com'],
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user