Austin's opinions on theming (#6)
* Run prettier * Fix package-lock * Use an off-white background, darker text * Use indigo for headings instead of green * Add box shadows to all cards * Remove unused component * Extract out a title component * Fix typo
This commit is contained in:
Austin Chen
GitHub
parent
fb9a690707
commit
8867d841cb
|
|
@ -50,7 +50,10 @@ 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 shadow-xl p-6 rounded w-full md:w-auto',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="p-2 font-medium">Pick outcome</div>
|
||||
<YesNoSelector
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
export function Button(props: {
|
||||
className?: string
|
||||
onClick?: () => void
|
||||
color: 'green' | 'red' | 'deemphasized'
|
||||
hideFocusRing?: boolean
|
||||
children?: any
|
||||
}) {
|
||||
const { className, onClick, children, color, hideFocusRing } = props
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={classNames(
|
||||
'inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white',
|
||||
!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 === 'deemphasized' &&
|
||||
'bg-transparent hover:bg-gray-500 focus:ring-gray-400',
|
||||
className
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function classNames(...classes: any[]) {
|
||||
return classes.filter(Boolean).join(' ')
|
||||
}
|
||||
|
|
@ -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-indigo-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-xl 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} />
|
||||
))}
|
||||
|
|
|
|||
8
web/components/title.tsx
Normal file
8
web/components/title.tsx
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export function Title(props: { text: string }) {
|
||||
const { text } = props
|
||||
return (
|
||||
<h1 className="text-2xl font-major-mono text-indigo-700 font-bold mt-6 mb-4">
|
||||
{text}
|
||||
</h1>
|
||||
)
|
||||
}
|
||||
2
web/package-lock.json
generated
2
web/package-lock.json
generated
|
|
@ -9,7 +9,7 @@
|
|||
"@headlessui/react": "1.4.2",
|
||||
"@heroicons/react": "1.0.5",
|
||||
"chart.js": "3.6.1",
|
||||
"clsx": "^1.1.1",
|
||||
"clsx": "1.1.1",
|
||||
"daisyui": "1.16.2",
|
||||
"firebase": "9.6.0",
|
||||
"next": "12.0.4",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 { Title } from '../components/title'
|
||||
|
||||
export default function Account() {
|
||||
const user = useUser()
|
||||
|
|
@ -46,9 +47,7 @@ export default function Account() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-major-mono text-green-600 font-bold mt-6 mb-4">
|
||||
Your markets
|
||||
</h1>
|
||||
<Title text="Your markets" />
|
||||
<ContractsList contracts={contracts} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
|
|||
import { ContractsList } from '../../components/contracts-list'
|
||||
import { Header } from '../../components/header'
|
||||
import { Spacer } from '../../components/layout/spacer'
|
||||
import { Title } from '../../components/title'
|
||||
import { useUser } from '../../hooks/use-user'
|
||||
import {
|
||||
Contract,
|
||||
|
|
@ -55,10 +56,8 @@ 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">
|
||||
Create a new prediction market
|
||||
</h1>
|
||||
<div className="w-full bg-gray-100 rounded-lg shadow-xl p-6">
|
||||
<Title text="Create a new prediction market" />
|
||||
<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>
|
||||
|
|
@ -175,11 +174,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">
|
||||
Your markets
|
||||
</h1>
|
||||
|
||||
<Title text="Your markets" />
|
||||
<ContractsList contracts={contracts} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user