open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Austin's opinions on theming (#6)

Browse Source 
* 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 2021-12-10 19:35:21 -08:00 committed by GitHub
parent fb9a690707
commit 8867d841cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 25 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/components/bet-panel.tsx
View File

@ -50,7 +50,10 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
return ( return (
<Col <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> <div className="p-2 font-medium">Pick outcome</div>
<YesNoSelector <YesNoSelector

32
web/components/button.tsx
View File

@ -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(' ')
}

8
web/components/contracts-list.tsx
View File

@ -6,10 +6,10 @@ function ContractCard(props: { contract: Contract }) {
return ( return (
<li> <li>
<Link href={`/contract/${contract.id}`}> <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="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between"> <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} {contract.question}
</p> </p>
<div className="ml-2 flex-shrink-0 flex"> <div className="ml-2 flex-shrink-0 flex">
@ -52,8 +52,8 @@ function ContractCard(props: { contract: Contract }) {
export function ContractsList(props: { contracts: Contract[] }) { export function ContractsList(props: { contracts: Contract[] }) {
const { contracts } = props const { contracts } = props
return ( return (
<div className="bg-gray-100 shadow overflow-hidden sm:rounded-md max-w-4xl w-full"> <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-200"> <ul role="list" className="divide-y divide-gray-300">
{contracts.map((contract) => ( {contracts.map((contract) => (
<ContractCard contract={contract} key={contract.id} /> <ContractCard contract={contract} key={contract.id} />
))} ))}

8
web/components/title.tsx Normal file
View 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
View File

@ -9,7 +9,7 @@
"@headlessui/react": "1.4.2", "@headlessui/react": "1.4.2",
"@heroicons/react": "1.0.5", "@heroicons/react": "1.0.5",
"chart.js": "3.6.1", "chart.js": "3.6.1",
"clsx": "^1.1.1", "clsx": "1.1.1",
"daisyui": "1.16.2", "daisyui": "1.16.2",
"firebase": "9.6.0", "firebase": "9.6.0",
"next": "12.0.4", "next": "12.0.4",

4
web/pages/_document.tsx
View File

@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() { export default function Document() {
return ( return (
<Html data-theme="mantic" className="h-full"> <Html data-theme="mantic" className="min-h-screen">
<Head> <Head>
<title>Mantic Markets</title> <title>Mantic Markets</title>
@ -57,7 +57,7 @@ export default function Document() {
}} }}
/> />
</Head> </Head>
<body className="h-full font-readex-pro"> <body className="min-h-screen font-readex-pro bg-base-200">
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>

5
web/pages/account.tsx
View File

@ -5,6 +5,7 @@ import { useUser } from '../hooks/use-user'
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { Contract, listContracts } from '../lib/firebase/contracts' import { Contract, listContracts } from '../lib/firebase/contracts'
import { ContractsList } from '../components/contracts-list' import { ContractsList } from '../components/contracts-list'
import { Title } from '../components/title'
export default function Account() { export default function Account() {
const user = useUser() const user = useUser()
@ -46,9 +47,7 @@ export default function Account() {
</div> </div>
</div> </div>
<h1 className="text-2xl font-major-mono text-green-600 font-bold mt-6 mb-4"> <Title text="Your markets" />
Your markets
</h1>
<ContractsList contracts={contracts} /> <ContractsList contracts={contracts} />
</div> </div>
</div> </div>

13
web/pages/contract/index.tsx
View File

@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
import { ContractsList } from '../../components/contracts-list' import { ContractsList } from '../../components/contracts-list'
import { Header } from '../../components/header' import { Header } from '../../components/header'
import { Spacer } from '../../components/layout/spacer' import { Spacer } from '../../components/layout/spacer'
import { Title } from '../../components/title'
import { useUser } from '../../hooks/use-user' import { useUser } from '../../hooks/use-user'
import { import {
Contract, Contract,
@ -55,10 +56,8 @@ export default function NewContract() {
<div> <div>
<Header /> <Header />
<div className="max-w-4xl py-12 lg:mx-auto px-4"> <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"> <Title text="Create a new prediction market" />
Create a new prediction market <div className="w-full bg-gray-200 rounded-lg shadow-xl p-6">
</h1>
<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 */} {/* 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 */} {/* When the form is submitted, create a new contract in the database */}
<form> <form>
@ -175,11 +174,7 @@ export default function NewContract() {
<Spacer h={10} /> <Spacer h={10} />
{/* Show a separate card for each contract */} <Title text="Your markets" />
<h1 className="text-2xl font-major-mono text-green-600 font-bold my-6">
Your markets
</h1>
<ContractsList contracts={contracts} /> <ContractsList contracts={contracts} />
</div> </div>
</div> </div>