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

Die Daisy (#1042)

Browse Source 
* un-daisy labels

* un-daisy inputs

* un-daisy input groups

* fixup input

* un-daisy selects

* un-daisy slider

* Uninstall daisy. Migrate colors

* un-daisy tables

* fix input error styling

* lint
This commit is contained in:
Sinclair Chen 2022-10-13 11:23:42 -07:00 committed by GitHub
parent 8bb44593f3
commit 546b0231e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 212 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
common/charity.ts
View File

@ -246,7 +246,7 @@ Future plans: We expect to focus on similar theoretical problems in alignment un
description: `At Rethink Charity, we’re excited about improving the world by providing vital support to high-impact charities and charitable projects. We equip them with tools to boost their impact, through our projects that empower their donors with tax-efficient giving options and strategically coordinated matching opportunities. description: `At Rethink Charity, we’re excited about improving the world by providing vital support to high-impact charities and charitable projects. We equip them with tools to boost their impact, through our projects that empower their donors with tax-efficient giving options and strategically coordinated matching opportunities.
What we do: What we do:
- Rethink Charity Forward is a cause-neutral donation routing fund for high-impact charities around the world. Canadians have used RC Forward to donate $10 million to high-impact charities since the project was launched in late 2017. - Rethink Charity Forward is a cause-gray-700 donation routing fund for high-impact charities around the world. Canadians have used RC Forward to donate $10 million to high-impact charities since the project was launched in late 2017.
- EA Giving Tuesday supports both donors and highly effective nonprofits participating in Facebook’s annual Giving Tuesday match. In addition to setting up systems and processes, the team provides analysis-based recommendations, detailed instructions, and responsive support. The team’s goal is to make it as easy as possible for donors to direct matching dollars to highly effective nonprofits.`, - EA Giving Tuesday supports both donors and highly effective nonprofits participating in Facebook’s annual Giving Tuesday match. In addition to setting up systems and processes, the team provides analysis-based recommendations, detailed instructions, and responsive support. The team’s goal is to make it as easy as possible for donors to direct matching dollars to highly effective nonprofits.`,
}, },
@ -595,7 +595,8 @@ In addition to housing impact litigation, we provide free legal aid, education a
photo: photo:
'https://firebasestorage.googleapis.com/v0/b/mantic-markets.appspot.com/o/user-images%2Fdefault%2Fci2h3hStFM.47?alt=media&token=0d2cdc3d-e4d8-4f5e-8f23-4a586b6ff637', 'https://firebasestorage.googleapis.com/v0/b/mantic-markets.appspot.com/o/user-images%2Fdefault%2Fci2h3hStFM.47?alt=media&token=0d2cdc3d-e4d8-4f5e-8f23-4a586b6ff637',
preview: 'Donate supplies to soldiers in Ukraine', preview: 'Donate supplies to soldiers in Ukraine',
description: 'Donate supplies to soldiers in Ukraine, including tourniquets and plate carriers.', description:
'Donate supplies to soldiers in Ukraine, including tourniquets and plate carriers.',
}, },
].map((charity) => { ].map((charity) => {
const slug = charity.name.toLowerCase().replace(/\s/g, '-') const slug = charity.name.toLowerCase().replace(/\s/g, '-')

2
web/components/add-funds-modal.tsx
View File

@ -35,7 +35,7 @@ export function AddFundsModal(props: {
<div className="text-xl">{manaToUSD(amountSelected)}</div> <div className="text-xl">{manaToUSD(amountSelected)}</div>
</div> </div>
<div className="modal-action"> <div className="flex">
<Button color="gray-white" onClick={() => setOpen(false)}> <Button color="gray-white" onClick={() => setOpen(false)}>
Back Back
</Button> </Button>

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

@ -7,6 +7,8 @@ import { ENV_CONFIG } from 'common/envs/constants'
import { Row } from './layout/row' import { Row } from './layout/row'
import { AddFundsModal } from './add-funds-modal' import { AddFundsModal } from './add-funds-modal'
import { Input } from './input' import { Input } from './input'
import Slider from 'rc-slider'
import 'rc-slider/assets/index.css'
export function AmountInput(props: { export function AmountInput(props: {
amount: number | undefined amount: number | undefined
@ -40,17 +42,13 @@ export function AmountInput(props: {
return ( return (
<> <>
<Col className={className}> <Col className={clsx('relative', className)}>
<label className="font-sm md:font-lg relative"> <label className="font-sm md:font-lg relative">
<span className="text-greyscale-4 absolute top-1/2 my-auto ml-2 -translate-y-1/2"> <span className="text-greyscale-4 absolute top-1/2 my-auto ml-2 -translate-y-1/2">
{label} {label}
</span> </span>
<Input <Input
className={clsx( className={clsx('w-24 pl-9 !text-base md:w-auto', inputClassName)}
'w-24 pl-9 !text-base md:w-auto',
error && 'input-error',
inputClassName
)}
ref={inputRef} ref={inputRef}
type="text" type="text"
pattern="[0-9]*" pattern="[0-9]*"
@ -58,13 +56,14 @@ export function AmountInput(props: {
placeholder="0" placeholder="0"
maxLength={6} maxLength={6}
value={amount ?? ''} value={amount ?? ''}
error={!!error}
disabled={disabled} disabled={disabled}
onChange={(e) => onAmountChange(e.target.value)} onChange={(e) => onAmountChange(e.target.value)}
/> />
</label> </label>
{error && ( {error && (
<div className="absolute mt-11 whitespace-nowrap text-xs font-medium tracking-wide text-red-500"> <div className="absolute -bottom-5 whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
{error === 'Insufficient balance' ? ( {error === 'Insufficient balance' ? (
<> <>
Not enough funds. Not enough funds.
@ -148,7 +147,7 @@ export function BuyAmountInput(props: {
return ( return (
<> <>
<Row className="gap-4"> <Row className="items-center gap-4">
<AmountInput <AmountInput
amount={amount} amount={amount}
onChange={onAmountChange} onChange={onAmountChange}
@ -160,14 +159,23 @@ export function BuyAmountInput(props: {
inputRef={inputRef} inputRef={inputRef}
/> />
{showSlider && ( {showSlider && (
<input <Slider
type="range" min={0}
min="0" max={205}
max="205"
value={getRaw(amount ?? 0)} value={getRaw(amount ?? 0)}
onChange={(e) => onAmountChange(parseRaw(parseInt(e.target.value)))} onChange={(value) => onAmountChange(parseRaw(value as number))}
className="range range-lg only-thumb my-auto align-middle xl:hidden" className="mx-4 !h-4 xl:hidden [&>.rc-slider-rail]:bg-gray-200 [&>.rc-slider-track]:bg-indigo-400 [&>.rc-slider-handle]:bg-indigo-400"
step="5" railStyle={{ height: 16, top: 0, left: 0 }}
trackStyle={{ height: 16, top: 0 }}
handleStyle={{
height: 32,
width: 32,
opacity: 1,
border: 'none',
boxShadow: 'none',
top: -2,
}}
step={5}
/> />
)} )}
</Row> </Row>

2
web/components/answers/answer-item.tsx
View File

@ -101,7 +101,7 @@ export function AnswerItem(props: {
))} ))}
{showChoice ? ( {showChoice ? (
<div className="form-control py-1"> <div className="form-control py-1">
<label className="label cursor-pointer gap-3"> <label className="cursor-pointer gap-3 px-1 py-2">
<span className="">Choose this answer</span> <span className="">Choose this answer</span>
{showChoice === 'radio' && ( {showChoice === 'radio' && (
<input <input

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

@ -92,10 +92,7 @@ export function BetInline(props: {
/> />
<BuyAmountInput <BuyAmountInput
className="-mb-4" className="-mb-4"
inputClassName={clsx( inputClassName="w-20 !text-base"
'input-sm w-20 !text-base',
error && 'input-error'
)}
amount={amount} amount={amount}
onChange={setAmount} onChange={setAmount}
error="" // handle error ourselves error="" // handle error ourselves

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

@ -980,11 +980,11 @@ export function SellPanel(props: {
<Col className="mt-3 w-full gap-3 text-sm"> <Col className="mt-3 w-full gap-3 text-sm">
<Row className="items-center justify-between gap-2 text-gray-500"> <Row className="items-center justify-between gap-2 text-gray-500">
Sale amount Sale amount
<span className="text-neutral">{formatMoney(saleValue)}</span> <span className="text-gray-700">{formatMoney(saleValue)}</span>
</Row> </Row>
<Row className="items-center justify-between gap-2 text-gray-500"> <Row className="items-center justify-between gap-2 text-gray-500">
Profit Profit
<span className="text-neutral">{formatMoney(profit)}</span> <span className="text-gray-700">{formatMoney(profit)}</span>
</Row> </Row>
<Row className="items-center justify-between"> <Row className="items-center justify-between">
<div className="text-gray-500"> <div className="text-gray-500">
@ -1000,11 +1000,11 @@ export function SellPanel(props: {
<> <>
<Row className="mt-6 items-center justify-between gap-2 text-gray-500"> <Row className="mt-6 items-center justify-between gap-2 text-gray-500">
Loan payment Loan payment
<span className="text-neutral">{formatMoney(-loanPaid)}</span> <span className="text-gray-700">{formatMoney(-loanPaid)}</span>
</Row> </Row>
<Row className="items-center justify-between gap-2 text-gray-500"> <Row className="items-center justify-between gap-2 text-gray-500">
Net proceeds Net proceeds
<span className="text-neutral">{formatMoney(netProceeds)}</span> <span className="text-gray-700">{formatMoney(netProceeds)}</span>
</Row> </Row>
</> </>
)} )}

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

@ -52,6 +52,8 @@ import {
} from 'web/hooks/use-persistent-state' } from 'web/hooks/use-persistent-state'
import { safeLocalStorage } from 'web/lib/util/local' import { safeLocalStorage } from 'web/lib/util/local'
import { ExclamationIcon } from '@heroicons/react/outline' import { ExclamationIcon } from '@heroicons/react/outline'
import { Select } from './select'
import { Table } from './table'
type BetSort = 'newest' | 'profit' | 'closeTime' | 'value' type BetSort = 'newest' | 'profit' | 'closeTime' | 'value'
type BetFilter = 'open' | 'limit_bet' | 'sold' | 'closed' | 'resolved' | 'all' type BetFilter = 'open' | 'limit_bet' | 'sold' | 'closed' | 'resolved' | 'all'
@ -200,8 +202,7 @@ export function BetsList(props: { user: User }) {
</Row> </Row>
<Row className="gap-2"> <Row className="gap-2">
<select <Select
className="border-greyscale-4 self-start overflow-hidden rounded border px-2 py-2 text-sm"
value={filter} value={filter}
onChange={(e) => setFilter(e.target.value as BetFilter)} onChange={(e) => setFilter(e.target.value as BetFilter)}
> >
@ -211,10 +212,9 @@ export function BetsList(props: { user: User }) {
<option value="closed">Closed</option> <option value="closed">Closed</option>
<option value="resolved">Resolved</option> <option value="resolved">Resolved</option>
<option value="all">All</option> <option value="all">All</option>
</select> </Select>
<select <Select
className="border-greyscale-4 self-start overflow-hidden rounded px-2 py-2 text-sm"
value={sort} value={sort}
onChange={(e) => setSort(e.target.value as BetSort)} onChange={(e) => setSort(e.target.value as BetSort)}
> >
@ -222,7 +222,7 @@ export function BetsList(props: { user: User }) {
<option value="value">Value</option> <option value="value">Value</option>
<option value="profit">Profit</option> <option value="profit">Profit</option>
<option value="closeTime">Close date</option> <option value="closeTime">Close date</option>
</select> </Select>
</Row> </Row>
</Col> </Col>
@ -451,7 +451,7 @@ export function ContractBetsTable(props: {
</> </>
)} )}
<table className="table-zebra table-compact table w-full text-gray-500"> <Table>
<thead> <thead>
<tr className="p-2"> <tr className="p-2">
<th></th> <th></th>
@ -480,7 +480,7 @@ export function ContractBetsTable(props: {
/> />
))} ))}
</tbody> </tbody>
</table> </Table>
</div> </div>
) )
} }
@ -551,7 +551,7 @@ function BetRow(props: {
return ( return (
<tr> <tr>
<td className="text-neutral"> <td className="text-gray-700">
{isYourBet && {isYourBet &&
!isCPMM && !isCPMM &&
!isResolved && !isResolved &&

13
web/components/contract-search.tsx
View File

@ -42,6 +42,7 @@ import { Button } from './button'
import { Modal } from './layout/modal' import { Modal } from './layout/modal'
import { Title } from './title' import { Title } from './title'
import { Input } from './input' import { Input } from './input'
import { Select } from './select'
export const SORTS = [ export const SORTS = [
{ label: 'Newest', value: 'newest' }, { label: 'Newest', value: 'newest' },
@ -437,7 +438,7 @@ function ContractSearchControls(props: {
} }
return ( return (
<Col className={clsx('bg-base-200 top-0 z-20 gap-3 pb-3', className)}> <Col className={clsx('bg-greyscale-1 top-0 z-20 gap-3 pb-3', className)}>
<Row className="gap-1 sm:gap-2"> <Row className="gap-1 sm:gap-2">
<Input <Input
type="text" type="text"
@ -543,8 +544,7 @@ export function SearchFilters(props: {
return ( return (
<div className={className}> <div className={className}>
<select <Select
className="select select-bordered"
value={filter} value={filter}
onChange={(e) => selectFilter(e.target.value as filter)} onChange={(e) => selectFilter(e.target.value as filter)}
> >
@ -552,10 +552,9 @@ export function SearchFilters(props: {
<option value="closed">Closed</option> <option value="closed">Closed</option>
<option value="resolved">Resolved</option> <option value="resolved">Resolved</option>
<option value="all">All</option> <option value="all">All</option>
</select> </Select>
{!hideOrderSelector && ( {!hideOrderSelector && (
<select <Select
className="select select-bordered"
value={sort} value={sort}
onChange={(e) => selectSort(e.target.value as Sort)} onChange={(e) => selectSort(e.target.value as Sort)}
> >
@ -564,7 +563,7 @@ export function SearchFilters(props: {
{option.label} {option.label}
</option> </option>
))} ))}
</select> </Select>
)} )}
</div> </div>
) )

5
web/components/contract/contract-info-dialog.tsx
View File

@ -22,6 +22,7 @@ import { BETTORS, User } from 'common/user'
import { IconButton } from '../button' import { IconButton } from '../button'
import { AddLiquidityButton } from './add-liquidity-button' import { AddLiquidityButton } from './add-liquidity-button'
import { Tooltip } from '../tooltip' import { Tooltip } from '../tooltip'
import { Table } from '../table'
export function ContractInfoDialog(props: { export function ContractInfoDialog(props: {
contract: Contract contract: Contract
@ -98,7 +99,7 @@ export function ContractInfoDialog(props: {
<Col className="gap-4 rounded bg-white p-6"> <Col className="gap-4 rounded bg-white p-6">
<Title className="!mt-0 !mb-0" text="This Market" /> <Title className="!mt-0 !mb-0" text="This Market" />
<table className="table-compact table-zebra table w-full text-gray-500"> <Table>
<tbody> <tbody>
<tr> <tr>
<td>Type</td> <td>Type</td>
@ -238,7 +239,7 @@ export function ContractInfoDialog(props: {
</tr> </tr>
)} )}
</tbody> </tbody>
</table> </Table>
<Row className="flex-wrap"> <Row className="flex-wrap">
{mechanism === 'cpmm-1' && ( {mechanism === 'cpmm-1' && (

2
web/components/contract/contract-report-resolution.tsx
View File

@ -32,7 +32,7 @@ export function ContractReportResolution(props: { contract: Contract }) {
} }
const flagClass = clsx( const flagClass = clsx(
'mx-2 flex flex-col items-center gap-1 w-6 h-6 rounded-md !bg-gray-100 px-2 py-1 hover:bg-gray-300', 'mx-2 flex flex-col items-center gap-1 w-6 h-6 rounded-md !bg-gray-100 px-1 py-2 hover:bg-gray-300',
userReported ? '!text-red-500' : '!text-gray-500' userReported ? '!text-red-500' : '!text-gray-500'
) )

6
web/components/create-post.tsx
View File

@ -56,7 +56,7 @@ export function CreatePost(props: { group?: Group }) {
<Title className="!mt-0" text="Create a post" /> <Title className="!mt-0" text="Create a post" />
<form> <form>
<div className="form-control w-full"> <div className="form-control w-full">
<label className="label"> <label className="px-1 py-2">
<span className="mb-1"> <span className="mb-1">
Title<span className={'text-red-700'}> *</span> Title<span className={'text-red-700'}> *</span>
</span> </span>
@ -69,7 +69,7 @@ export function CreatePost(props: { group?: Group }) {
onChange={(e) => setTitle(e.target.value || '')} onChange={(e) => setTitle(e.target.value || '')}
/> />
<Spacer h={6} /> <Spacer h={6} />
<label className="label"> <label className="px-1 py-2">
<span className="mb-1"> <span className="mb-1">
Subtitle<span className={'text-red-700'}> *</span> Subtitle<span className={'text-red-700'}> *</span>
</span> </span>
@ -82,7 +82,7 @@ export function CreatePost(props: { group?: Group }) {
onChange={(e) => setSubtitle(e.target.value || '')} onChange={(e) => setSubtitle(e.target.value || '')}
/> />
<Spacer h={6} /> <Spacer h={6} />
<label className="label"> <label className="px-1 py-2">
<span className="mb-1"> <span className="mb-1">
Content<span className={'text-red-700'}> *</span> Content<span className={'text-red-700'}> *</span>
</span> </span>

3
web/components/editor.tsx
View File

@ -258,7 +258,8 @@ export function TextEditor(props: {
<> <>
{/* hide placeholder when focused */} {/* hide placeholder when focused */}
<div className="relative w-full [&:focus-within_p.is-empty]:before:content-none"> <div className="relative w-full [&:focus-within_p.is-empty]:before:content-none">
<div className="rounded-lg border border-gray-300 bg-white shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500"> {/* matches input styling */}
<div className="rounded-lg border border-gray-300 bg-white shadow-sm transition-colors focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
<FloatingMenu editor={editor} /> <FloatingMenu editor={editor} />
<EditorContent editor={editor} /> <EditorContent editor={editor} />
{/* Toolbar, with buttons for images and embeds */} {/* Toolbar, with buttons for images and embeds */}

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

@ -7,7 +7,7 @@ export const ExpandingInput = (props: Parameters<typeof Textarea>[0]) => {
return ( return (
<Textarea <Textarea
className={clsx( className={clsx(
'textarea textarea-bordered resize-none text-[16px] md:text-[14px]', 'resize-none rounded-md border border-gray-300 bg-white px-4 text-[16px] leading-loose shadow-sm transition-colors focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 md:text-[14px]',
className className
)} )}
{...rest} {...rest}

6
web/components/groups/edit-group-button.tsx
View File

@ -52,7 +52,7 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
<Modal open={open} setOpen={updateOpen}> <Modal open={open} setOpen={updateOpen}>
<div className="h-full rounded-md bg-white p-8"> <div className="h-full rounded-md bg-white p-8">
<div className="form-control w-full"> <div className="form-control w-full">
<label className="label"> <label className="px-1 py-2">
<span className="mb-1">Group name</span> <span className="mb-1">Group name</span>
</label> </label>
@ -67,7 +67,7 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
<Spacer h={4} /> <Spacer h={4} />
<div className="form-control w-full"> <div className="form-control w-full">
<label className="label"> <label className="px-1 py-2">
<span className="mb-0">Add members</span> <span className="mb-0">Add members</span>
</label> </label>
<FilterSelectUsers <FilterSelectUsers
@ -77,7 +77,7 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
/> />
</div> </div>
<div className="modal-action"> <div className="flex">
<Button <Button
color="red" color="red"
size="xs" size="xs"

2
web/components/groups/group-overview.tsx
View File

@ -377,7 +377,7 @@ export function GroupAbout(props: {
<div className={'inline-flex items-center'}> <div className={'inline-flex items-center'}>
<div className="mr-1 text-gray-500">Created by</div> <div className="mr-1 text-gray-500">Created by</div>
<UserLink <UserLink
className="text-neutral" className="text-gray-700"
name={creator.name} name={creator.name}
username={creator.username} username={creator.username}
/> />

2
web/components/groups/group-selector.tsx
View File

@ -83,7 +83,7 @@ export function GroupSelector(props: {
{() => ( {() => (
<> <>
{showLabel && ( {showLabel && (
<Combobox.Label className="label justify-start gap-2 text-base"> <Combobox.Label className="justify-start gap-2 px-1 py-2 text-base">
Add to Group Add to Group
<InfoTooltip text="Question will be displayed alongside the other questions in the group." /> <InfoTooltip text="Question will be displayed alongside the other questions in the group." />
</Combobox.Label> </Combobox.Label>

22
web/components/input.tsx
View File

@ -2,21 +2,21 @@ import clsx from 'clsx'
import React from 'react' import React from 'react'
/** Text input. Wraps html `<input>` */ /** Text input. Wraps html `<input>` */
export const Input = (props: JSX.IntrinsicElements['input']) => { export const Input = (
const { className, ...rest } = props props: { error?: boolean } & JSX.IntrinsicElements['input']
) => {
const { error, className, ...rest } = props
return ( return (
<input <input
className={clsx('input input-bordered text-base md:text-sm', className)} className={clsx(
'h-12 rounded-md border bg-white px-4 shadow-sm transition-colors invalid:border-red-600 invalid:text-red-900 invalid:placeholder-red-300 focus:outline-none disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 md:text-sm',
error
? 'border-red-300 text-red-900 placeholder-red-300 focus:border-red-600 focus:ring-red-500' // matches invalid: styles
: 'border-gray-300 focus:border-indigo-500 focus:ring-indigo-500',
className
)}
{...rest} {...rest}
/> />
) )
} }
/*
TODO: replace daisyui style with our own. For reference:
james: text-lg placeholder:text-gray-400
inga: placeholder:text-greyscale-4 border-greyscale-2 rounded-md
austin: border-gray-300 text-gray-400 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm
*/

7
web/components/leaderboard.tsx
View File

@ -2,6 +2,7 @@ import clsx from 'clsx'
import { Avatar } from './avatar' import { Avatar } from './avatar'
import { Row } from './layout/row' import { Row } from './layout/row'
import { SiteLink } from './site-link' import { SiteLink } from './site-link'
import { Table } from './table'
import { Title } from './title' import { Title } from './title'
interface LeaderboardEntry { interface LeaderboardEntry {
@ -31,9 +32,9 @@ export function Leaderboard<T extends LeaderboardEntry>(props: {
<div className="ml-2 text-gray-500">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-zebra table-compact table w-full text-gray-500"> <Table>
<thead> <thead>
<tr className="p-2"> <tr>
<th>#</th> <th>#</th>
<th>Name</th> <th>Name</th>
{columns.map((column) => ( {columns.map((column) => (
@ -59,7 +60,7 @@ export function Leaderboard<T extends LeaderboardEntry>(props: {
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </Table>
</div> </div>
)} )}
</div> </div>

5
web/components/limit-bets.tsx
View File

@ -14,6 +14,7 @@ import { Row } from './layout/row'
import { LoadingIndicator } from './loading-indicator' import { LoadingIndicator } from './loading-indicator'
import { BinaryOutcomeLabel, PseudoNumericOutcomeLabel } from './outcome-label' import { BinaryOutcomeLabel, PseudoNumericOutcomeLabel } from './outcome-label'
import { Subtitle } from './subtitle' import { Subtitle } from './subtitle'
import { Table } from './table'
import { Title } from './title' import { Title } from './title'
export function LimitBets(props: { export function LimitBets(props: {
@ -74,7 +75,7 @@ export function LimitOrderTable(props: {
const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC' const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'
return ( return (
<table className="table-compact table w-full rounded text-gray-500"> <Table className="rounded">
<thead> <thead>
<tr> <tr>
{!isYou && <th></th>} {!isYou && <th></th>}
@ -89,7 +90,7 @@ export function LimitOrderTable(props: {
<LimitBet key={bet.id} bet={bet} contract={contract} isYou={isYou} /> <LimitBet key={bet.id} bet={bet} contract={contract} isYou={isYou} />
))} ))}
</tbody> </tbody>
</table> </Table>
) )
} }

14
web/components/manalinks/create-links-button.tsx
View File

@ -14,6 +14,7 @@ import { DuplicateIcon } from '@heroicons/react/outline'
import { QRCode } from '../qr-code' import { QRCode } from '../qr-code'
import { Input } from '../input' import { Input } from '../input'
import { ExpandingInput } from '../expanding-input' import { ExpandingInput } from '../expanding-input'
import { Select } from '../select'
export function CreateLinksButton(props: { export function CreateLinksButton(props: {
user: User user: User
@ -116,7 +117,7 @@ function CreateManalinkForm(props: {
<Title className="!my-0" text="Create a Manalink" /> <Title className="!my-0" text="Create a Manalink" />
<div className="flex flex-col flex-wrap gap-x-5 gap-y-2"> <div className="flex flex-col flex-wrap gap-x-5 gap-y-2">
<div className="form-control flex-auto"> <div className="form-control flex-auto">
<label className="label">Amount</label> <label className="px-1 py-2">Amount</label>
<div className="relative"> <div className="relative">
<span className="absolute mx-3 mt-3.5 text-sm text-gray-400"> <span className="absolute mx-3 mt-3.5 text-sm text-gray-400">
M$ M$
@ -136,7 +137,7 @@ function CreateManalinkForm(props: {
</div> </div>
<div className="flex flex-col gap-2 md:flex-row"> <div className="flex flex-col gap-2 md:flex-row">
<div className="form-control w-full md:w-1/2"> <div className="form-control w-full md:w-1/2">
<label className="label">Uses</label> <label className="px-1 py-2">Uses</label>
<Input <Input
type="number" type="number"
min="1" min="1"
@ -149,9 +150,8 @@ function CreateManalinkForm(props: {
/> />
</div> </div>
<div className="form-control w-full md:w-1/2"> <div className="form-control w-full md:w-1/2">
<label className="label">Expires in</label> <label className="px-1 py-2">Expires in</label>
<select <Select
className="!select !select-bordered"
value={expiresIn} value={expiresIn}
defaultValue={defaultExpire} defaultValue={defaultExpire}
onChange={(e) => { onChange={(e) => {
@ -160,11 +160,11 @@ function CreateManalinkForm(props: {
}} }}
> >
{expireOptions} {expireOptions}
</select> </Select>
</div> </div>
</div> </div>
<div className="form-control w-full"> <div className="form-control w-full">
<label className="label">Message</label> <label className="px-1 py-2">Message</label>
<ExpandingInput <ExpandingInput
placeholder={defaultMessage} placeholder={defaultMessage}
maxLength={200} maxLength={200}

9
web/components/number-input.tsx
View File

@ -32,13 +32,8 @@ export function NumberInput(props: {
return ( return (
<Col className={className}> <Col className={className}>
<label className="input-group">
<Input <Input
className={clsx( className={clsx('max-w-[200px] !text-lg', inputClassName)}
'max-w-[200px] !text-lg',
error && 'input-error',
inputClassName
)}
ref={inputRef} ref={inputRef}
type="number" type="number"
pattern="[0-9]*" pattern="[0-9]*"
@ -46,10 +41,10 @@ export function NumberInput(props: {
placeholder={placeholder ?? '0'} placeholder={placeholder ?? '0'}
maxLength={9} maxLength={9}
value={numberString} value={numberString}
error={!!error}
disabled={disabled} disabled={disabled}
onChange={(e) => onChange(e.target.value.substring(0, 9))} onChange={(e) => onChange(e.target.value.substring(0, 9))}
/> />
</label>
<Spacer h={4} /> <Spacer h={4} />

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

@ -30,7 +30,7 @@ export function ProbabilityInput(props: {
return ( return (
<Col className={className}> <Col className={className}>
<label className="input-group"> <label className="flex w-full items-stretch">
<Input <Input
className={clsx('max-w-[200px] !text-lg', inputClassName)} className={clsx('max-w-[200px] !text-lg', inputClassName)}
type="number" type="number"

5
web/components/probability-selector.tsx
View File

@ -1,5 +1,4 @@
import { Input } from './input' import { Input } from './input'
import { Row } from './layout/row'
export function ProbabilitySelector(props: { export function ProbabilitySelector(props: {
probabilityInt: number probabilityInt: number
@ -9,8 +8,7 @@ export function ProbabilitySelector(props: {
const { probabilityInt, setProbabilityInt, isSubmitting } = props const { probabilityInt, setProbabilityInt, isSubmitting } = props
return ( return (
<Row className="items-center gap-2"> <label className="flex items-center text-lg">
<label className="input-group input-group-lg text-lg">
<Input <Input
type="number" type="number"
value={probabilityInt} value={probabilityInt}
@ -24,6 +22,5 @@ export function ProbabilitySelector(props: {
/> />
<span>%</span> <span>%</span>
</label> </label>
</Row>
) )
} }

17
web/components/select.tsx Normal file
View File

@ -0,0 +1,17 @@
import clsx from 'clsx'
export const Select = (props: JSX.IntrinsicElements['select']) => {
const { className, children, ...rest } = props
return (
<select
className={clsx(
'h-12 cursor-pointer self-start overflow-hidden rounded-md border border-gray-300 pl-4 pr-10 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500',
className
)}
{...rest}
>
ß{children}
</select>
)
}

21
web/components/table.tsx Normal file
View File

@ -0,0 +1,21 @@
import clsx from 'clsx'
/** `<table>` with styles. Expects table html (`<thead>`, `<td>` etc) */
export const Table = (props: {
zebra?: boolean
className?: string
children: React.ReactNode
}) => {
const { className, children } = props
return (
<table
className={clsx(
'w-full whitespace-nowrap text-left text-sm text-gray-500 [&_td]:p-2 [&_th]:p-2 [&>thead]:font-bold [&>tbody_tr:nth-child(odd)]:bg-white',
className
)}
>
{children}
</table>
)
}

2
web/components/toast-clipboard.tsx
View File

@ -8,7 +8,7 @@ export function ToastClipboard(props: { className?: string }) {
return ( return (
<Row <Row
className={clsx( className={clsx(
'border-base-300 absolute items-center' + 'border-greyscale-4 absolute items-center' +
'gap-2 divide-x divide-gray-200 rounded-md border-2 bg-white ' + 'gap-2 divide-x divide-gray-200 rounded-md border-2 bg-white ' +
'h-15 z-10 w-[15rem] p-2 pr-3 text-gray-500', 'h-15 z-10 w-[15rem] p-2 pr-3 text-gray-500',
className className

2
web/package.json
View File

@ -46,7 +46,6 @@
"d3-scale": "4.0.2", "d3-scale": "4.0.2",
"d3-selection": "3.0.0", "d3-selection": "3.0.0",
"d3-shape": "3.1.0", "d3-shape": "3.1.0",
"daisyui": "1.16.4",
"dayjs": "1.10.7", "dayjs": "1.10.7",
"firebase": "9.9.3", "firebase": "9.9.3",
"gridjs": "5.0.2", "gridjs": "5.0.2",
@ -56,6 +55,7 @@
"next": "12.3.1", "next": "12.3.1",
"node-fetch": "3.2.4", "node-fetch": "3.2.4",
"prosemirror-state": "1.4.1", "prosemirror-state": "1.4.1",
"rc-slider": "10.0.1",
"react": "18.2.0", "react": "18.2.0",
"react-confetti": "6.0.1", "react-confetti": "6.0.1",
"react-dom": "18.2.0", "react-dom": "18.2.0",

2
web/pages/_document.tsx
View File

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

9
web/pages/contract-search-firestore.tsx
View File

@ -10,6 +10,7 @@ import {
} from 'web/hooks/use-persistent-state' } from 'web/hooks/use-persistent-state'
import { PAST_BETS } from 'common/user' import { PAST_BETS } from 'common/user'
import { Input } from 'web/components/input' import { Input } from 'web/components/input'
import { Select } from 'web/components/select'
const MAX_CONTRACTS_RENDERED = 100 const MAX_CONTRACTS_RENDERED = 100
@ -96,17 +97,13 @@ export default function ContractSearchFirestore(props: {
placeholder="Search markets" placeholder="Search markets"
className="w-full" className="w-full"
/> />
<select <Select value={sort} onChange={(e) => setSort(e.target.value)}>
className="select select-bordered"
value={sort}
onChange={(e) => setSort(e.target.value)}
>
<option value="score">Trending</option> <option value="score">Trending</option>
<option value="newest">Newest</option> <option value="newest">Newest</option>
<option value="most-traded">Most ${PAST_BETS}</option> <option value="most-traded">Most ${PAST_BETS}</option>
<option value="24-hour-vol">24h volume</option> <option value="24-hour-vol">24h volume</option>
<option value="close-date">Closing soon</option> <option value="close-date">Closing soon</option>
</select> </Select>
</div> </div>
<ContractsGrid contracts={matches} showTime={showTime} /> <ContractsGrid contracts={matches} showTime={showTime} />
</div> </div>

28
web/pages/create.tsx
View File

@ -97,10 +97,8 @@ export default function Create(props: { auth: { user: User } }) {
<form> <form>
<div className="form-control w-full"> <div className="form-control w-full">
<label className="label"> <label className="px-1 pt-2 pb-3">
<span className="mb-1">
Question<span className={'text-red-700'}>*</span> Question<span className={'text-red-700'}>*</span>
</span>
</label> </label>
<ExpandingInput <ExpandingInput
@ -280,9 +278,7 @@ export function NewContract(props: {
return ( return (
<div> <div>
<label className="label"> <label className="px-1 pt-2 pb-3">Answer type</label>
<span className="mb-1">Answer type</span>
</label>
<Row> <Row>
<ChoicesToggleGroup <ChoicesToggleGroup
currentChoice={outcomeType} currentChoice={outcomeType}
@ -319,7 +315,7 @@ export function NewContract(props: {
{outcomeType === 'PSEUDO_NUMERIC' && ( {outcomeType === 'PSEUDO_NUMERIC' && (
<> <>
<div className="form-control mb-2 items-start"> <div className="form-control mb-2 items-start">
<label className="label gap-2"> <label className="gap-2 px-1 py-2">
<span className="mb-1">Range</span> <span className="mb-1">Range</span>
<InfoTooltip text="The lower and higher bounds of the numeric range. Choose bounds the value could reasonably be expected to hit." /> <InfoTooltip text="The lower and higher bounds of the numeric range. Choose bounds the value could reasonably be expected to hit." />
</label> </label>
@ -364,7 +360,7 @@ export function NewContract(props: {
)} )}
</div> </div>
<div className="form-control mb-2 items-start"> <div className="form-control mb-2 items-start">
<label className="label gap-2"> <label className="gap-2 px-1 py-2">
<span className="mb-1">Initial value</span> <span className="mb-1">Initial value</span>
<InfoTooltip text="The starting value for this market. Should be in between min and max values." /> <InfoTooltip text="The starting value for this market. Should be in between min and max values." />
</label> </label>
@ -421,7 +417,7 @@ export function NewContract(props: {
<Spacer h={6} /> <Spacer h={6} />
<div className="form-control mb-1 items-start"> <div className="form-control mb-1 items-start">
<label className="label mb-1 gap-2"> <label className="mb-1 gap-2 px-1 py-2">
<span>Question closes in</span> <span>Question closes in</span>
<InfoTooltip text="Predicting will be halted after this time (local timezone)." /> <InfoTooltip text="Predicting will be halted after this time (local timezone)." />
</label> </label>
@ -464,7 +460,7 @@ export function NewContract(props: {
<Spacer h={6} /> <Spacer h={6} />
<div className="form-control mb-1 items-start gap-1"> <div className="form-control mb-1 items-start gap-1">
<label className="label gap-2"> <label className="gap-2 px-1 py-2">
<span className="mb-1">Description</span> <span className="mb-1">Description</span>
<InfoTooltip text="Optional. Describe how you will resolve this question." /> <InfoTooltip text="Optional. Describe how you will resolve this question." />
</label> </label>
@ -475,23 +471,23 @@ export function NewContract(props: {
<span className={'text-error'}>{errorText}</span> <span className={'text-error'}>{errorText}</span>
<Row className="items-end justify-between"> <Row className="items-end justify-between">
<div className="form-control mb-1 items-start"> <div className="form-control mb-1 items-start">
<label className="label mb-1 gap-2"> <label className="mb-1 gap-2 px-1 py-2">
<span>Cost</span> <span>Cost</span>
<InfoTooltip <InfoTooltip
text={`Cost to create your question. This amount is used to subsidize predictions.`} text={`Cost to create your question. This amount is used to subsidize predictions.`}
/> />
</label> </label>
{!deservesFreeMarket ? ( {!deservesFreeMarket ? (
<div className="label-text text-neutral pl-1"> <div className="pl-1 text-sm text-gray-700">
{formatMoney(ante)} {formatMoney(ante)}
</div> </div>
) : ( ) : (
<Row> <Row className="text-sm">
<div className="label-text text-neutral pl-1 line-through"> <div className="pl-1 text-gray-700 line-through">
{formatMoney(ante)} {formatMoney(ante)}
</div> </div>
<div className="label-text text-primary pl-1">FREE </div> <div className="text-primary pl-1">FREE </div>
<div className="label-text pl-1 text-gray-500"> <div className="pl-1 text-gray-500">
(You have{' '} (You have{' '}
{FREE_MARKETS_PER_USER_MAX - (creator?.freeMarketsCreated ?? 0)}{' '} {FREE_MARKETS_PER_USER_MAX - (creator?.freeMarketsCreated ?? 0)}{' '}
free markets left) free markets left)

2
web/pages/groups.tsx
View File

@ -228,7 +228,7 @@ function GroupMembersList(props: { group: Group }) {
const { totalMembers } = group const { totalMembers } = group
if (totalMembers === 1) return <div /> if (totalMembers === 1) return <div />
return ( return (
<div className="text-neutral flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1 text-gray-700">
<span>{totalMembers} members</span> <span>{totalMembers} members</span>
</div> </div>
) )

2
web/pages/post/[...slugs]/index.tsx
View File

@ -86,7 +86,7 @@ export default function PostPage(props: {
<div className={'inline-flex'}> <div className={'inline-flex'}>
<div className="mr-1 text-gray-500">Created by</div> <div className="mr-1 text-gray-500">Created by</div>
<UserLink <UserLink
className="text-neutral" className="text-gray-700"
name={creator.name} name={creator.name}
username={creator.username} username={creator.username}
/> />

12
web/pages/profile.tsx
View File

@ -43,7 +43,7 @@ function EditUserField(props: {
return ( return (
<div> <div>
<label className="label">{label}</label> <label className="px-1 py-2">{label}</label>
{field === 'bio' ? ( {field === 'bio' ? (
<ExpandingInput <ExpandingInput
@ -156,7 +156,7 @@ export default function ProfilePage(props: {
</Row> </Row>
<div> <div>
<label className="label">Display name</label> <label className="px-1 py-2">Display name</label>
<Input <Input
type="text" type="text"
placeholder="Display name" placeholder="Display name"
@ -167,7 +167,7 @@ export default function ProfilePage(props: {
</div> </div>
<div> <div>
<label className="label">Username</label> <label className="px-1 py-2">Username</label>
<Input <Input
type="text" type="text"
placeholder="Username" placeholder="Username"
@ -193,15 +193,15 @@ export default function ProfilePage(props: {
))} ))}
<div> <div>
<label className="label">Email</label> <label className="px-1 py-2">Email</label>
<div className="ml-1 text-gray-500"> <div className="ml-1 text-gray-500">
{privateUser.email ?? '\u00a0'} {privateUser.email ?? '\u00a0'}
</div> </div>
</div> </div>
<div> <div>
<label className="label">API key</label> <label className="px-1 py-2">API key</label>
<div className="input-group w-full"> <div className="flex w-full items-stretch">
<Input <Input
type="text" type="text"
placeholder="Click refresh to generate key" placeholder="Click refresh to generate key"

55
web/tailwind.config.js
View File

@ -16,6 +16,10 @@ module.exports = {
), ),
extend: { extend: {
colors: { colors: {
primary: '#11b981',
'primary-focus': '#069668',
warning: '#F59E0B', // amber-500 TODO: change color
error: '#ff5724', // TODO: change color
'red-25': '#FDF7F6', 'red-25': '#FDF7F6',
'greyscale-1': '#FBFBFF', 'greyscale-1': '#FBFBFF',
'greyscale-1.5': '#F4F4FB', 'greyscale-1.5': '#F4F4FB',
@ -42,7 +46,6 @@ module.exports = {
require('@tailwindcss/forms'), require('@tailwindcss/forms'),
require('@tailwindcss/typography'), require('@tailwindcss/typography'),
require('@tailwindcss/line-clamp'), require('@tailwindcss/line-clamp'),
require('daisyui'),
plugin(function ({ addUtilities }) { plugin(function ({ addUtilities }) {
addUtilities({ addUtilities({
'.scrollbar-hide': { '.scrollbar-hide': {
@ -61,57 +64,7 @@ module.exports = {
'overflow-wrap': 'anywhere', 'overflow-wrap': 'anywhere',
'word-break': 'break-word', // for Safari 'word-break': 'break-word', // for Safari
}, },
'.only-thumb': {
'pointer-events': 'none',
'&::-webkit-slider-thumb': {
'pointer-events': 'auto !important',
},
'&::-moz-range-thumb': {
'pointer-events': 'auto !important',
},
'&::-ms-thumb': {
'pointer-events': 'auto !important',
},
},
}) })
}), }),
], ],
daisyui: {
themes: [
{
mantic: {
primary: '#11b981',
'primary-focus': '#069668',
// Foreground content color to use on primary color
'primary-content': '#ffffff',
secondary: '#a991f7',
'secondary-focus': '#8462f4',
// Foreground content color to use on secondary color
'secondary-content': '#ffffff',
accent: '#f6d860',
'accent-focus': '#f3cc30',
// Foreground content color to use on accent color
'accent-content': '#ffffff',
neutral: '#3d4451',
'neutral-focus': '#2a2e37',
// Foreground content color to use on neutral color
'neutral-content': '#ffffff',
'base-100': '#ffffff' /* Base page color, for blank backgrounds */,
'base-200': '#f9fafb' /* Base color, a little darker */,
'base-300': '#d1d5db' /* Base color, even more dark */,
// Foreground content color to use on base color
'base-content': '#1f2937',
info: '#2094f3',
success: '#009485',
warning: '#ff9900',
error: '#ff5724',
},
},
],
},
} }

33
yarn.lock
View File

@ -1303,6 +1303,13 @@
dependencies: dependencies:
regenerator-runtime "^0.13.4" regenerator-runtime "^0.13.4"
"@babel/runtime@^7.10.1", "@babel/runtime@^7.18.3":
version "7.19.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78"
integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.10.3", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.17.2", "@babel/runtime@^7.8.4": "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.17.2", "@babel/runtime@^7.8.4":
version "7.18.3" version "7.18.3"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
@ -5475,11 +5482,6 @@ d3-transition@3:
d3-interpolate "1 - 3" d3-interpolate "1 - 3"
d3-timer "1 - 3" d3-timer "1 - 3"
daisyui@1.16.4:
version "1.16.4"
resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-1.16.4.tgz#52773401c0962e37ef40507d29f0e513c7f2856f"
integrity sha512-bpPUlIR6PJdnaM+Vj+Rd0ljMwbdwjvFAW9E/bhxCRDEU48OnmpKQxnkwNGAtXbwWWATS6I1dEIlLdM8zCbV3uQ==
damerau-levenshtein@^1.0.7: damerau-levenshtein@^1.0.7:
version "1.0.8" version "1.0.8"
resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7" resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@ -10216,6 +10218,25 @@ raw-body@2.5.1, raw-body@^2.2.0:
iconv-lite "0.4.24" iconv-lite "0.4.24"
unpipe "1.0.0" unpipe "1.0.0"
rc-slider@10.0.1:
version "10.0.1"
resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-10.0.1.tgz#7058c68ff1e1aa4e7c3536e5e10128bdbccb87f9"
integrity sha512-igTKF3zBet7oS/3yNiIlmU8KnZ45npmrmHlUUio8PNbIhzMcsh+oE/r2UD42Y6YD2D/s+kzCQkzQrPD6RY435Q==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.5"
rc-util "^5.18.1"
shallowequal "^1.1.0"
rc-util@^5.18.1:
version "5.24.4"
resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.24.4.tgz#a4126f01358c86f17c1bf380a1d83d6c9155ae65"
integrity sha512-2a4RQnycV9eV7lVZPEJ7QwJRPlZNc06J7CwcwZo4vIHr3PfUqtYgl1EkUV9ETAc6VRRi8XZOMFhYG63whlIC9Q==
dependencies:
"@babel/runtime" "^7.18.3"
react-is "^16.12.0"
shallowequal "^1.1.0"
rc@^1.2.8: rc@^1.2.8:
version "1.2.8" version "1.2.8"
resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed" resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@ -10346,7 +10367,7 @@ react-instantsearch-hooks@6.24.1:
dequal "^2.0.0" dequal "^2.0.0"
instantsearch.js "^4.40.1" instantsearch.js "^4.40.1"
react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0: react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
version "16.13.1" version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==