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

Automatically sort Tailwind classes with Prettier (#45)

Browse Source 
* Add Prettier Tailwind plugin

* Autoformat Tailwind classes with Prettier
This commit is contained in:
Austin Chen 2022-02-11 10:40:22 -08:00 committed by GitHub
parent dc0c9cf1d4
commit 7338bdd47a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
48 changed files with 228 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/components/add-funds-button.tsx
View File

@ -20,7 +20,7 @@ export function AddFundsButton(props: { className?: string }) {
<label <label
htmlFor="add-funds" htmlFor="add-funds"
className={clsx( className={clsx(
'btn btn-xs btn-outline normal-case modal-button font-normal', 'btn btn-xs btn-outline modal-button font-normal normal-case',
className className
)} )}
> >
@ -30,21 +30,21 @@ export function AddFundsButton(props: { className?: string }) {
<div className="modal"> <div className="modal">
<div className="modal-box"> <div className="modal-box">
<div className="text-xl mb-6">Get Manifold Dollars</div> <div className="mb-6 text-xl">Get Manifold Dollars</div>
<div className="text-gray-500 mb-6"> <div className="mb-6 text-gray-500">
Use Manifold Dollars to trade in your favorite markets. <br /> (Not Use Manifold Dollars to trade in your favorite markets. <br /> (Not
redeemable for cash.) redeemable for cash.)
</div> </div>
<div className="text-gray-500 text-sm mb-2">Amount</div> <div className="mb-2 text-sm text-gray-500">Amount</div>
<FundsSelector <FundsSelector
selected={amountSelected} selected={amountSelected}
onSelect={setAmountSelected} onSelect={setAmountSelected}
/> />
<div className="mt-6"> <div className="mt-6">
<div className="text-gray-500 text-sm mb-1">Price USD</div> <div className="mb-1 text-sm text-gray-500">Price USD</div>
<div className="text-xl"> <div className="text-xl">
${Math.round(amountSelected / 100)}.00 ${Math.round(amountSelected / 100)}.00
</div> </div>
@ -61,7 +61,7 @@ export function AddFundsButton(props: { className?: string }) {
> >
<button <button
type="submit" type="submit"
className="btn btn-primary px-10 font-medium bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600" className="btn btn-primary bg-gradient-to-r from-teal-500 to-green-500 px-10 font-medium hover:from-teal-600 hover:to-green-600"
> >
Checkout Checkout
</button> </button>

8
web/components/advanced-panel.tsx
View File

@ -9,7 +9,7 @@ export function AdvancedPanel(props: { children: any }) {
<div <div
tabIndex={0} tabIndex={0}
className={clsx( className={clsx(
'relative collapse collapse-arrow', 'collapse collapse-arrow relative',
collapsed ? 'collapse-close' : 'collapse-open' collapsed ? 'collapse-close' : 'collapse-open'
)} )}
> >
@ -17,11 +17,11 @@ export function AdvancedPanel(props: { children: any }) {
onClick={() => setCollapsed((collapsed) => !collapsed)} onClick={() => setCollapsed((collapsed) => !collapsed)}
className="cursor-pointer" className="cursor-pointer"
> >
<div className="mt-4 mr-6 text-sm text-gray-500 text-right"> <div className="mt-4 mr-6 text-right text-sm text-gray-500">
Advanced Advanced
</div> </div>
<div <div
className="collapse-title p-0 absolute w-0 h-0 min-h-0" className="collapse-title absolute h-0 min-h-0 w-0 p-0"
style={{ style={{
top: -2, top: -2,
right: -15, right: -15,
@ -30,7 +30,7 @@ export function AdvancedPanel(props: { children: any }) {
/> />
</div> </div>
<div className="collapse-content !p-0 m-0 !bg-transparent"> <div className="collapse-content m-0 !bg-transparent !p-0">
{children} {children}
</div> </div>
</div> </div>

8
web/components/amount-input.tsx
View File

@ -52,7 +52,7 @@ export function AmountInput(props: {
return ( return (
<Col className={className}> <Col className={className}>
<label className="input-group"> <label className="input-group">
<span className="text-sm bg-gray-200">M$</span> <span className="bg-gray-200 text-sm">M$</span>
<input <input
className={clsx( className={clsx(
'input input-bordered', 'input input-bordered',
@ -69,13 +69,13 @@ export function AmountInput(props: {
/> />
</label> </label>
{error && ( {error && (
<div className="font-medium tracking-wide text-red-500 text-xs whitespace-nowrap mr-auto self-center mt-4"> <div className="mr-auto mt-4 self-center whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
{error} {error}
</div> </div>
)} )}
{user && ( {user && (
<Col className="text-sm mt-3"> <Col className="mt-3 text-sm">
<div className="text-gray-500 whitespace-nowrap mb-2"> <div className="mb-2 whitespace-nowrap text-gray-500">
Remaining balance Remaining balance
</div> </div>
<Row className="gap-4"> <Row className="gap-4">

4
web/components/avatar.tsx
View File

@ -19,11 +19,11 @@ export function Avatar(props: {
Router.push(`/${username}`) Router.push(`/${username}`)
} }
return ( return (
<div className={`rounded-full bg-white flex-shrink-0 w-${s} h-${s}`}> <div className={`flex-shrink-0 rounded-full bg-white w-${s} h-${s}`}>
{avatarUrl ? ( {avatarUrl ? (
<img <img
className={clsx( className={clsx(
'rounded-full flex items-center justify-center object-cover', 'flex items-center justify-center rounded-full object-cover',
`w-${s} h-${s}`, `w-${s} h-${s}`,
!noLink && 'cursor-pointer' !noLink && 'cursor-pointer'
)} )}

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

@ -136,7 +136,7 @@ export function BetPanel(props: {
} }
return ( return (
<Col className={clsx('bg-white px-8 py-6 rounded-md', className)}> <Col className={clsx('rounded-md bg-white px-8 py-6', className)}>
<Title <Title
className={clsx('!mt-0', title ? '!text-xl' : '')} className={clsx('!mt-0', title ? '!text-xl' : '')}
text={panelTitle} text={panelTitle}
@ -149,7 +149,7 @@ export function BetPanel(props: {
onSelect={(choice) => onBetChoice(choice)} onSelect={(choice) => onBetChoice(choice)}
/> />
<div className="my-3 text-sm text-gray-500 text-left">Amount </div> <div className="my-3 text-left text-sm text-gray-500">Amount </div>
<AmountInput <AmountInput
inputClassName="w-full" inputClassName="w-full"
amount={betAmount} amount={betAmount}
@ -201,7 +201,7 @@ export function BetPanel(props: {
? 'btn-disabled' ? 'btn-disabled'
: betChoice === 'YES' : betChoice === 'YES'
? 'btn-primary' ? 'btn-primary'
: 'bg-red-400 hover:bg-red-500 border-none', : 'border-none bg-red-400 hover:bg-red-500',
isSubmitting ? 'loading' : '' isSubmitting ? 'loading' : ''
)} )}
onClick={betDisabled ? undefined : submitBet} onClick={betDisabled ? undefined : submitBet}
@ -210,7 +210,7 @@ export function BetPanel(props: {
</button> </button>
) : ( ) : (
<button <button
className="btn mt-4 border-none normal-case text-lg font-medium whitespace-nowrap px-10 bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600" className="btn mt-4 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
onClick={firebaseLogin} onClick={firebaseLogin}
> >
Sign in to trade! Sign in to trade!

12
web/components/bet-row.tsx
View File

@ -21,8 +21,8 @@ export default function BetRow(props: {
return ( return (
<> <>
<div className={className}> <div className={className}>
<Row className="items-center gap-2 justify-end"> <Row className="items-center justify-end gap-2">
<div className={clsx('text-gray-400 mr-2', labelClassName)}> <div className={clsx('mr-2 text-gray-400', labelClassName)}>
Place a trade Place a trade
</div> </div>
<YesNoSelector <YesNoSelector
@ -58,10 +58,10 @@ export function Modal(props: {
<Transition.Root show={open} as={Fragment}> <Transition.Root show={open} as={Fragment}>
<Dialog <Dialog
as="div" as="div"
className="fixed z-50 inset-0 overflow-y-auto" className="fixed inset-0 z-50 overflow-y-auto"
onClose={setOpen} onClose={setOpen}
> >
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -76,7 +76,7 @@ export function Modal(props: {
{/* This element is to trick the browser into centering the modal contents. */} {/* This element is to trick the browser into centering the modal contents. */}
<span <span
className="hidden sm:inline-block sm:align-middle sm:h-screen" className="hidden sm:inline-block sm:h-screen sm:align-middle"
aria-hidden="true" aria-hidden="true"
> >
&#8203; &#8203;
@ -90,7 +90,7 @@ export function Modal(props: {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<div className="inline-block align-bottom text-left overflow-hidden transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full sm:p-6"> <div className="inline-block transform overflow-hidden text-left align-bottom transition-all sm:my-8 sm:w-full sm:max-w-md sm:p-6 sm:align-middle">
{children} {children}
</div> </div>
</Transition.Child> </Transition.Child>

22
web/components/bets-list.tsx
View File

@ -121,7 +121,7 @@ export function BetsList(props: { user: User }) {
return ( return (
<Col className="mt-6 gap-6"> <Col className="mt-6 gap-6">
<Col className="mx-4 md:mx-0 sm:flex-row sm:justify-between gap-4"> <Col className="mx-4 gap-4 sm:flex-row sm:justify-between md:mx-0">
<Row className="gap-8"> <Row className="gap-8">
<Col> <Col>
<div className="text-sm text-gray-500">Currently invested</div> <div className="text-sm text-gray-500">Currently invested</div>
@ -164,7 +164,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
<div <div
tabIndex={0} tabIndex={0}
className={clsx( className={clsx(
'p-6 bg-white card card-body shadow-xl collapse collapse-arrow cursor-pointer relative', 'card card-body collapse collapse-arrow relative cursor-pointer bg-white p-6 shadow-xl',
collapsed ? 'collapse-close' : 'collapse-open pb-2' collapsed ? 'collapse-close' : 'collapse-open pb-2'
)} )}
onClick={() => setCollapsed((collapsed) => !collapsed)} onClick={() => setCollapsed((collapsed) => !collapsed)}
@ -183,12 +183,12 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
{/* Show carrot for collapsing. Hack the positioning. */} {/* Show carrot for collapsing. Hack the positioning. */}
<div <div
className="collapse-title p-0 absolute w-0 h-0 min-h-0" className="collapse-title absolute h-0 min-h-0 w-0 p-0"
style={{ top: -10, right: 4 }} style={{ top: -10, right: 4 }}
/> />
</Row> </Row>
<Row className="gap-2 text-gray-500 text-sm items-center"> <Row className="items-center gap-2 text-sm text-gray-500">
{resolution ? ( {resolution ? (
<div> <div>
Resolved <OutcomeLabel outcome={resolution} /> Resolved <OutcomeLabel outcome={resolution} />
@ -205,7 +205,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
</Col> </Col>
<MyBetsSummary <MyBetsSummary
className="flex-1 justify-end mr-5 sm:mr-8" className="mr-5 flex-1 justify-end sm:mr-8"
contract={contract} contract={contract}
bets={bets} bets={bets}
/> />
@ -259,7 +259,7 @@ export function MyBetsSummary(props: {
)} )}
> >
<Col> <Col>
<div className="text-sm text-gray-500 whitespace-nowrap">Invested</div> <div className="whitespace-nowrap text-sm text-gray-500">Invested</div>
<div className="whitespace-nowrap">{formatMoney(betsTotal)}</div> <div className="whitespace-nowrap">{formatMoney(betsTotal)}</div>
</Col> </Col>
{resolution ? ( {resolution ? (
@ -270,20 +270,20 @@ export function MyBetsSummary(props: {
) : ( ) : (
<Row className="gap-4 sm:gap-6"> <Row className="gap-4 sm:gap-6">
<Col> <Col>
<div className="text-sm text-gray-500 whitespace-nowrap"> <div className="whitespace-nowrap text-sm text-gray-500">
Payout if <YesLabel /> Payout if <YesLabel />
</div> </div>
<div className="whitespace-nowrap">{formatMoney(yesWinnings)}</div> <div className="whitespace-nowrap">{formatMoney(yesWinnings)}</div>
</Col> </Col>
<Col> <Col>
<div className="text-sm text-gray-500 whitespace-nowrap"> <div className="whitespace-nowrap text-sm text-gray-500">
Payout if <NoLabel /> Payout if <NoLabel />
</div> </div>
<div className="whitespace-nowrap">{formatMoney(noWinnings)}</div> <div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
</Col> </Col>
{showMKT && ( {showMKT && (
<Col> <Col>
<div className="text-sm text-gray-500 whitespace-nowrap"> <div className="whitespace-nowrap text-sm text-gray-500">
Payout if <MarketLabel /> Payout if <MarketLabel />
</div> </div>
<div className="whitespace-nowrap"> <div className="whitespace-nowrap">
@ -313,7 +313,7 @@ export function ContractBetsTable(props: {
return ( return (
<div className={clsx('overflow-x-auto', className)}> <div className={clsx('overflow-x-auto', className)}>
<table className="table table-zebra table-compact text-gray-500 w-full"> <table className="table-zebra table-compact table w-full text-gray-500">
<thead> <thead>
<tr className="p-2"> <tr className="p-2">
<th>Date</th> <th>Date</th>
@ -415,7 +415,7 @@ function SellButton(props: { contract: Contract; bet: Bet }) {
setIsSubmitting(false) setIsSubmitting(false)
}} }}
> >
<div className="text-2xl mb-4"> <div className="mb-4 text-2xl">
Sell <OutcomeLabel outcome={bet.outcome} /> Sell <OutcomeLabel outcome={bet.outcome} />
</div> </div>
<div> <div>

16
web/components/contract-card.tsx
View File

@ -31,7 +31,7 @@ export function ContractCard(props: {
<div> <div>
<div <div
className={clsx( className={clsx(
'bg-white hover:bg-gray-100 shadow-md rounded-lg p-6 relative', 'relative rounded-lg bg-white p-6 shadow-md hover:bg-gray-100',
className className
)} )}
> >
@ -118,9 +118,9 @@ function AbbrContractDetails(props: {
const { truePool } = contractMetrics(contract) const { truePool } = contractMetrics(contract)
return ( return (
<Col className={clsx('text-sm text-gray-500 gap-2')}> <Col className={clsx('gap-2 text-sm text-gray-500')}>
<Row className="justify-between items-center"> <Row className="items-center justify-between">
<Row className="gap-2 items-center"> <Row className="items-center gap-2">
<Avatar <Avatar
username={creatorUsername} username={creatorUsername}
avatarUrl={contract.creatorAvatarUrl} avatarUrl={contract.creatorAvatarUrl}
@ -135,12 +135,12 @@ function AbbrContractDetails(props: {
{showHotVolume ? ( {showHotVolume ? (
<div className="whitespace-nowrap"> <div className="whitespace-nowrap">
<TrendingUpIcon className="h-5 w-5 text-gray-500 inline" />{' '} <TrendingUpIcon className="inline h-5 w-5 text-gray-500" />{' '}
{formatMoney(volume24Hours)} {formatMoney(volume24Hours)}
</div> </div>
) : showCloseTime ? ( ) : showCloseTime ? (
<div className="whitespace-nowrap"> <div className="whitespace-nowrap">
<ClockIcon className="h-5 w-5 -my-1 text-gray-500 inline" /> Closes{' '} <ClockIcon className="-my-1 inline h-5 w-5 text-gray-500" /> Closes{' '}
{fromNow(closeTime || 0)} {fromNow(closeTime || 0)}
</div> </div>
) : ( ) : (
@ -157,8 +157,8 @@ export function ContractDetails(props: { contract: Contract }) {
const { truePool, createdDate, resolvedDate } = contractMetrics(contract) const { truePool, createdDate, resolvedDate } = contractMetrics(contract)
return ( return (
<Col className="text-sm text-gray-500 gap-2 sm:flex-row sm:flex-wrap"> <Col className="gap-2 text-sm text-gray-500 sm:flex-row sm:flex-wrap">
<Row className="gap-2 flex-wrap items-center"> <Row className="flex-wrap items-center gap-2">
<Avatar <Avatar
username={creatorUsername} username={creatorUsername}
avatarUrl={contract.creatorAvatarUrl} avatarUrl={contract.creatorAvatarUrl}

26
web/components/contract-feed.tsx
View File

@ -85,7 +85,7 @@ function Timestamp(props: { time: number }) {
const { time } = props const { time } = props
return ( return (
<DateTimeTooltip time={time}> <DateTimeTooltip time={time}>
<span className="whitespace-nowrap text-gray-400 ml-1"> <span className="ml-1 whitespace-nowrap text-gray-400">
{fromNow(time)} {fromNow(time)}
</span> </span>
</DateTimeTooltip> </DateTimeTooltip>
@ -116,7 +116,7 @@ function FeedBet(props: { activityItem: any }) {
<Avatar avatarUrl={user?.avatarUrl} /> <Avatar avatarUrl={user?.avatarUrl} />
) : ( ) : (
<div className="relative px-1"> <div className="relative px-1">
<div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center"> <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
<UserIcon className="h-5 w-5 text-gray-500" aria-hidden="true" /> <UserIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
</div> </div>
</div> </div>
@ -171,7 +171,7 @@ function EditContract(props: {
return editing ? ( return editing ? (
<div className="mt-4"> <div className="mt-4">
<Textarea <Textarea
className="textarea h-24 textarea-bordered w-full mb-1" className="textarea textarea-bordered mb-1 h-24 w-full"
rows={3} rows={3}
value={text} value={text}
onChange={(e) => setText(e.target.value || '')} onChange={(e) => setText(e.target.value || '')}
@ -238,7 +238,7 @@ export function ContractDescription(props: {
if (!isCreator && !contract.description.trim()) return null if (!isCreator && !contract.description.trim()) return null
return ( return (
<div className="whitespace-pre-line break-words mt-2 text-gray-700"> <div className="mt-2 whitespace-pre-line break-words text-gray-700">
<Linkify text={contract.description} /> <Linkify text={contract.description} />
<br /> <br />
{isCreator && ( {isCreator && (
@ -289,7 +289,7 @@ function TruncatedComment(props: {
} }
return ( return (
<div className="whitespace-pre-line break-words mt-2 text-gray-700"> <div className="mt-2 whitespace-pre-line break-words text-gray-700">
<Linkify text={truncated} /> <Linkify text={truncated} />
{truncated != comment && ( {truncated != comment && (
<SiteLink href={moreHref} className="text-indigo-700"> <SiteLink href={moreHref} className="text-indigo-700">
@ -309,7 +309,7 @@ function FeedQuestion(props: { contract: Contract }) {
// Currently hidden on mobile; ideally we'd fit this in somewhere. // Currently hidden on mobile; ideally we'd fit this in somewhere.
const closeMessage = const closeMessage =
contract.isResolved || !contract.closeTime ? null : ( contract.isResolved || !contract.closeTime ? null : (
<span className="float-right text-gray-400 hidden sm:inline"> <span className="float-right hidden text-gray-400 sm:inline">
{formatMoney(truePool)} pool {formatMoney(truePool)} pool
<span className="mx-2">•</span> <span className="mx-2">•</span>
{contract.closeTime > Date.now() ? 'Closes' : 'Closed'} {contract.closeTime > Date.now() ? 'Closes' : 'Closed'}
@ -324,7 +324,7 @@ function FeedQuestion(props: { contract: Contract }) {
avatarUrl={contract.creatorAvatarUrl} avatarUrl={contract.creatorAvatarUrl}
/> />
<div className="min-w-0 flex-1 py-1.5"> <div className="min-w-0 flex-1 py-1.5">
<div className="text-sm text-gray-500 mb-2"> <div className="mb-2 text-sm text-gray-500">
<UserLink <UserLink
className="text-gray-900" className="text-gray-900"
name={creatorName} name={creatorName}
@ -333,10 +333,10 @@ function FeedQuestion(props: { contract: Contract }) {
asked asked
{closeMessage} {closeMessage}
</div> </div>
<Col className="items-start sm:flex-row justify-between gap-2 sm:gap-4 mb-4"> <Col className="mb-4 items-start justify-between gap-2 sm:flex-row sm:gap-4">
<SiteLink <SiteLink
href={contractPath(contract)} href={contractPath(contract)}
className="text-lg sm:text-xl text-indigo-700" className="text-lg text-indigo-700 sm:text-xl"
> >
{question} {question}
</SiteLink> </SiteLink>
@ -405,7 +405,7 @@ function FeedResolve(props: { contract: Contract }) {
<> <>
<div> <div>
<div className="relative px-1"> <div className="relative px-1">
<div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center"> <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
<OutcomeIcon outcome={resolution} /> <OutcomeIcon outcome={resolution} />
</div> </div>
</div> </div>
@ -432,7 +432,7 @@ function FeedClose(props: { contract: Contract }) {
<> <>
<div> <div>
<div className="relative px-1"> <div className="relative px-1">
<div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center"> <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
<LockClosedIcon <LockClosedIcon
className="h-5 w-5 text-gray-500" className="h-5 w-5 text-gray-500"
aria-hidden="true" aria-hidden="true"
@ -575,7 +575,7 @@ function FeedBetGroup(props: { activityItem: any }) {
<> <>
<div> <div>
<div className="relative px-1"> <div className="relative px-1">
<div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center"> <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
<UsersIcon className="h-5 w-5 text-gray-500" aria-hidden="true" /> <UsersIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
</div> </div>
</div> </div>
@ -599,7 +599,7 @@ function FeedExpand(props: { setExpanded: (expanded: boolean) => void }) {
<> <>
<button onClick={() => setExpanded(true)}> <button onClick={() => setExpanded(true)}>
<div className="relative px-1"> <div className="relative px-1">
<div className="h-8 w-8 bg-gray-200 hover:bg-gray-300 rounded-full flex items-center justify-center"> <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300">
<DotsVerticalIcon <DotsVerticalIcon
className="h-5 w-5 text-gray-500" className="h-5 w-5 text-gray-500"
aria-hidden="true" aria-hidden="true"

12
web/components/contract-overview.tsx
View File

@ -50,11 +50,11 @@ export const ContractOverview = (props: {
<Col className={clsx('mb-6', className)}> <Col className={clsx('mb-6', className)}>
<Row className="justify-between gap-4 px-2"> <Row className="justify-between gap-4 px-2">
<Col className="gap-4"> <Col className="gap-4">
<div className="text-2xl md:text-3xl text-indigo-700"> <div className="text-2xl text-indigo-700 md:text-3xl">
<Linkify text={contract.question} /> <Linkify text={contract.question} />
</div> </div>
<Row className="justify-between items-center gap-4"> <Row className="items-center justify-between gap-4">
<ResolutionOrChance <ResolutionOrChance
className="md:hidden" className="md:hidden"
resolution={resolution} resolution={resolution}
@ -74,7 +74,7 @@ export const ContractOverview = (props: {
<ContractDetails contract={contract} /> <ContractDetails contract={contract} />
</Col> </Col>
<Col className="hidden md:flex justify-between items-end"> <Col className="hidden items-end justify-between md:flex">
<ResolutionOrChance <ResolutionOrChance
className="items-end" className="items-end"
resolution={resolution} resolution={resolution}
@ -88,7 +88,7 @@ export const ContractOverview = (props: {
<ContractProbGraph contract={contract} bets={bets} /> <ContractProbGraph contract={contract} bets={bets} />
<Row className="hidden sm:flex justify-between items-center mt-6 ml-4 gap-4"> <Row className="mt-6 ml-4 hidden items-center justify-between gap-4 sm:flex">
{folds.length === 0 ? ( {folds.length === 0 ? (
<TagsInput className={clsx('mx-4')} contract={contract} /> <TagsInput className={clsx('mx-4')} contract={contract} />
) : ( ) : (
@ -97,7 +97,7 @@ export const ContractOverview = (props: {
<TweetButton tweetText={tweetText} /> <TweetButton tweetText={tweetText} />
</Row> </Row>
<Col className="sm:hidden mt-6 ml-4 gap-4"> <Col className="mt-6 ml-4 gap-4 sm:hidden">
<TweetButton className="self-end" tweetText={tweetText} /> <TweetButton className="self-end" tweetText={tweetText} />
{folds.length === 0 ? ( {folds.length === 0 ? (
<TagsInput contract={contract} /> <TagsInput contract={contract} />
@ -107,7 +107,7 @@ export const ContractOverview = (props: {
</Col> </Col>
{folds.length > 0 && ( {folds.length > 0 && (
<RevealableTagsInput className="mt-4 mx-4" contract={contract} /> <RevealableTagsInput className="mx-4 mt-4" contract={contract} />
)} )}
<Spacer h={12} /> <Spacer h={12} />

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

@ -32,14 +32,14 @@ export function ContractsGrid(props: {
if (contracts.length === 0) { if (contracts.length === 0) {
return ( return (
<p className="text-gray-500 mx-2"> <p className="mx-2 text-gray-500">
No markets found. Why not create one? No markets found. Why not create one?
</p> </p>
) )
} }
return ( return (
<ul className="w-full grid grid-cols-1 gap-6 md:grid-cols-2"> <ul className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
{contracts.map((contract) => ( {contracts.map((contract) => (
<ContractCard <ContractCard
contract={contract} contract={contract}
@ -250,7 +250,7 @@ export function SearchableGrid(props: {
return ( return (
<div> <div>
{/* Show a search input next to a sort dropdown */} {/* Show a search input next to a sort dropdown */}
<div className="flex justify-between gap-2 mt-2 mb-8"> <div className="mt-2 mb-8 flex justify-between gap-2">
<input <input
type="text" type="text"
value={query} value={query}

4
web/components/create-fold-button.tsx
View File

@ -51,7 +51,7 @@ export function CreateFoldButton() {
id="create-fold" id="create-fold"
openModelBtn={{ openModelBtn={{
label: 'New', label: 'New',
icon: <PlusCircleIcon className="w-5 h-5 mr-2" />, icon: <PlusCircleIcon className="mr-2 h-5 w-5" />,
className: clsx( className: clsx(
isSubmitting ? 'loading btn-disabled' : 'btn-primary', isSubmitting ? 'loading btn-disabled' : 'btn-primary',
'btn-sm' 'btn-sm'
@ -65,7 +65,7 @@ export function CreateFoldButton() {
> >
<Title className="!mt-0" text="Create a community" /> <Title className="!mt-0" text="Create a community" />
<Col className="text-gray-500 gap-1"> <Col className="gap-1 text-gray-500">
<div> <div>
Markets are included in a community if they match one or more tags. Markets are included in a community if they match one or more tags.
</div> </div>

2
web/components/datetime-tooltip.tsx
View File

@ -20,7 +20,7 @@ export function DateTimeTooltip(props: {
return ( return (
<> <>
<span <span
className="tooltip cursor-default hidden sm:inline-block" className="tooltip hidden cursor-default sm:inline-block"
data-tip={toolTip} data-tip={toolTip}
> >
{props.children} {props.children}

6
web/components/edit-fold-button.tsx
View File

@ -48,10 +48,10 @@ export function EditFoldButton(props: { fold: Fold; className?: string }) {
<label <label
htmlFor="edit" htmlFor="edit"
className={clsx( className={clsx(
'modal-button text-sm text-gray-700 cursor-pointer whitespace-nowrap' 'modal-button cursor-pointer whitespace-nowrap text-sm text-gray-700'
)} )}
> >
<PencilIcon className="h-4 w-4 inline" /> Edit <PencilIcon className="inline h-4 w-4" /> Edit
</label> </label>
<input type="checkbox" id="edit" className="modal-toggle" /> <input type="checkbox" id="edit" className="modal-toggle" />
@ -118,7 +118,7 @@ export function EditFoldButton(props: { fold: Fold; className?: string }) {
} }
}} }}
className={clsx( className={clsx(
'btn btn-sm btn-outline hover:bg-red-500 hover:border-red-500 mr-auto self-center' 'btn btn-sm btn-outline mr-auto self-center hover:border-red-500 hover:bg-red-500'
)} )}
> >
Delete Delete

8
web/components/feed-create.tsx
View File

@ -16,12 +16,12 @@ export function FeedPromo(props: { hotContracts: Contract[] }) {
<Col className="w-full bg-white p-6 sm:rounded-lg"> <Col className="w-full bg-white p-6 sm:rounded-lg">
<h1 className="mt-4 text-4xl sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl"> <h1 className="mt-4 text-4xl sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
<div className="mb-2">Create your own</div> <div className="mb-2">Create your own</div>
<div className="font-bold bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-green-400"> <div className="bg-gradient-to-r from-teal-400 to-green-400 bg-clip-text font-bold text-transparent">
prediction markets prediction markets
</div> </div>
</h1> </h1>
<Spacer h={6} /> <Spacer h={6} />
<div className="text-gray-500 mb-4"> <div className="mb-4 text-gray-500">
Find prediction markets run by your favorite creators, or make your Find prediction markets run by your favorite creators, or make your
own. own.
<br /> <br />
@ -81,7 +81,7 @@ export default function FeedCreate(props: {
return ( return (
<div <div
className={clsx('w-full bg-white p-4 shadow-md mt-2', className)} className={clsx('mt-2 w-full bg-white p-4 shadow-md', className)}
onClick={() => !question && inputRef.current?.focus()} onClick={() => !question && inputRef.current?.focus()}
> >
<div className="relative flex items-start space-x-3"> <div className="relative flex items-start space-x-3">
@ -94,7 +94,7 @@ export default function FeedCreate(props: {
</div> </div>
<textarea <textarea
ref={inputRef as any} ref={inputRef as any}
className="text-lg sm:text-xl text-indigo-700 w-full border-transparent focus:border-transparent bg-transparent p-0 appearance-none resize-none focus:ring-transparent placeholder:text-gray-400" className="w-full resize-none appearance-none border-transparent bg-transparent p-0 text-lg text-indigo-700 placeholder:text-gray-400 focus:border-transparent focus:ring-transparent sm:text-xl"
placeholder={placeholder} placeholder={placeholder}
value={question} value={question}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}

2
web/components/fold-tag.tsx
View File

@ -7,7 +7,7 @@ export function FoldTag(props: { fold: Fold }) {
return ( return (
<div <div
className={clsx( className={clsx(
'bg-white hover:bg-gray-100 px-4 py-2 rounded-full shadow-md', 'rounded-full bg-white px-4 py-2 shadow-md hover:bg-gray-100',
'cursor-pointer' 'cursor-pointer'
)} )}
> >

4
web/components/leaderboard.tsx
View File

@ -19,10 +19,10 @@ export function Leaderboard(props: {
<div className={clsx('w-full px-1', className)}> <div className={clsx('w-full px-1', className)}>
<Title text={title} className="!mt-0" /> <Title text={title} className="!mt-0" />
{users.length === 0 ? ( {users.length === 0 ? (
<div className="text-gray-500 ml-2">None yet</div> <div className="ml-2 text-gray-500">None yet</div>
) : ( ) : (
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="table table-zebra table-compact text-gray-500 w-full"> <table className="table-zebra table-compact table w-full text-gray-500">
<thead> <thead>
<tr className="p-2"> <tr className="p-2">
<th>#</th> <th>#</th>

4
web/components/loading-indicator.tsx
View File

@ -4,9 +4,9 @@ export function LoadingIndicator(props: { className?: string }) {
const { className } = props const { className } = props
return ( return (
<div className={clsx('flex justify-center items-center', className)}> <div className={clsx('flex items-center justify-center', className)}>
<div <div
className="spinner-border animate-spin inline-block w-8 h-8 border-4 border-solid border-r-transparent rounded-full border-indigo-500" className="spinner-border inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-indigo-500 border-r-transparent"
role="status" role="status"
/> />
</div> </div>

8
web/components/manifold-logo.tsx
View File

@ -13,16 +13,16 @@ export function ManifoldLogo(props: {
return ( return (
<Link href={user ? '/home' : '/'}> <Link href={user ? '/home' : '/'}>
<a className={clsx('flex flex-row gap-4 flex-shrink-0', className)}> <a className={clsx('flex flex-shrink-0 flex-row gap-4', className)}>
<img <img
className="hover:rotate-12 transition-all" className="transition-all hover:rotate-12"
src={darkBackground ? '/logo-white.svg' : '/logo.svg'} src={darkBackground ? '/logo-white.svg' : '/logo.svg'}
width={45} width={45}
height={45} height={45}
/> />
<div <div
className={clsx( className={clsx(
'sm:hidden font-major-mono lowercase mt-1 text-lg', 'font-major-mono mt-1 text-lg lowercase sm:hidden',
darkBackground && 'text-white' darkBackground && 'text-white'
)} )}
> >
@ -32,7 +32,7 @@ export function ManifoldLogo(props: {
</div> </div>
<div <div
className={clsx( className={clsx(
'hidden sm:flex font-major-mono lowercase mt-1 sm:text-2xl md:whitespace-nowrap', 'font-major-mono mt-1 hidden lowercase sm:flex sm:text-2xl md:whitespace-nowrap',
darkBackground && 'text-white' darkBackground && 'text-white'
)} )}
> >

6
web/components/menu.tsx
View File

@ -9,9 +9,9 @@ export function MenuButton(props: {
}) { }) {
const { buttonContent, menuItems, className } = props const { buttonContent, menuItems, className } = props
return ( return (
<Menu as="div" className={clsx('flex-shrink-0 relative z-40', className)}> <Menu as="div" className={clsx('relative z-40 flex-shrink-0', className)}>
<div> <div>
<Menu.Button className="rounded-full flex"> <Menu.Button className="flex rounded-full">
<span className="sr-only">Open user menu</span> <span className="sr-only">Open user menu</span>
{buttonContent} {buttonContent}
</Menu.Button> </Menu.Button>
@ -25,7 +25,7 @@ export function MenuButton(props: {
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1 focus:outline-none"> <Menu.Items className="absolute right-0 mt-2 w-40 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
{menuItems.map((item) => ( {menuItems.map((item) => (
<Menu.Item key={item.name}> <Menu.Item key={item.name}>
{({ active }) => ( {({ active }) => (

32
web/components/nav-bar.tsx
View File

@ -29,16 +29,16 @@ export function NavBar(props: {
return ( return (
<> <>
<nav className={clsx('w-full p-4 mb-4', className)} aria-label="Global"> <nav className={clsx('mb-4 w-full p-4', className)} aria-label="Global">
<Row <Row
className={clsx( className={clsx(
'justify-between items-center mx-auto sm:px-4', 'mx-auto items-center justify-between sm:px-4',
wide ? 'max-w-6xl' : 'max-w-4xl' wide ? 'max-w-6xl' : 'max-w-4xl'
)} )}
> >
<ManifoldLogo className="my-1" darkBackground={darkBackground} /> <ManifoldLogo className="my-1" darkBackground={darkBackground} />
<Row className="items-center gap-6 sm:gap-8 ml-6"> <Row className="ml-6 items-center gap-6 sm:gap-8">
{(user || user === null || assertUser) && ( {(user || user === null || assertUser) && (
<NavOptions <NavOptions
user={user} user={user}
@ -58,13 +58,13 @@ export function NavBar(props: {
function BottomNavBar(props: { user: User }) { function BottomNavBar(props: { user: User }) {
const { user } = props const { user } = props
return ( return (
<nav className="md:hidden fixed bottom-0 inset-x-0 bg-white z-20 flex justify-between text-xs text-gray-700 border-t-2"> <nav className="fixed inset-x-0 bottom-0 z-20 flex justify-between border-t-2 bg-white text-xs text-gray-700 md:hidden">
<Link href="/home"> <Link href="/home">
<a <a
href="#" href="#"
className="w-full block py-2 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700 transition duration-300" className="block w-full py-2 px-3 text-center transition duration-300 hover:bg-indigo-200 hover:text-indigo-700"
> >
<HomeIcon className="h-6 w-6 my-1 mx-auto" aria-hidden="true" /> <HomeIcon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
{/* Home */} {/* Home */}
</a> </a>
</Link> </Link>
@ -72,9 +72,9 @@ function BottomNavBar(props: { user: User }) {
<Link href="/markets"> <Link href="/markets">
<a <a
href="#" href="#"
className="w-full block py-2 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700" className="block w-full py-2 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700"
> >
<SearchIcon className="h-6 w-6 my-1 mx-auto" aria-hidden="true" /> <SearchIcon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
{/* Explore */} {/* Explore */}
</a> </a>
</Link> </Link>
@ -82,9 +82,9 @@ function BottomNavBar(props: { user: User }) {
<Link href="/folds"> <Link href="/folds">
<a <a
href="#" href="#"
className="w-full block py-2 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700" className="block w-full py-2 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700"
> >
<UserGroupIcon className="h-6 w-6 my-1 mx-auto" aria-hidden="true" /> <UserGroupIcon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
{/* Folds */} {/* Folds */}
</a> </a>
</Link> </Link>
@ -92,9 +92,9 @@ function BottomNavBar(props: { user: User }) {
<Link href="/trades"> <Link href="/trades">
<a <a
href="#" href="#"
className="w-full block py-2 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700" className="block w-full py-2 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700"
> >
<CollectionIcon className="h-6 w-6 my-1 mx-auto" aria-hidden="true" /> <CollectionIcon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
{/* Your Trades */} {/* Your Trades */}
</a> </a>
</Link> </Link>
@ -118,7 +118,7 @@ function NavOptions(props: {
<Link href="/about"> <Link href="/about">
<a <a
className={clsx( className={clsx(
'text-base hidden md:block whitespace-nowrap', 'hidden whitespace-nowrap text-base md:block',
themeClasses themeClasses
)} )}
> >
@ -130,7 +130,7 @@ function NavOptions(props: {
<Link href="/folds"> <Link href="/folds">
<a <a
className={clsx( className={clsx(
'text-base hidden md:block whitespace-nowrap', 'hidden whitespace-nowrap text-base md:block',
themeClasses themeClasses
)} )}
> >
@ -141,7 +141,7 @@ function NavOptions(props: {
<Link href="/markets"> <Link href="/markets">
<a <a
className={clsx( className={clsx(
'text-base hidden md:block whitespace-nowrap', 'hidden whitespace-nowrap text-base md:block',
themeClasses themeClasses
)} )}
> >
@ -152,7 +152,7 @@ function NavOptions(props: {
{showSignedOut && ( {showSignedOut && (
<> <>
<button <button
className="btn btn-sm btn-outline normal-case text-base font-medium px-6 bg-gradient-to-r" className="btn btn-sm btn-outline bg-gradient-to-r px-6 text-base font-medium normal-case"
onClick={firebaseLogin} onClick={firebaseLogin}
> >
Sign in Sign in

2
web/components/page.tsx
View File

@ -15,7 +15,7 @@ export function Page(props: {
<div <div
className={clsx( className={clsx(
'w-full mx-auto pb-16', 'mx-auto w-full pb-16',
wide ? 'max-w-6xl' : 'max-w-4xl', wide ? 'max-w-6xl' : 'max-w-4xl',
margin && 'px-4' margin && 'px-4'
)} )}

6
web/components/profile-menu.tsx
View File

@ -16,7 +16,7 @@ export function ProfileMenu(props: { user: User | undefined }) {
/> />
<MenuButton <MenuButton
className="md:hidden mr-2" className="mr-2 md:hidden"
menuItems={getNavigationOptions(user, { mobile: true })} menuItems={getNavigationOptions(user, { mobile: true })}
buttonContent={<ProfileSummary user={user} />} buttonContent={<ProfileSummary user={user} />}
/> />
@ -81,12 +81,12 @@ function getNavigationOptions(
function ProfileSummary(props: { user: User | undefined }) { function ProfileSummary(props: { user: User | undefined }) {
const { user } = props const { user } = props
return ( return (
<Col className="avatar items-center sm:flex-row gap-2 sm:gap-4"> <Col className="avatar items-center gap-2 sm:flex-row sm:gap-4">
<Avatar avatarUrl={user?.avatarUrl} username={user?.username} noLink /> <Avatar avatarUrl={user?.avatarUrl} username={user?.username} noLink />
<div className="truncate text-left sm:w-32"> <div className="truncate text-left sm:w-32">
<div className="hidden sm:flex">{user?.name}</div> <div className="hidden sm:flex">{user?.name}</div>
<div className="text-gray-700 text-sm"> <div className="text-sm text-gray-700">
{user ? formatMoney(Math.floor(user.balance)) : ' '} {user ? formatMoney(Math.floor(user.balance)) : ' '}
</div> </div>
</div> </div>

2
web/components/resolution-panel.tsx
View File

@ -63,7 +63,7 @@ export function ResolutionPanel(props: {
: 'btn-disabled' : 'btn-disabled'
return ( return (
<Col className={clsx('bg-white px-8 py-6 rounded-md', className)}> <Col className={clsx('rounded-md bg-white px-8 py-6', className)}>
<Title className="mt-0" text="Your market" /> <Title className="mt-0" text="Your market" />
<div className="pt-2 pb-1 text-sm text-gray-500">Resolve outcome</div> <div className="pt-2 pb-1 text-sm text-gray-500">Resolve outcome</div>

4
web/components/site-link.tsx
View File

@ -12,7 +12,7 @@ export const SiteLink = (props: {
<a <a
href={href} href={href}
className={clsx( className={clsx(
'hover:underline hover:decoration-indigo-400 hover:decoration-2 z-10', 'z-10 hover:underline hover:decoration-indigo-400 hover:decoration-2',
className className
)} )}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
@ -23,7 +23,7 @@ export const SiteLink = (props: {
<Link href={href}> <Link href={href}>
<a <a
className={clsx( className={clsx(
'hover:underline hover:decoration-indigo-400 hover:decoration-2 z-10', 'z-10 hover:underline hover:decoration-indigo-400 hover:decoration-2',
className className
)} )}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}

2
web/components/tags-input.tsx
View File

@ -57,7 +57,7 @@ export function RevealableTagsInput(props: {
return ( return (
<div <div
className={clsx( className={clsx(
'text-gray-500 cursor-pointer hover:underline hover:decoration-indigo-400 hover:decoration-2', 'cursor-pointer text-gray-500 hover:underline hover:decoration-indigo-400 hover:decoration-2',
className className
)} )}
onClick={() => setHidden((hidden) => !hidden)} onClick={() => setHidden((hidden) => !hidden)}

16
web/components/tags-list.tsx
View File

@ -7,11 +7,11 @@ function Hashtag(props: { tag: string; noLink?: boolean }) {
const body = ( const body = (
<div <div
className={clsx( className={clsx(
'bg-gray-100 border-2 px-3 py-1 rounded-full shadow-md', 'rounded-full border-2 bg-gray-100 px-3 py-1 shadow-md',
!noLink && 'cursor-pointer' !noLink && 'cursor-pointer'
)} )}
> >
<span className="text-gray-600 text-sm">{tag}</span> <span className="text-sm text-gray-600">{tag}</span>
</div> </div>
) )
@ -31,8 +31,8 @@ export function TagsList(props: {
}) { }) {
const { tags, className, noLink, noLabel } = props const { tags, className, noLink, noLabel } = props
return ( return (
<Row className={clsx('items-center flex-wrap gap-2', className)}> <Row className={clsx('flex-wrap items-center gap-2', className)}>
{!noLabel && <div className="text-gray-500 mr-1">Tags</div>} {!noLabel && <div className="mr-1 text-gray-500">Tags</div>}
{tags.map((tag) => ( {tags.map((tag) => (
<Hashtag <Hashtag
key={tag} key={tag}
@ -51,11 +51,11 @@ export function FoldTag(props: { fold: { slug: string; name: string } }) {
<SiteLink href={`/fold/${slug}`} className="flex items-center"> <SiteLink href={`/fold/${slug}`} className="flex items-center">
<div <div
className={clsx( className={clsx(
'bg-white border-2 px-4 py-1 rounded-full shadow-md', 'rounded-full border-2 bg-white px-4 py-1 shadow-md',
'cursor-pointer' 'cursor-pointer'
)} )}
> >
<span className="text-gray-500 text-sm">{name}</span> <span className="text-sm text-gray-500">{name}</span>
</div> </div>
</SiteLink> </SiteLink>
) )
@ -68,10 +68,10 @@ export function FoldTagList(props: {
}) { }) {
const { folds, noLabel, className } = props const { folds, noLabel, className } = props
return ( return (
<Row className={clsx('flex-wrap gap-2 items-center', className)}> <Row className={clsx('flex-wrap items-center gap-2', className)}>
{folds.length > 0 && ( {folds.length > 0 && (
<> <>
{!noLabel && <div className="text-gray-500 mr-1">Communities</div>} {!noLabel && <div className="mr-1 text-gray-500">Communities</div>}
{folds.map((fold) => ( {folds.map((fold) => (
<FoldTag key={fold.slug} fold={fold} /> <FoldTag key={fold.slug} fold={fold} />
))} ))}

2
web/components/title.tsx
View File

@ -5,7 +5,7 @@ export function Title(props: { text: string; className?: string }) {
return ( return (
<h1 <h1
className={clsx( className={clsx(
'sm:text-3xl text-2xl text-indigo-700 inline-block sm:my-6 my-4', 'my-4 inline-block text-2xl text-indigo-700 sm:my-6 sm:text-3xl',
className className
)} )}
> >

2
web/components/tweet-button.tsx
View File

@ -6,7 +6,7 @@ export function TweetButton(props: { className?: string; tweetText?: string }) {
return ( return (
<a <a
className={clsx( className={clsx(
'btn btn-xs normal-case border-none flex flex-row flex-nowrap', 'btn btn-xs flex flex-row flex-nowrap border-none normal-case',
className className
)} )}
style={{ backgroundColor: '#1da1f2' }} style={{ backgroundColor: '#1da1f2' }}

20
web/components/yes-no-selector.tsx
View File

@ -16,10 +16,10 @@ export function YesNoSelector(props: {
<Row className={clsx('space-x-3', className)}> <Row className={clsx('space-x-3', className)}>
<button <button
className={clsx( className={clsx(
'flex-1 inline-flex justify-center items-center p-2 hover:bg-primary-focus hover:text-white rounded-lg border-primary hover:border-primary-focus border-2', 'hover:bg-primary-focus border-primary hover:border-primary-focus inline-flex flex-1 items-center justify-center rounded-lg border-2 p-2 hover:text-white',
selected == 'YES' selected == 'YES'
? 'bg-primary text-white' ? 'bg-primary text-white'
: 'bg-transparent text-primary', : 'text-primary bg-transparent',
btnClassName btnClassName
)} )}
onClick={() => onSelect('YES')} onClick={() => onSelect('YES')}
@ -28,7 +28,7 @@ export function YesNoSelector(props: {
</button> </button>
<button <button
className={clsx( className={clsx(
'flex-1 inline-flex justify-center items-center p-2 hover:bg-red-500 hover:text-white rounded-lg border-red-400 hover:border-red-500 border-2', 'inline-flex flex-1 items-center justify-center rounded-lg border-2 border-red-400 p-2 hover:border-red-500 hover:bg-red-500 hover:text-white',
selected == 'NO' selected == 'NO'
? 'bg-red-400 text-white' ? 'bg-red-400 text-white'
: 'bg-transparent text-red-400', : 'bg-transparent text-red-400',
@ -54,7 +54,7 @@ export function YesNoCancelSelector(props: {
return ( return (
<Col> <Col>
<Row className={clsx('space-x-3 w-full', className)}> <Row className={clsx('w-full space-x-3', className)}>
<Button <Button
color={selected === 'YES' ? 'green' : 'gray'} color={selected === 'YES' ? 'green' : 'gray'}
onClick={() => onSelect('YES')} onClick={() => onSelect('YES')}
@ -72,7 +72,7 @@ export function YesNoCancelSelector(props: {
</Button> </Button>
</Row> </Row>
<Row className={clsx('space-x-3 w-full', className)}> <Row className={clsx('w-full space-x-3', className)}>
<Button <Button
color={selected === 'MKT' ? 'blue' : 'gray'} color={selected === 'MKT' ? 'blue' : 'gray'}
onClick={() => onSelect('MKT')} onClick={() => onSelect('MKT')}
@ -132,12 +132,12 @@ function Button(props: {
<button <button
type="button" type="button"
className={clsx( className={clsx(
'flex-1 inline-flex justify-center items-center px-8 py-3 border border-transparent rounded-md shadow-sm text-sm font-medium', 'inline-flex flex-1 items-center justify-center rounded-md border border-transparent px-8 py-3 text-sm font-medium shadow-sm',
color === 'green' && 'btn-primary text-white', color === 'green' && 'btn-primary text-white',
color === 'red' && 'bg-red-400 hover:bg-red-500 text-white', color === 'red' && 'bg-red-400 text-white hover:bg-red-500',
color === 'yellow' && 'bg-yellow-400 hover:bg-yellow-500 text-white', color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500',
color === 'blue' && 'bg-blue-400 hover:bg-blue-500 text-white', color === 'blue' && 'bg-blue-400 text-white hover:bg-blue-500',
color === 'gray' && 'text-gray-700 bg-gray-300 hover:bg-gray-400', color === 'gray' && 'bg-gray-300 text-gray-700 hover:bg-gray-400',
className className
)} )}
onClick={onClick} onClick={onClick}

1
web/package.json
View File

@ -44,6 +44,7 @@
"lint-staged": "12.1.3", "lint-staged": "12.1.3",
"postcss": "8.3.5", "postcss": "8.3.5",
"prettier": "2.5.0", "prettier": "2.5.0",
"prettier-plugin-tailwindcss": "^0.1.5",
"pretty-quick": "3.1.2", "pretty-quick": "3.1.2",
"tailwindcss": "3.0.1", "tailwindcss": "3.0.1",
"tsc-files": "1.1.3", "tsc-files": "1.1.3",

2
web/pages/404.tsx
View File

@ -5,7 +5,7 @@ import { Title } from '../components/title'
export default function Custom404() { export default function Custom404() {
return ( return (
<Page> <Page>
<div className="flex flex-col items-center justify-center h-full"> <div className="flex h-full flex-col items-center justify-center">
<Title text="404: Oops!" /> <Title text="404: Oops!" />
<p>Nothing exists at this location.</p> <p>Nothing exists at this location.</p>
<p>If you didn't expect this, let us know on Discord!</p> <p>If you didn't expect this, let us know on Discord!</p>

4
web/pages/[username]/[contractSlug].tsx
View File

@ -110,8 +110,8 @@ export default function ContractPage(props: {
ogCardProps={ogCardProps} ogCardProps={ogCardProps}
/> />
<Col className="w-full md:flex-row justify-between"> <Col className="w-full justify-between md:flex-row">
<div className="flex-[3] bg-white px-2 py-6 md:px-6 md:py-8 rounded border-0 border-gray-100"> <div className="flex-[3] rounded border-0 border-gray-100 bg-white px-2 py-6 md:px-6 md:py-8">
<ContractOverview <ContractOverview
contract={contract} contract={contract}
bets={bets ?? []} bets={bets ?? []}

2
web/pages/_document.tsx
View File

@ -33,7 +33,7 @@ export default function Document() {
/> />
</Head> </Head>
<body className="min-h-screen font-readex-pro bg-base-200"> <body className="font-readex-pro bg-base-200 min-h-screen">
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>

6
web/pages/account.tsx
View File

@ -6,14 +6,14 @@ import { firebaseLogin } from '../lib/firebase/users'
function SignInCard() { function SignInCard() {
return ( return (
<div className="card glass sm:card-side shadow-xl hover:shadow-xl text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-4 sm:mx-auto my-12"> <div className="card glass sm:card-side text-neutral-content mx-4 my-12 max-w-sm bg-green-600 shadow-xl transition-all hover:bg-green-600 hover:shadow-xl sm:mx-auto">
<div className="p-4"> <div className="p-4">
<img <img
src="/logo-bg-white.png" src="/logo-bg-white.png"
className="rounded-lg shadow-lg w-20 h-20" className="h-20 w-20 rounded-lg shadow-lg"
/> />
</div> </div>
<div className="max-w-md card-body"> <div className="card-body max-w-md">
<h2 className="card-title font-major-mono">Welcome!</h2> <h2 className="card-title font-major-mono">Welcome!</h2>
<p>Sign in to get started</p> <p>Sign in to get started</p>
<div className="card-actions"> <div className="card-actions">

2
web/pages/activity.tsx
View File

@ -97,7 +97,7 @@ export function ActivityFeed(props: {
return contracts.length > 0 ? ( return contracts.length > 0 ? (
<Col className="items-center"> <Col className="items-center">
<Col className="w-full max-w-3xl"> <Col className="w-full max-w-3xl">
<Col className="w-full bg-white self-center divide-gray-300 divide-y"> <Col className="w-full divide-y divide-gray-300 self-center bg-white">
{contracts.map((contract, i) => ( {contracts.map((contract, i) => (
<div key={contract.id} className="py-6 px-2 sm:px-4"> <div key={contract.id} className="py-6 px-2 sm:px-4">
<ContractFeed <ContractFeed

10
web/pages/add-funds.tsx
View File

@ -22,18 +22,18 @@ export default function AddFundsPage() {
<Col> <Col>
<Title text="Get Manifold Dollars" /> <Title text="Get Manifold Dollars" />
<img <img
className="block mt-6" className="mt-6 block"
src="/praying-mantis-light.svg" src="/praying-mantis-light.svg"
width={200} width={200}
height={200} height={200}
/> />
<div className="text-gray-500 mb-6"> <div className="mb-6 text-gray-500">
Use Manifold Dollars to trade in your favorite markets. <br /> (Not Use Manifold Dollars to trade in your favorite markets. <br /> (Not
redeemable for cash.) redeemable for cash.)
</div> </div>
<div className="text-gray-500 text-sm mb-2">Amount</div> <div className="mb-2 text-sm text-gray-500">Amount</div>
<FundsSelector <FundsSelector
className="max-w-md" className="max-w-md"
selected={amountSelected} selected={amountSelected}
@ -41,7 +41,7 @@ export default function AddFundsPage() {
/> />
<div className="mt-6"> <div className="mt-6">
<div className="text-gray-500 text-sm mb-1">Price USD</div> <div className="mb-1 text-sm text-gray-500">Price USD</div>
<div className="text-xl"> <div className="text-xl">
${Math.round(amountSelected / 100)}.00 ${Math.round(amountSelected / 100)}.00
</div> </div>
@ -54,7 +54,7 @@ export default function AddFundsPage() {
> >
<button <button
type="submit" type="submit"
className="btn btn-primary w-full font-medium bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600" className="btn btn-primary w-full bg-gradient-to-r from-teal-500 to-green-500 font-medium hover:from-teal-600 hover:to-green-600"
> >
Checkout Checkout
</button> </button>

22
web/pages/create.tsx
View File

@ -23,10 +23,10 @@ export default function Create() {
return ( return (
<Page> <Page>
<div className="w-full max-w-2xl mx-auto"> <div className="mx-auto w-full max-w-2xl">
<Title text="Create a new prediction market" /> <Title text="Create a new prediction market" />
<div className="bg-gray-100 rounded-lg shadow-md px-6 py-4"> <div className="rounded-lg bg-gray-100 px-6 py-4 shadow-md">
<form> <form>
<div className="form-control w-full"> <div className="form-control w-full">
<label className="label"> <label className="label">
@ -141,13 +141,13 @@ export function NewContract(props: { question: string; tag?: string }) {
<Spacer h={4} /> <Spacer h={4} />
<div className="form-control items-start mb-1"> <div className="form-control mb-1 items-start">
<label className="label gap-2 mb-1"> <label className="label mb-1 gap-2">
<span className="mb-1">Description</span> <span className="mb-1">Description</span>
<InfoTooltip text="Optional. Describe how you will resolve this market." /> <InfoTooltip text="Optional. Describe how you will resolve this market." />
</label> </label>
<Textarea <Textarea
className="textarea w-full textarea-bordered" className="textarea textarea-bordered w-full"
rows={3} rows={3}
placeholder={descriptionPlaceholder} placeholder={descriptionPlaceholder}
value={description} value={description}
@ -159,7 +159,7 @@ export function NewContract(props: { question: string; tag?: string }) {
<Spacer h={4} /> <Spacer h={4} />
<div className="form-control items-start max-w-sm"> <div className="form-control max-w-sm items-start">
<label className="label gap-2"> <label className="label gap-2">
<span className="mb-1">Tags</span> <span className="mb-1">Tags</span>
<InfoTooltip text="Optional. Help categorize your market with related tags." /> <InfoTooltip text="Optional. Help categorize your market with related tags." />
@ -178,8 +178,8 @@ export function NewContract(props: { question: string; tag?: string }) {
<TagsList tags={tags} noLink noLabel /> <TagsList tags={tags} noLink noLabel />
<Spacer h={4} /> <Spacer h={4} />
<div className="form-control items-start mb-1"> <div className="form-control mb-1 items-start">
<label className="label gap-2 mb-1"> <label className="label mb-1 gap-2">
<span>Market close</span> <span>Market close</span>
<InfoTooltip text="Trading will be halted after this time (local timezone)." /> <InfoTooltip text="Trading will be halted after this time (local timezone)." />
</label> </label>
@ -196,8 +196,8 @@ export function NewContract(props: { question: string; tag?: string }) {
<Spacer h={4} /> <Spacer h={4} />
<div className="form-control items-start mb-1"> <div className="form-control mb-1 items-start">
<label className="label gap-2 mb-1"> <label className="label mb-1 gap-2">
<span>Market ante</span> <span>Market ante</span>
<InfoTooltip <InfoTooltip
text={`Subsidize your market to encourage trading. Ante bets are set to match your initial probability. text={`Subsidize your market to encourage trading. Ante bets are set to match your initial probability.
@ -216,7 +216,7 @@ export function NewContract(props: { question: string; tag?: string }) {
<Spacer h={4} /> <Spacer h={4} />
<div className="flex justify-end my-4"> <div className="my-4 flex justify-end">
<button <button
type="submit" type="submit"
className={clsx( className={clsx(

22
web/pages/fold/[...slugs]/index.tsx
View File

@ -187,7 +187,7 @@ export default function FoldPage(props: {
/> />
<div className="px-3 lg:px-1"> <div className="px-3 lg:px-1">
<Row className="justify-between mb-6"> <Row className="mb-6 justify-between">
<Title className="!m-0" text={fold.name} /> <Title className="!m-0" text={fold.name} />
{isCurator ? ( {isCurator ? (
<EditFoldButton className="ml-1" fold={fold} /> <EditFoldButton className="ml-1" fold={fold} />
@ -196,7 +196,7 @@ export default function FoldPage(props: {
)} )}
</Row> </Row>
<Col className="md:hidden text-gray-500 gap-2 mb-6"> <Col className="mb-6 gap-2 text-gray-500 md:hidden">
<Row> <Row>
<div className="mr-1">Curated by</div> <div className="mr-1">Curated by</div>
<UserLink <UserLink
@ -263,7 +263,7 @@ export default function FoldPage(props: {
contractComments={activeContractComments} contractComments={activeContractComments}
/> />
{activeContracts.length === 0 && ( {activeContracts.length === 0 && (
<div className="text-gray-500 mt-4 mx-2 lg:mx-0"> <div className="mx-2 mt-4 text-gray-500 lg:mx-0">
No activity from matching markets.{' '} No activity from matching markets.{' '}
{isCurator && 'Try editing to add more tags!'} {isCurator && 'Try editing to add more tags!'}
</div> </div>
@ -279,7 +279,7 @@ export default function FoldPage(props: {
/> />
)} )}
</Col> </Col>
<Col className="hidden md:flex max-w-xs w-full gap-12"> <Col className="hidden w-full max-w-xs gap-12 md:flex">
<FoldOverview fold={fold} curator={curator} /> <FoldOverview fold={fold} curator={curator} />
<FoldLeaderboards <FoldLeaderboards
traderScores={traderScores} traderScores={traderScores}
@ -293,7 +293,7 @@ export default function FoldPage(props: {
)} )}
{page === 'leaderboards' && ( {page === 'leaderboards' && (
<Col className="gap-8 lg:flex-row px-4"> <Col className="gap-8 px-4 lg:flex-row">
<FoldLeaderboards <FoldLeaderboards
traderScores={traderScores} traderScores={traderScores}
creatorScores={creatorScores} creatorScores={creatorScores}
@ -314,12 +314,12 @@ function FoldOverview(props: { fold: Fold; curator: User }) {
return ( return (
<Col> <Col>
<div className="px-4 py-3 bg-indigo-500 text-white text-sm rounded-t"> <div className="rounded-t bg-indigo-500 px-4 py-3 text-sm text-white">
About community About community
</div> </div>
<Col className="p-4 bg-white gap-2 rounded-b"> <Col className="gap-2 rounded-b bg-white p-4">
<Row> <Row>
<div className="text-gray-500 mr-1">Curated by</div> <div className="mr-1 text-gray-500">Curated by</div>
<UserLink <UserLink
className="text-neutral" className="text-neutral"
name={curator.name} name={curator.name}
@ -338,7 +338,7 @@ function FoldOverview(props: { fold: Fold; curator: User }) {
<div className="divider" /> <div className="divider" />
<div className="text-gray-500 mb-2"> <div className="mb-2 text-gray-500">
Includes markets matching any of these tags: Includes markets matching any of these tags:
</div> </div>
@ -375,11 +375,11 @@ function FoldLeaderboards(props: {
<> <>
{user && ( {user && (
<Col className={yourPerformanceClassName}> <Col className={yourPerformanceClassName}>
<div className="bg-indigo-500 text-white text-sm px-4 py-3 rounded"> <div className="rounded bg-indigo-500 px-4 py-3 text-sm text-white">
Your performance Your performance
</div> </div>
<div className="bg-white p-2"> <div className="bg-white p-2">
<table className="table table-compact text-gray-500 w-full"> <table className="table-compact table w-full text-gray-500">
<tbody> <tbody>
<tr> <tr>
<td>Trading profit</td> <td>Trading profit</td>

14
web/pages/folds.tsx
View File

@ -64,14 +64,14 @@ export default function Folds(props: {
return ( return (
<Page> <Page>
<Col className="items-center"> <Col className="items-center">
<Col className="max-w-xl w-full"> <Col className="w-full max-w-xl">
<Col className="px-4 sm:px-0"> <Col className="px-4 sm:px-0">
<Row className="justify-between items-center"> <Row className="items-center justify-between">
<Title text="Explore communities" /> <Title text="Explore communities" />
{user && <CreateFoldButton />} {user && <CreateFoldButton />}
</Row> </Row>
<div className="text-gray-500 mb-6"> <div className="mb-6 text-gray-500">
Communities on Manifold are centered around a collection of Communities on Manifold are centered around a collection of
markets. markets.
</div> </div>
@ -98,16 +98,16 @@ function FoldCard(props: { fold: Fold; curator: User | undefined }) {
return ( return (
<Col <Col
key={fold.id} key={fold.id}
className="bg-white hover:bg-gray-100 p-8 rounded-xl gap-1 shadow-md relative" className="relative gap-1 rounded-xl bg-white p-8 shadow-md hover:bg-gray-100"
> >
<Link href={foldPath(fold)}> <Link href={foldPath(fold)}>
<a className="absolute left-0 right-0 top-0 bottom-0" /> <a className="absolute left-0 right-0 top-0 bottom-0" />
</Link> </Link>
<Row className="justify-between items-center gap-2"> <Row className="items-center justify-between gap-2">
<span className="text-xl">{fold.name}</span> <span className="text-xl">{fold.name}</span>
<FollowFoldButton className="z-10 mb-1" fold={fold} /> <FollowFoldButton className="z-10 mb-1" fold={fold} />
</Row> </Row>
<Row className="items-center gap-2 text-gray-500 text-sm"> <Row className="items-center gap-2 text-sm text-gray-500">
<div>{fold.followCount} followers</div> <div>{fold.followCount} followers</div>
<div>•</div> <div>•</div>
<Row> <Row>
@ -119,7 +119,7 @@ function FoldCard(props: { fold: Fold; curator: User | undefined }) {
/> />
</Row> </Row>
</Row> </Row>
<div className="text-gray-500 text-sm">{fold.about}</div> <div className="text-sm text-gray-500">{fold.about}</div>
{tags.length > 0 && ( {tags.length > 0 && (
<TagsList className="mt-4" tags={tags} noLink noLabel /> <TagsList className="mt-4" tags={tags} noLink noLabel />
)} )}

10
web/pages/home.tsx
View File

@ -120,11 +120,11 @@ const Home = (props: {
return ( return (
<Page assertUser="signed-in"> <Page assertUser="signed-in">
<Col className="items-center"> <Col className="items-center">
<Col className="max-w-3xl w-full"> <Col className="w-full max-w-3xl">
<FeedCreate user={user ?? undefined} /> <FeedCreate user={user ?? undefined} />
<Spacer h={6} /> <Spacer h={6} />
<Row className="text-sm text-gray-800 mx-3 mb-3 gap-2 items-center"> <Row className="mx-3 mb-3 items-center gap-2 text-sm text-gray-800">
<SearchIcon className="inline w-5 h-5" aria-hidden="true" /> <SearchIcon className="inline h-5 w-5" aria-hidden="true" />
Explore our communities Explore our communities
</Row> </Row>
<FoldTagList <FoldTagList
@ -144,9 +144,9 @@ const Home = (props: {
]} ]}
/> />
<Spacer h={10} /> <Spacer h={10} />
<Col className="sm:flex-row text-sm text-gray-800 mx-3 mb-3 gap-2"> <Col className="mx-3 mb-3 gap-2 text-sm text-gray-800 sm:flex-row">
<Row className="gap-2"> <Row className="gap-2">
<SparklesIcon className="inline w-5 h-5" aria-hidden="true" /> <SparklesIcon className="inline h-5 w-5" aria-hidden="true" />
<span className="whitespace-nowrap">Recent activity</span> <span className="whitespace-nowrap">Recent activity</span>
<span className="hidden sm:flex">—</span> <span className="hidden sm:flex">—</span>
</Row> </Row>

32
web/pages/landing-page.tsx
View File

@ -33,17 +33,17 @@ const scrollToAbout = () => {
function Hero() { function Hero() {
return ( return (
<div className="overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900 bg-center lg:bg-left"> <div className="bg-world-trading h-screen overflow-hidden bg-gray-900 bg-cover bg-center lg:bg-left">
<NavBar darkBackground /> <NavBar darkBackground />
<main> <main>
<div className="pt-32 sm:pt-8 lg:pt-0 lg:pb-14 lg:overflow-hidden"> <div className="pt-32 sm:pt-8 lg:overflow-hidden lg:pt-0 lg:pb-14">
<div className="mx-auto max-w-7xl lg:px-8 xl:px-0"> <div className="mx-auto max-w-7xl lg:px-8 xl:px-0">
<div className="lg:grid lg:grid-cols-2 lg:gap-8"> <div className="lg:grid lg:grid-cols-2 lg:gap-8">
<div className="mx-auto max-w-md px-8 sm:max-w-2xl sm:text-center lg:px-0 lg:text-left lg:flex lg:items-center"> <div className="mx-auto max-w-md px-8 sm:max-w-2xl sm:text-center lg:flex lg:items-center lg:px-0 lg:text-left">
<div className="lg:py-24"> <div className="lg:py-24">
<h1 className="mt-4 text-4xl text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl"> <h1 className="mt-4 text-4xl text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
<div className="mb-2">Create your own</div> <div className="mb-2">Create your own</div>
<div className="font-bold bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-green-400"> <div className="bg-gradient-to-r from-teal-300 to-green-400 bg-clip-text font-bold text-transparent">
prediction markets prediction markets
</div> </div>
</h1> </h1>
@ -54,7 +54,7 @@ function Hero() {
</p> </p>
<div className="mt-10 sm:mt-12"> <div className="mt-10 sm:mt-12">
<button <button
className="btn normal-case text-lg font-medium px-10 bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600" className="btn bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
onClick={firebaseLogin} onClick={firebaseLogin}
> >
Sign in to get started! Sign in to get started!
@ -66,7 +66,7 @@ function Hero() {
</div> </div>
<div className="absolute bottom-12 w-full"> <div className="absolute bottom-12 w-full">
<ArrowDownIcon <ArrowDownIcon
className="text-white mx-auto cursor-pointer animate-bounce" className="mx-auto animate-bounce cursor-pointer text-white"
width={32} width={32}
height={32} height={32}
onClick={scrollToAbout} onClick={scrollToAbout}
@ -106,14 +106,14 @@ function FeaturesSection() {
] ]
return ( return (
<div id="about" className="w-full py-16 bg-green-50"> <div id="about" className="w-full bg-green-50 py-16">
<div className="max-w-4xl py-12 mx-auto"> <div className="mx-auto max-w-4xl py-12">
<div className="max-w-7xl mx-auto px-6 lg:px-8"> <div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="lg:text-center"> <div className="lg:text-center">
<h2 className="text-base text-teal-600 font-semibold tracking-wide uppercase"> <h2 className="text-base font-semibold uppercase tracking-wide text-teal-600">
Manifold Markets Manifold Markets
</h2> </h2>
<p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> <p className="mt-2 text-3xl font-extrabold leading-8 tracking-tight text-gray-900 sm:text-4xl">
Better forecasting for everyone Better forecasting for everyone
</p> </p>
<p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> <p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
@ -122,14 +122,14 @@ function FeaturesSection() {
</div> </div>
<div className="mt-10"> <div className="mt-10">
<dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> <dl className="space-y-10 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10 md:space-y-0">
{features.map((feature) => ( {features.map((feature) => (
<div key={feature.name} className="relative"> <div key={feature.name} className="relative">
<dt> <dt>
<div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-teal-500 text-white"> <div className="absolute flex h-12 w-12 items-center justify-center rounded-md bg-teal-500 text-white">
<feature.icon className="h-6 w-6" aria-hidden="true" /> <feature.icon className="h-6 w-6" aria-hidden="true" />
</div> </div>
<p className="ml-16 text-lg leading-6 font-medium text-gray-900"> <p className="ml-16 text-lg font-medium leading-6 text-gray-900">
{feature.name} {feature.name}
</p> </p>
</dt> </dt>
@ -155,8 +155,8 @@ function FeaturesSection() {
function ExploreMarketsSection(props: { hotContracts: Contract[] }) { function ExploreMarketsSection(props: { hotContracts: Contract[] }) {
const { hotContracts } = props const { hotContracts } = props
return ( return (
<div className="max-w-4xl px-4 py-8 mx-auto"> <div className="mx-auto max-w-4xl px-4 py-8">
<p className="my-12 text-3xl leading-8 font-extrabold tracking-tight text-indigo-700 sm:text-4xl"> <p className="my-12 text-3xl font-extrabold leading-8 tracking-tight text-indigo-700 sm:text-4xl">
Today's top markets Today's top markets
</p> </p>

2
web/pages/leaderboards.tsx
View File

@ -30,7 +30,7 @@ export default function Leaderboards(props: {
return ( return (
<Page margin> <Page margin>
<Col className="items-center lg:flex-row gap-10"> <Col className="items-center gap-10 lg:flex-row">
<Leaderboard <Leaderboard
title="🏅 Top traders" title="🏅 Top traders"
users={topTraders} users={topTraders}

26
web/pages/make-predictions.tsx
View File

@ -41,12 +41,12 @@ function toPrediction(contract: Contract): Prediction {
function PredictionRow(props: { prediction: Prediction }) { function PredictionRow(props: { prediction: Prediction }) {
const { prediction } = props const { prediction } = props
return ( return (
<Row className="gap-4 justify-between hover:bg-gray-300 p-4"> <Row className="justify-between gap-4 p-4 hover:bg-gray-300">
<Col className="justify-between"> <Col className="justify-between">
<div className="font-medium text-indigo-700 mb-2"> <div className="mb-2 font-medium text-indigo-700">
<Linkify text={prediction.question} /> <Linkify text={prediction.question} />
</div> </div>
<div className="text-gray-500 text-sm">{prediction.description}</div> <div className="text-sm text-gray-500">{prediction.description}</div>
</Col> </Col>
{/* Initial probability */} {/* Initial probability */}
<div className="ml-auto"> <div className="ml-auto">
@ -72,7 +72,7 @@ function PredictionRow(props: { prediction: Prediction }) {
function PredictionList(props: { predictions: Prediction[] }) { function PredictionList(props: { predictions: Prediction[] }) {
const { predictions } = props const { predictions } = props
return ( return (
<Col className="divide-gray-300 divide-y border-gray-300 border rounded-md"> <Col className="divide-y divide-gray-300 rounded-md border border-gray-300">
{predictions.map((prediction) => {predictions.map((prediction) =>
prediction.createdUrl ? ( prediction.createdUrl ? (
<Link href={prediction.createdUrl}> <Link href={prediction.createdUrl}>
@ -166,19 +166,19 @@ ${TEST_VALUE}
return ( return (
<Page> <Page>
<Title text="Make Predictions" /> <Title text="Make Predictions" />
<div className="w-full bg-gray-100 rounded-lg shadow-xl px-6 py-4"> <div className="w-full rounded-lg bg-gray-100 px-6 py-4 shadow-xl">
<form> <form>
<div className="form-control"> <div className="form-control">
<label className="label"> <label className="label">
<span className="label-text">Prediction</span> <span className="label-text">Prediction</span>
<div className="text-sm text-gray-500 ml-1"> <div className="ml-1 text-sm text-gray-500">
One prediction per line, each formatted like "The sun will rise One prediction per line, each formatted like "The sun will rise
tomorrow: 99%" tomorrow: 99%"
</div> </div>
</label> </label>
<textarea <textarea
className="textarea h-60 textarea-bordered" className="textarea textarea-bordered h-60"
placeholder={bulkPlaceholder} placeholder={bulkPlaceholder}
value={predictionsString} value={predictionsString}
onChange={(e) => setPredictionsString(e.target.value || '')} onChange={(e) => setPredictionsString(e.target.value || '')}
@ -215,8 +215,8 @@ ${TEST_VALUE}
/> />
</div> </div>
<div className="form-control items-start mb-1"> <div className="form-control mb-1 items-start">
<label className="label gap-2 mb-1"> <label className="label mb-1 gap-2">
<span>Market close</span> <span>Market close</span>
<InfoTooltip text="Trading will be halted after this time (local timezone)." /> <InfoTooltip text="Trading will be halted after this time (local timezone)." />
</label> </label>
@ -233,8 +233,8 @@ ${TEST_VALUE}
<Spacer h={4} /> <Spacer h={4} />
<div className="form-control items-start mb-1"> <div className="form-control mb-1 items-start">
<label className="label gap-2 mb-1"> <label className="label mb-1 gap-2">
<span>Market ante</span> <span>Market ante</span>
<InfoTooltip <InfoTooltip
text={`Subsidize your market to encourage trading. Ante bets are set to match your initial probability. text={`Subsidize your market to encourage trading. Ante bets are set to match your initial probability.
@ -263,7 +263,7 @@ ${TEST_VALUE}
<Spacer h={4} /> <Spacer h={4} />
<div className="flex justify-end my-4"> <div className="my-4 flex justify-end">
<button <button
type="submit" type="submit"
className={clsx('btn btn-primary', { className={clsx('btn btn-primary', {
@ -284,7 +284,7 @@ ${TEST_VALUE}
<> <>
<Spacer h={16} /> <Spacer h={16} />
<Title text="Created Predictions" /> <Title text="Created Predictions" />
<div className="w-full bg-gray-100 rounded-lg shadow-xl px-6 py-4"> <div className="w-full rounded-lg bg-gray-100 px-6 py-4 shadow-xl">
<PredictionList predictions={createdContracts.map(toPrediction)} /> <PredictionList predictions={createdContracts.map(toPrediction)} />
</div> </div>
</> </>

4
web/pages/markets.tsx
View File

@ -51,7 +51,7 @@ export const HotMarkets = (props: { contracts: Contract[] }) => {
if (contracts.length === 0) return <></> if (contracts.length === 0) return <></>
return ( return (
<div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md"> <div className="w-full rounded-lg border-2 border-indigo-100 bg-indigo-50 p-6 shadow-md">
<Title className="!mt-0" text="🔥 Markets" /> <Title className="!mt-0" text="🔥 Markets" />
<ContractsGrid contracts={contracts} showHotVolume /> <ContractsGrid contracts={contracts} showHotVolume />
</div> </div>
@ -63,7 +63,7 @@ export const ClosingSoonMarkets = (props: { contracts: Contract[] }) => {
if (contracts.length === 0) return <></> if (contracts.length === 0) return <></>
return ( return (
<div className="w-full bg-green-50 border-2 border-green-100 p-6 rounded-lg shadow-md"> <div className="w-full rounded-lg border-2 border-green-100 bg-green-50 p-6 shadow-md">
<Title className="!mt-0" text="⏰ Closing soon" /> <Title className="!mt-0" text="⏰ Closing soon" />
<ContractsGrid contracts={contracts} showCloseTime /> <ContractsGrid contracts={contracts} showCloseTime />
</div> </div>

8
web/pages/profile.tsx
View File

@ -93,7 +93,7 @@ export default function ProfilePage() {
<Page> <Page>
<SEO title="Profile" description="User profile settings" url="/profile" /> <SEO title="Profile" description="User profile settings" url="/profile" />
<Col className="max-w-lg p-6 sm:mx-auto bg-white rounded shadow-md"> <Col className="max-w-lg rounded bg-white p-6 shadow-md sm:mx-auto">
<Row className="justify-between"> <Row className="justify-between">
<Title className="!mt-0" text="Profile" /> <Title className="!mt-0" text="Profile" />
{isEditing ? ( {isEditing ? (
@ -108,7 +108,7 @@ export default function ProfilePage() {
className="btn btn-ghost" className="btn btn-ghost"
onClick={() => setIsEditing(true)} onClick={() => setIsEditing(true)}
> >
<PencilIcon className="w-5 h-5" />{' '} <PencilIcon className="h-5 w-5" />{' '}
<div className="ml-2">Edit</div> <div className="ml-2">Edit</div>
</button> </button>
)} )}
@ -123,7 +123,7 @@ export default function ProfilePage() {
src={avatarUrl} src={avatarUrl}
width={80} width={80}
height={80} height={80}
className="rounded-full bg-gray-400 flex items-center justify-center" className="flex items-center justify-center rounded-full bg-gray-400"
/> />
{isEditing && ( {isEditing && (
<input type="file" name="file" onChange={fileHandler} /> <input type="file" name="file" onChange={fileHandler} />
@ -175,7 +175,7 @@ export default function ProfilePage() {
<div> <div>
<label className="label">Balance</label> <label className="label">Balance</label>
<Row className="ml-1 gap-4 items-start text-gray-500"> <Row className="ml-1 items-start gap-4 text-gray-500">
{formatMoney(user?.balance || 0)} {formatMoney(user?.balance || 0)}
<AddFundsButton /> <AddFundsButton />
</Row> </Row>

12
web/pages/simulator.tsx
View File

@ -162,7 +162,7 @@ function NewBidTable(props: {
return ( return (
<> <>
<table className="table table-compact my-8 w-full text-center"> <table className="table-compact my-8 table w-full text-center">
<thead> <thead>
<tr> <tr>
<th>Order #</th> <th>Order #</th>
@ -255,10 +255,10 @@ export default function Simulator() {
return ( return (
<Col> <Col>
<NavBar /> <NavBar />
<div className="grid grid-cols-1 xl:grid-cols-2 gap-4 w-full mt-8 p-2 mx-auto text-center"> <div className="mx-auto mt-8 grid w-full grid-cols-1 gap-4 p-2 text-center xl:grid-cols-2">
{/* Left column */} {/* Left column */}
<div> <div>
<h1 className="text-2xl font-bold mb-8"> <h1 className="mb-8 text-2xl font-bold">
Dynamic Parimutuel Market Simulator Dynamic Parimutuel Market Simulator
</h1> </h1>
@ -286,13 +286,13 @@ export default function Simulator() {
{/* Right column */} {/* Right column */}
<Col> <Col>
<h1 className="text-2xl font-bold mb-8"> <h1 className="mb-8 text-2xl font-bold">
Probability of Probability of
<div className="badge badge-success text-2xl h-8 w-18 ml-3"> <div className="badge badge-success w-18 ml-3 h-8 text-2xl">
YES YES
</div> </div>
</h1> </h1>
<div className="w-full mb-10" style={{ height: 500 }}> <div className="mb-10 w-full" style={{ height: 500 }}>
<ResponsiveLine <ResponsiveLine
data={data} data={data}
yScale={{ min: 0, max: 100, type: 'linear' }} yScale={{ min: 0, max: 100, type: 'linear' }}

5
yarn.lock
View File

@ -4928,6 +4928,11 @@ prelude-ls@~1.1.2:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ= integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
prettier-plugin-tailwindcss@^0.1.5:
version "0.1.5"
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.5.tgz#1709b4cea44873cbfefe9862f9f0827a51fe8cc3"
integrity sha512-e+jTxwiHL4I3Ot8OjV1LAiiaAx0Zgy71xTL7xNmJtNmhpja7GKzFSAoulqBDS1D57B7lbZDCvDEKIWIQSBUmBQ==
prettier@2.5.0: prettier@2.5.0:
version "2.5.0" version "2.5.0"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.0.tgz#a6370e2d4594e093270419d9cc47f7670488f893" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.0.tgz#a6370e2d4594e093270419d9cc47f7670488f893"