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
htmlFor="add-funds"
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
)}
>
@ -30,21 +30,21 @@ export function AddFundsButton(props: { className?: string }) {
<div className="modal">
<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
redeemable for cash.)
</div>
<div className="text-gray-500 text-sm mb-2">Amount</div>
<div className="mb-2 text-sm text-gray-500">Amount</div>
<FundsSelector
selected={amountSelected}
onSelect={setAmountSelected}
/>
<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">
${Math.round(amountSelected / 100)}.00
</div>
@ -61,7 +61,7 @@ export function AddFundsButton(props: { className?: string }) {
>
<button
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
</button>

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

@ -9,7 +9,7 @@ export function AdvancedPanel(props: { children: any }) {
<div
tabIndex={0}
className={clsx(
'relative collapse collapse-arrow',
'collapse collapse-arrow relative',
collapsed ? 'collapse-close' : 'collapse-open'
)}
>
@ -17,11 +17,11 @@ export function AdvancedPanel(props: { children: any }) {
onClick={() => setCollapsed((collapsed) => !collapsed)}
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
</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: -2,
right: -15,
@ -30,7 +30,7 @@ export function AdvancedPanel(props: { children: any }) {
/>
</div>
<div className="collapse-content !p-0 m-0 !bg-transparent">
<div className="collapse-content m-0 !bg-transparent !p-0">
{children}
</div>
</div>

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

@ -52,7 +52,7 @@ export function AmountInput(props: {
return (
<Col className={className}>
<label className="input-group">
<span className="text-sm bg-gray-200">M$</span>
<span className="bg-gray-200 text-sm">M$</span>
<input
className={clsx(
'input input-bordered',
@ -69,13 +69,13 @@ export function AmountInput(props: {
/>
</label>
{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}
</div>
)}
{user && (
<Col className="text-sm mt-3">
<div className="text-gray-500 whitespace-nowrap mb-2">
<Col className="mt-3 text-sm">
<div className="mb-2 whitespace-nowrap text-gray-500">
Remaining balance
</div>
<Row className="gap-4">

4
web/components/avatar.tsx
View File

@ -19,11 +19,11 @@ export function Avatar(props: {
Router.push(`/${username}`)
}
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 ? (
<img
className={clsx(
'rounded-full flex items-center justify-center object-cover',
'flex items-center justify-center rounded-full object-cover',
`w-${s} h-${s}`,
!noLink && 'cursor-pointer'
)}

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

@ -136,7 +136,7 @@ export function BetPanel(props: {
}
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={clsx('!mt-0', title ? '!text-xl' : '')}
text={panelTitle}
@ -149,7 +149,7 @@ export function BetPanel(props: {
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
inputClassName="w-full"
amount={betAmount}
@ -201,7 +201,7 @@ export function BetPanel(props: {
? 'btn-disabled'
: betChoice === 'YES'
? 'btn-primary'
: 'bg-red-400 hover:bg-red-500 border-none',
: 'border-none bg-red-400 hover:bg-red-500',
isSubmitting ? 'loading' : ''
)}
onClick={betDisabled ? undefined : submitBet}
@ -210,7 +210,7 @@ export function BetPanel(props: {
</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}
>
Sign in to trade!

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

@ -21,8 +21,8 @@ export default function BetRow(props: {
return (
<>
<div className={className}>
<Row className="items-center gap-2 justify-end">
<div className={clsx('text-gray-400 mr-2', labelClassName)}>
<Row className="items-center justify-end gap-2">
<div className={clsx('mr-2 text-gray-400', labelClassName)}>
Place a trade
</div>
<YesNoSelector
@ -58,10 +58,10 @@ export function Modal(props: {
<Transition.Root show={open} as={Fragment}>
<Dialog
as="div"
className="fixed z-50 inset-0 overflow-y-auto"
className="fixed inset-0 z-50 overflow-y-auto"
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
as={Fragment}
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. */}
<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"
>
&#8203;
@ -90,7 +90,7 @@ export function Modal(props: {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
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}
</div>
</Transition.Child>

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

@ -121,7 +121,7 @@ export function BetsList(props: { user: User }) {
return (
<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">
<Col>
<div className="text-sm text-gray-500">Currently invested</div>
@ -164,7 +164,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
<div
tabIndex={0}
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'
)}
onClick={() => setCollapsed((collapsed) => !collapsed)}
@ -183,12 +183,12 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
{/* Show carrot for collapsing. Hack the positioning. */}
<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 }}
/>
</Row>
<Row className="gap-2 text-gray-500 text-sm items-center">
<Row className="items-center gap-2 text-sm text-gray-500">
{resolution ? (
<div>
Resolved <OutcomeLabel outcome={resolution} />
@ -205,7 +205,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
</Col>
<MyBetsSummary
className="flex-1 justify-end mr-5 sm:mr-8"
className="mr-5 flex-1 justify-end sm:mr-8"
contract={contract}
bets={bets}
/>
@ -259,7 +259,7 @@ export function MyBetsSummary(props: {
)}
>
<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>
</Col>
{resolution ? (
@ -270,20 +270,20 @@ export function MyBetsSummary(props: {
) : (
<Row className="gap-4 sm:gap-6">
<Col>
<div className="text-sm text-gray-500 whitespace-nowrap">
<div className="whitespace-nowrap text-sm text-gray-500">
Payout if <YesLabel />
</div>
<div className="whitespace-nowrap">{formatMoney(yesWinnings)}</div>
</Col>
<Col>
<div className="text-sm text-gray-500 whitespace-nowrap">
<div className="whitespace-nowrap text-sm text-gray-500">
Payout if <NoLabel />
</div>
<div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
</Col>
{showMKT && (
<Col>
<div className="text-sm text-gray-500 whitespace-nowrap">
<div className="whitespace-nowrap text-sm text-gray-500">
Payout if <MarketLabel />
</div>
<div className="whitespace-nowrap">
@ -313,7 +313,7 @@ export function ContractBetsTable(props: {
return (
<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>
<tr className="p-2">
<th>Date</th>
@ -415,7 +415,7 @@ function SellButton(props: { contract: Contract; bet: Bet }) {
setIsSubmitting(false)
}}
>
<div className="text-2xl mb-4">
<div className="mb-4 text-2xl">
Sell <OutcomeLabel outcome={bet.outcome} />
</div>
<div>

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

@ -31,7 +31,7 @@ export function ContractCard(props: {
<div>
<div
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
)}
>
@ -118,9 +118,9 @@ function AbbrContractDetails(props: {
const { truePool } = contractMetrics(contract)
return (
<Col className={clsx('text-sm text-gray-500 gap-2')}>
<Row className="justify-between items-center">
<Row className="gap-2 items-center">
<Col className={clsx('gap-2 text-sm text-gray-500')}>
<Row className="items-center justify-between">
<Row className="items-center gap-2">
<Avatar
username={creatorUsername}
avatarUrl={contract.creatorAvatarUrl}
@ -135,12 +135,12 @@ function AbbrContractDetails(props: {
{showHotVolume ? (
<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)}
</div>
) : showCloseTime ? (
<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)}
</div>
) : (
@ -157,8 +157,8 @@ export function ContractDetails(props: { contract: Contract }) {
const { truePool, createdDate, resolvedDate } = contractMetrics(contract)
return (
<Col className="text-sm text-gray-500 gap-2 sm:flex-row sm:flex-wrap">
<Row className="gap-2 flex-wrap items-center">
<Col className="gap-2 text-sm text-gray-500 sm:flex-row sm:flex-wrap">
<Row className="flex-wrap items-center gap-2">
<Avatar
username={creatorUsername}
avatarUrl={contract.creatorAvatarUrl}

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

@ -85,7 +85,7 @@ function Timestamp(props: { time: number }) {
const { time } = props
return (
<DateTimeTooltip time={time}>
<span className="whitespace-nowrap text-gray-400 ml-1">
<span className="ml-1 whitespace-nowrap text-gray-400">
{fromNow(time)}
</span>
</DateTimeTooltip>
@ -116,7 +116,7 @@ function FeedBet(props: { activityItem: any }) {
<Avatar avatarUrl={user?.avatarUrl} />
) : (
<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" />
</div>
</div>
@ -171,7 +171,7 @@ function EditContract(props: {
return editing ? (
<div className="mt-4">
<Textarea
className="textarea h-24 textarea-bordered w-full mb-1"
className="textarea textarea-bordered mb-1 h-24 w-full"
rows={3}
value={text}
onChange={(e) => setText(e.target.value || '')}
@ -238,7 +238,7 @@ export function ContractDescription(props: {
if (!isCreator && !contract.description.trim()) return null
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} />
<br />
{isCreator && (
@ -289,7 +289,7 @@ function TruncatedComment(props: {
}
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} />
{truncated != comment && (
<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.
const closeMessage =
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
<span className="mx-2">•</span>
{contract.closeTime > Date.now() ? 'Closes' : 'Closed'}
@ -324,7 +324,7 @@ function FeedQuestion(props: { contract: Contract }) {
avatarUrl={contract.creatorAvatarUrl}
/>
<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
className="text-gray-900"
name={creatorName}
@ -333,10 +333,10 @@ function FeedQuestion(props: { contract: Contract }) {
asked
{closeMessage}
</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
href={contractPath(contract)}
className="text-lg sm:text-xl text-indigo-700"
className="text-lg text-indigo-700 sm:text-xl"
>
{question}
</SiteLink>
@ -405,7 +405,7 @@ function FeedResolve(props: { contract: Contract }) {
<>
<div>
<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} />
</div>
</div>
@ -432,7 +432,7 @@ function FeedClose(props: { contract: Contract }) {
<>
<div>
<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
className="h-5 w-5 text-gray-500"
aria-hidden="true"
@ -575,7 +575,7 @@ function FeedBetGroup(props: { activityItem: any }) {
<>
<div>
<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" />
</div>
</div>
@ -599,7 +599,7 @@ function FeedExpand(props: { setExpanded: (expanded: boolean) => void }) {
<>
<button onClick={() => setExpanded(true)}>
<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
className="h-5 w-5 text-gray-500"
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)}>
<Row className="justify-between gap-4 px-2">
<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} />
</div>
<Row className="justify-between items-center gap-4">
<Row className="items-center justify-between gap-4">
<ResolutionOrChance
className="md:hidden"
resolution={resolution}
@ -74,7 +74,7 @@ export const ContractOverview = (props: {
<ContractDetails contract={contract} />
</Col>
<Col className="hidden md:flex justify-between items-end">
<Col className="hidden items-end justify-between md:flex">
<ResolutionOrChance
className="items-end"
resolution={resolution}
@ -88,7 +88,7 @@ export const ContractOverview = (props: {
<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 ? (
<TagsInput className={clsx('mx-4')} contract={contract} />
) : (
@ -97,7 +97,7 @@ export const ContractOverview = (props: {
<TweetButton tweetText={tweetText} />
</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} />
{folds.length === 0 ? (
<TagsInput contract={contract} />
@ -107,7 +107,7 @@ export const ContractOverview = (props: {
</Col>
{folds.length > 0 && (
<RevealableTagsInput className="mt-4 mx-4" contract={contract} />
<RevealableTagsInput className="mx-4 mt-4" contract={contract} />
)}
<Spacer h={12} />

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

@ -32,14 +32,14 @@ export function ContractsGrid(props: {
if (contracts.length === 0) {
return (
<p className="text-gray-500 mx-2">
<p className="mx-2 text-gray-500">
No markets found. Why not create one?
</p>
)
}
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) => (
<ContractCard
contract={contract}
@ -250,7 +250,7 @@ export function SearchableGrid(props: {
return (
<div>
{/* 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
type="text"
value={query}

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

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

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

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

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

@ -48,10 +48,10 @@ export function EditFoldButton(props: { fold: Fold; className?: string }) {
<label
htmlFor="edit"
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>
<input type="checkbox" id="edit" className="modal-toggle" />
@ -118,7 +118,7 @@ export function EditFoldButton(props: { fold: Fold; className?: string }) {
}
}}
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

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">
<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="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
</div>
</h1>
<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
own.
<br />
@ -81,7 +81,7 @@ export default function FeedCreate(props: {
return (
<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()}
>
<div className="relative flex items-start space-x-3">
@ -94,7 +94,7 @@ export default function FeedCreate(props: {
</div>
<textarea
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}
value={question}
onClick={(e) => e.stopPropagation()}

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

@ -7,7 +7,7 @@ export function FoldTag(props: { fold: Fold }) {
return (
<div
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'
)}
>

4
web/components/leaderboard.tsx
View File

@ -19,10 +19,10 @@ export function Leaderboard(props: {
<div className={clsx('w-full px-1', className)}>
<Title text={title} className="!mt-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">
<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>
<tr className="p-2">
<th>#</th>

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

@ -4,9 +4,9 @@ export function LoadingIndicator(props: { className?: string }) {
const { className } = props
return (
<div className={clsx('flex justify-center items-center', className)}>
<div className={clsx('flex items-center justify-center', className)}>
<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"
/>
</div>

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

@ -13,16 +13,16 @@ export function ManifoldLogo(props: {
return (
<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
className="hover:rotate-12 transition-all"
className="transition-all hover:rotate-12"
src={darkBackground ? '/logo-white.svg' : '/logo.svg'}
width={45}
height={45}
/>
<div
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'
)}
>
@ -32,7 +32,7 @@ export function ManifoldLogo(props: {
</div>
<div
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'
)}
>

6
web/components/menu.tsx
View File

@ -9,9 +9,9 @@ export function MenuButton(props: {
}) {
const { buttonContent, menuItems, className } = props
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>
<Menu.Button className="rounded-full flex">
<Menu.Button className="flex rounded-full">
<span className="sr-only">Open user menu</span>
{buttonContent}
</Menu.Button>
@ -25,7 +25,7 @@ export function MenuButton(props: {
leaveFrom="transform opacity-100 scale-100"
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) => (
<Menu.Item key={item.name}>
{({ active }) => (

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

@ -29,16 +29,16 @@ export function NavBar(props: {
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
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'
)}
>
<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) && (
<NavOptions
user={user}
@ -58,13 +58,13 @@ export function NavBar(props: {
function BottomNavBar(props: { user: User }) {
const { user } = props
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">
<a
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 */}
</a>
</Link>
@ -72,9 +72,9 @@ function BottomNavBar(props: { user: User }) {
<Link href="/markets">
<a
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 */}
</a>
</Link>
@ -82,9 +82,9 @@ function BottomNavBar(props: { user: User }) {
<Link href="/folds">
<a
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 */}
</a>
</Link>
@ -92,9 +92,9 @@ function BottomNavBar(props: { user: User }) {
<Link href="/trades">
<a
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 */}
</a>
</Link>
@ -118,7 +118,7 @@ function NavOptions(props: {
<Link href="/about">
<a
className={clsx(
'text-base hidden md:block whitespace-nowrap',
'hidden whitespace-nowrap text-base md:block',
themeClasses
)}
>
@ -130,7 +130,7 @@ function NavOptions(props: {
<Link href="/folds">
<a
className={clsx(
'text-base hidden md:block whitespace-nowrap',
'hidden whitespace-nowrap text-base md:block',
themeClasses
)}
>
@ -141,7 +141,7 @@ function NavOptions(props: {
<Link href="/markets">
<a
className={clsx(
'text-base hidden md:block whitespace-nowrap',
'hidden whitespace-nowrap text-base md:block',
themeClasses
)}
>
@ -152,7 +152,7 @@ function NavOptions(props: {
{showSignedOut && (
<>
<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}
>
Sign in

2
web/components/page.tsx
View File

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

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

@ -16,7 +16,7 @@ export function ProfileMenu(props: { user: User | undefined }) {
/>
<MenuButton
className="md:hidden mr-2"
className="mr-2 md:hidden"
menuItems={getNavigationOptions(user, { mobile: true })}
buttonContent={<ProfileSummary user={user} />}
/>
@ -81,12 +81,12 @@ function getNavigationOptions(
function ProfileSummary(props: { user: User | undefined }) {
const { user } = props
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 />
<div className="truncate text-left sm:w-32">
<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)) : ' '}
</div>
</div>

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

@ -63,7 +63,7 @@ export function ResolutionPanel(props: {
: 'btn-disabled'
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" />
<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
href={href}
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
)}
onClick={(e) => e.stopPropagation()}
@ -23,7 +23,7 @@ export const SiteLink = (props: {
<Link href={href}>
<a
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
)}
onClick={(e) => e.stopPropagation()}

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

@ -57,7 +57,7 @@ export function RevealableTagsInput(props: {
return (
<div
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
)}
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 = (
<div
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'
)}
>
<span className="text-gray-600 text-sm">{tag}</span>
<span className="text-sm text-gray-600">{tag}</span>
</div>
)
@ -31,8 +31,8 @@ export function TagsList(props: {
}) {
const { tags, className, noLink, noLabel } = props
return (
<Row className={clsx('items-center flex-wrap gap-2', className)}>
{!noLabel && <div className="text-gray-500 mr-1">Tags</div>}
<Row className={clsx('flex-wrap items-center gap-2', className)}>
{!noLabel && <div className="mr-1 text-gray-500">Tags</div>}
{tags.map((tag) => (
<Hashtag
key={tag}
@ -51,11 +51,11 @@ export function FoldTag(props: { fold: { slug: string; name: string } }) {
<SiteLink href={`/fold/${slug}`} className="flex items-center">
<div
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'
)}
>
<span className="text-gray-500 text-sm">{name}</span>
<span className="text-sm text-gray-500">{name}</span>
</div>
</SiteLink>
)
@ -68,10 +68,10 @@ export function FoldTagList(props: {
}) {
const { folds, noLabel, className } = props
return (
<Row className={clsx('flex-wrap gap-2 items-center', className)}>
<Row className={clsx('flex-wrap items-center gap-2', className)}>
{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) => (
<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 (
<h1
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
)}
>

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

@ -6,7 +6,7 @@ export function TweetButton(props: { className?: string; tweetText?: string }) {
return (
<a
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
)}
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)}>
<button
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'
? 'bg-primary text-white'
: 'bg-transparent text-primary',
: 'text-primary bg-transparent',
btnClassName
)}
onClick={() => onSelect('YES')}
@ -28,7 +28,7 @@ export function YesNoSelector(props: {
</button>
<button
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'
? 'bg-red-400 text-white'
: 'bg-transparent text-red-400',
@ -54,7 +54,7 @@ export function YesNoCancelSelector(props: {
return (
<Col>
<Row className={clsx('space-x-3 w-full', className)}>
<Row className={clsx('w-full space-x-3', className)}>
<Button
color={selected === 'YES' ? 'green' : 'gray'}
onClick={() => onSelect('YES')}
@ -72,7 +72,7 @@ export function YesNoCancelSelector(props: {
</Button>
</Row>
<Row className={clsx('space-x-3 w-full', className)}>
<Row className={clsx('w-full space-x-3', className)}>
<Button
color={selected === 'MKT' ? 'blue' : 'gray'}
onClick={() => onSelect('MKT')}
@ -132,12 +132,12 @@ function Button(props: {
<button
type="button"
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 === 'red' && 'bg-red-400 hover:bg-red-500 text-white',
color === 'yellow' && 'bg-yellow-400 hover:bg-yellow-500 text-white',
color === 'blue' && 'bg-blue-400 hover:bg-blue-500 text-white',
color === 'gray' && 'text-gray-700 bg-gray-300 hover:bg-gray-400',
color === 'red' && 'bg-red-400 text-white hover:bg-red-500',
color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500',
color === 'blue' && 'bg-blue-400 text-white hover:bg-blue-500',
color === 'gray' && 'bg-gray-300 text-gray-700 hover:bg-gray-400',
className
)}
onClick={onClick}

1
web/package.json
View File

@ -44,6 +44,7 @@
"lint-staged": "12.1.3",
"postcss": "8.3.5",
"prettier": "2.5.0",
"prettier-plugin-tailwindcss": "^0.1.5",
"pretty-quick": "3.1.2",
"tailwindcss": "3.0.1",
"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() {
return (
<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!" />
<p>Nothing exists at this location.</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}
/>
<Col className="w-full md:flex-row justify-between">
<div className="flex-[3] bg-white px-2 py-6 md:px-6 md:py-8 rounded border-0 border-gray-100">
<Col className="w-full justify-between md:flex-row">
<div className="flex-[3] rounded border-0 border-gray-100 bg-white px-2 py-6 md:px-6 md:py-8">
<ContractOverview
contract={contract}
bets={bets ?? []}

2
web/pages/_document.tsx
View File

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

6
web/pages/account.tsx
View File

@ -6,14 +6,14 @@ import { firebaseLogin } from '../lib/firebase/users'
function SignInCard() {
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">
<img
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 className="max-w-md card-body">
<div className="card-body max-w-md">
<h2 className="card-title font-major-mono">Welcome!</h2>
<p>Sign in to get started</p>
<div className="card-actions">

2
web/pages/activity.tsx
View File

@ -97,7 +97,7 @@ export function ActivityFeed(props: {
return contracts.length > 0 ? (
<Col className="items-center">
<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) => (
<div key={contract.id} className="py-6 px-2 sm:px-4">
<ContractFeed

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

@ -22,18 +22,18 @@ export default function AddFundsPage() {
<Col>
<Title text="Get Manifold Dollars" />
<img
className="block mt-6"
className="mt-6 block"
src="/praying-mantis-light.svg"
width={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
redeemable for cash.)
</div>
<div className="text-gray-500 text-sm mb-2">Amount</div>
<div className="mb-2 text-sm text-gray-500">Amount</div>
<FundsSelector
className="max-w-md"
selected={amountSelected}
@ -41,7 +41,7 @@ export default function AddFundsPage() {
/>
<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">
${Math.round(amountSelected / 100)}.00
</div>
@ -54,7 +54,7 @@ export default function AddFundsPage() {
>
<button
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
</button>

22
web/pages/create.tsx
View File

@ -23,10 +23,10 @@ export default function Create() {
return (
<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" />
<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>
<div className="form-control w-full">
<label className="label">
@ -141,13 +141,13 @@ export function NewContract(props: { question: string; tag?: string }) {
<Spacer h={4} />
<div className="form-control items-start mb-1">
<label className="label gap-2 mb-1">
<div className="form-control mb-1 items-start">
<label className="label mb-1 gap-2">
<span className="mb-1">Description</span>
<InfoTooltip text="Optional. Describe how you will resolve this market." />
</label>
<Textarea
className="textarea w-full textarea-bordered"
className="textarea textarea-bordered w-full"
rows={3}
placeholder={descriptionPlaceholder}
value={description}
@ -159,7 +159,7 @@ export function NewContract(props: { question: string; tag?: string }) {
<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">
<span className="mb-1">Tags</span>
<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 />
<Spacer h={4} />
<div className="form-control items-start mb-1">
<label className="label gap-2 mb-1">
<div className="form-control mb-1 items-start">
<label className="label mb-1 gap-2">
<span>Market close</span>
<InfoTooltip text="Trading will be halted after this time (local timezone)." />
</label>
@ -196,8 +196,8 @@ export function NewContract(props: { question: string; tag?: string }) {
<Spacer h={4} />
<div className="form-control items-start mb-1">
<label className="label gap-2 mb-1">
<div className="form-control mb-1 items-start">
<label className="label mb-1 gap-2">
<span>Market ante</span>
<InfoTooltip
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} />
<div className="flex justify-end my-4">
<div className="my-4 flex justify-end">
<button
type="submit"
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">
<Row className="justify-between mb-6">
<Row className="mb-6 justify-between">
<Title className="!m-0" text={fold.name} />
{isCurator ? (
<EditFoldButton className="ml-1" fold={fold} />
@ -196,7 +196,7 @@ export default function FoldPage(props: {
)}
</Row>
<Col className="md:hidden text-gray-500 gap-2 mb-6">
<Col className="mb-6 gap-2 text-gray-500 md:hidden">
<Row>
<div className="mr-1">Curated by</div>
<UserLink
@ -263,7 +263,7 @@ export default function FoldPage(props: {
contractComments={activeContractComments}
/>
{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.{' '}
{isCurator && 'Try editing to add more tags!'}
</div>
@ -279,7 +279,7 @@ export default function FoldPage(props: {
/>
)}
</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} />
<FoldLeaderboards
traderScores={traderScores}
@ -293,7 +293,7 @@ export default function FoldPage(props: {
)}
{page === 'leaderboards' && (
<Col className="gap-8 lg:flex-row px-4">
<Col className="gap-8 px-4 lg:flex-row">
<FoldLeaderboards
traderScores={traderScores}
creatorScores={creatorScores}
@ -314,12 +314,12 @@ function FoldOverview(props: { fold: Fold; curator: User }) {
return (
<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
</div>
<Col className="p-4 bg-white gap-2 rounded-b">
<Col className="gap-2 rounded-b bg-white p-4">
<Row>
<div className="text-gray-500 mr-1">Curated by</div>
<div className="mr-1 text-gray-500">Curated by</div>
<UserLink
className="text-neutral"
name={curator.name}
@ -338,7 +338,7 @@ function FoldOverview(props: { fold: Fold; curator: User }) {
<div className="divider" />
<div className="text-gray-500 mb-2">
<div className="mb-2 text-gray-500">
Includes markets matching any of these tags:
</div>
@ -375,11 +375,11 @@ function FoldLeaderboards(props: {
<>
{user && (
<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
</div>
<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>
<tr>
<td>Trading profit</td>

14
web/pages/folds.tsx
View File

@ -64,14 +64,14 @@ export default function Folds(props: {
return (
<Page>
<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">
<Row className="justify-between items-center">
<Row className="items-center justify-between">
<Title text="Explore communities" />
{user && <CreateFoldButton />}
</Row>
<div className="text-gray-500 mb-6">
<div className="mb-6 text-gray-500">
Communities on Manifold are centered around a collection of
markets.
</div>
@ -98,16 +98,16 @@ function FoldCard(props: { fold: Fold; curator: User | undefined }) {
return (
<Col
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)}>
<a className="absolute left-0 right-0 top-0 bottom-0" />
</Link>
<Row className="justify-between items-center gap-2">
<Row className="items-center justify-between gap-2">
<span className="text-xl">{fold.name}</span>
<FollowFoldButton className="z-10 mb-1" fold={fold} />
</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>•</div>
<Row>
@ -119,7 +119,7 @@ function FoldCard(props: { fold: Fold; curator: User | undefined }) {
/>
</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 && (
<TagsList className="mt-4" tags={tags} noLink noLabel />
)}

10
web/pages/home.tsx
View File

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

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

@ -33,17 +33,17 @@ const scrollToAbout = () => {
function Hero() {
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 />
<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="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">
<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="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
</div>
</h1>
@ -54,7 +54,7 @@ function Hero() {
</p>
<div className="mt-10 sm:mt-12">
<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}
>
Sign in to get started!
@ -66,7 +66,7 @@ function Hero() {
</div>
<div className="absolute bottom-12 w-full">
<ArrowDownIcon
className="text-white mx-auto cursor-pointer animate-bounce"
className="mx-auto animate-bounce cursor-pointer text-white"
width={32}
height={32}
onClick={scrollToAbout}
@ -106,14 +106,14 @@ function FeaturesSection() {
]
return (
<div id="about" className="w-full py-16 bg-green-50">
<div className="max-w-4xl py-12 mx-auto">
<div className="max-w-7xl mx-auto px-6 lg:px-8">
<div id="about" className="w-full bg-green-50 py-16">
<div className="mx-auto max-w-4xl py-12">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<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
</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
</p>
<p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
@ -122,14 +122,14 @@ function FeaturesSection() {
</div>
<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) => (
<div key={feature.name} className="relative">
<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" />
</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}
</p>
</dt>
@ -155,8 +155,8 @@ function FeaturesSection() {
function ExploreMarketsSection(props: { hotContracts: Contract[] }) {
const { hotContracts } = props
return (
<div className="max-w-4xl px-4 py-8 mx-auto">
<p className="my-12 text-3xl leading-8 font-extrabold tracking-tight text-indigo-700 sm:text-4xl">
<div className="mx-auto max-w-4xl px-4 py-8">
<p className="my-12 text-3xl font-extrabold leading-8 tracking-tight text-indigo-700 sm:text-4xl">
Today's top markets
</p>

2
web/pages/leaderboards.tsx
View File

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

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

@ -41,12 +41,12 @@ function toPrediction(contract: Contract): Prediction {
function PredictionRow(props: { prediction: Prediction }) {
const { prediction } = props
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">
<div className="font-medium text-indigo-700 mb-2">
<div className="mb-2 font-medium text-indigo-700">
<Linkify text={prediction.question} />
</div>
<div className="text-gray-500 text-sm">{prediction.description}</div>
<div className="text-sm text-gray-500">{prediction.description}</div>
</Col>
{/* Initial probability */}
<div className="ml-auto">
@ -72,7 +72,7 @@ function PredictionRow(props: { prediction: Prediction }) {
function PredictionList(props: { predictions: Prediction[] }) {
const { predictions } = props
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) =>
prediction.createdUrl ? (
<Link href={prediction.createdUrl}>
@ -166,19 +166,19 @@ ${TEST_VALUE}
return (
<Page>
<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>
<div className="form-control">
<label className="label">
<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
tomorrow: 99%"
</div>
</label>
<textarea
className="textarea h-60 textarea-bordered"
className="textarea textarea-bordered h-60"
placeholder={bulkPlaceholder}
value={predictionsString}
onChange={(e) => setPredictionsString(e.target.value || '')}
@ -215,8 +215,8 @@ ${TEST_VALUE}
/>
</div>
<div className="form-control items-start mb-1">
<label className="label gap-2 mb-1">
<div className="form-control mb-1 items-start">
<label className="label mb-1 gap-2">
<span>Market close</span>
<InfoTooltip text="Trading will be halted after this time (local timezone)." />
</label>
@ -233,8 +233,8 @@ ${TEST_VALUE}
<Spacer h={4} />
<div className="form-control items-start mb-1">
<label className="label gap-2 mb-1">
<div className="form-control mb-1 items-start">
<label className="label mb-1 gap-2">
<span>Market ante</span>
<InfoTooltip
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} />
<div className="flex justify-end my-4">
<div className="my-4 flex justify-end">
<button
type="submit"
className={clsx('btn btn-primary', {
@ -284,7 +284,7 @@ ${TEST_VALUE}
<>
<Spacer h={16} />
<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)} />
</div>
</>

4
web/pages/markets.tsx
View File

@ -51,7 +51,7 @@ export const HotMarkets = (props: { contracts: Contract[] }) => {
if (contracts.length === 0) 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" />
<ContractsGrid contracts={contracts} showHotVolume />
</div>
@ -63,7 +63,7 @@ export const ClosingSoonMarkets = (props: { contracts: Contract[] }) => {
if (contracts.length === 0) 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" />
<ContractsGrid contracts={contracts} showCloseTime />
</div>

8
web/pages/profile.tsx
View File

@ -93,7 +93,7 @@ export default function ProfilePage() {
<Page>
<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">
<Title className="!mt-0" text="Profile" />
{isEditing ? (
@ -108,7 +108,7 @@ export default function ProfilePage() {
className="btn btn-ghost"
onClick={() => setIsEditing(true)}
>
<PencilIcon className="w-5 h-5" />{' '}
<PencilIcon className="h-5 w-5" />{' '}
<div className="ml-2">Edit</div>
</button>
)}
@ -123,7 +123,7 @@ export default function ProfilePage() {
src={avatarUrl}
width={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 && (
<input type="file" name="file" onChange={fileHandler} />
@ -175,7 +175,7 @@ export default function ProfilePage() {
<div>
<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)}
<AddFundsButton />
</Row>

12
web/pages/simulator.tsx
View File

@ -162,7 +162,7 @@ function NewBidTable(props: {
return (
<>
<table className="table table-compact my-8 w-full text-center">
<table className="table-compact my-8 table w-full text-center">
<thead>
<tr>
<th>Order #</th>
@ -255,10 +255,10 @@ export default function Simulator() {
return (
<Col>
<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 */}
<div>
<h1 className="text-2xl font-bold mb-8">
<h1 className="mb-8 text-2xl font-bold">
Dynamic Parimutuel Market Simulator
</h1>
@ -286,13 +286,13 @@ export default function Simulator() {
{/* Right column */}
<Col>
<h1 className="text-2xl font-bold mb-8">
<h1 className="mb-8 text-2xl font-bold">
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
</div>
</h1>
<div className="w-full mb-10" style={{ height: 500 }}>
<div className="mb-10 w-full" style={{ height: 500 }}>
<ResponsiveLine
data={data}
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"
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:
version "2.5.0"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.0.tgz#a6370e2d4594e093270419d9cc47f7670488f893"