diff --git a/common/charity.ts b/common/charity.ts index 0ebeeec1..568ad1a0 100644 --- a/common/charity.ts +++ b/common/charity.ts @@ -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. 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.`, }, @@ -595,7 +595,8 @@ In addition to housing impact litigation, we provide free legal aid, education a 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', 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) => { const slug = charity.name.toLowerCase().replace(/\s/g, '-') diff --git a/web/components/add-funds-modal.tsx b/web/components/add-funds-modal.tsx index cac21f96..335410c7 100644 --- a/web/components/add-funds-modal.tsx +++ b/web/components/add-funds-modal.tsx @@ -35,7 +35,7 @@ export function AddFundsModal(props: {
{manaToUSD(amountSelected)}
-
+
diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx index a7eb3a8e..cae63cf2 100644 --- a/web/components/amount-input.tsx +++ b/web/components/amount-input.tsx @@ -7,6 +7,8 @@ import { ENV_CONFIG } from 'common/envs/constants' import { Row } from './layout/row' import { AddFundsModal } from './add-funds-modal' import { Input } from './input' +import Slider from 'rc-slider' +import 'rc-slider/assets/index.css' export function AmountInput(props: { amount: number | undefined @@ -40,17 +42,13 @@ export function AmountInput(props: { return ( <> - + {error && ( -
+
{error === 'Insufficient balance' ? ( <> Not enough funds. @@ -148,7 +147,7 @@ export function BuyAmountInput(props: { return ( <> - + {showSlider && ( - onAmountChange(parseRaw(parseInt(e.target.value)))} - className="range range-lg only-thumb my-auto align-middle xl:hidden" - step="5" + onChange={(value) => onAmountChange(parseRaw(value as number))} + 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" + 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} /> )} diff --git a/web/components/answers/answer-item.tsx b/web/components/answers/answer-item.tsx index 71ce677e..b7650e6c 100644 --- a/web/components/answers/answer-item.tsx +++ b/web/components/answers/answer-item.tsx @@ -101,7 +101,7 @@ export function AnswerItem(props: { ))} {showChoice ? (
-
) diff --git a/web/components/contract/contract-info-dialog.tsx b/web/components/contract/contract-info-dialog.tsx index 3ddeccac..84cb609c 100644 --- a/web/components/contract/contract-info-dialog.tsx +++ b/web/components/contract/contract-info-dialog.tsx @@ -22,6 +22,7 @@ import { BETTORS, User } from 'common/user' import { IconButton } from '../button' import { AddLiquidityButton } from './add-liquidity-button' import { Tooltip } from '../tooltip' +import { Table } from '../table' export function ContractInfoDialog(props: { contract: Contract @@ -98,7 +99,7 @@ export function ContractInfoDialog(props: { - <table className="table-compact table-zebra table w-full text-gray-500"> + <Table> <tbody> <tr> <td>Type</td> @@ -238,7 +239,7 @@ export function ContractInfoDialog(props: { </tr> )} </tbody> - </table> + </Table> <Row className="flex-wrap"> {mechanism === 'cpmm-1' && ( diff --git a/web/components/contract/contract-report-resolution.tsx b/web/components/contract/contract-report-resolution.tsx index 4fc98ff5..6c052cde 100644 --- a/web/components/contract/contract-report-resolution.tsx +++ b/web/components/contract/contract-report-resolution.tsx @@ -32,7 +32,7 @@ export function ContractReportResolution(props: { contract: Contract }) { } 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' ) diff --git a/web/components/create-post.tsx b/web/components/create-post.tsx index b9e0eb96..f8878cd0 100644 --- a/web/components/create-post.tsx +++ b/web/components/create-post.tsx @@ -56,7 +56,7 @@ export function CreatePost(props: { group?: Group }) { <Title className="!mt-0" text="Create a post" /> <form> <div className="form-control w-full"> - <label className="label"> + <label className="px-1 py-2"> <span className="mb-1"> Title<span className={'text-red-700'}> *</span> </span> @@ -69,7 +69,7 @@ export function CreatePost(props: { group?: Group }) { onChange={(e) => setTitle(e.target.value || '')} /> <Spacer h={6} /> - <label className="label"> + <label className="px-1 py-2"> <span className="mb-1"> Subtitle<span className={'text-red-700'}> *</span> </span> @@ -82,7 +82,7 @@ export function CreatePost(props: { group?: Group }) { onChange={(e) => setSubtitle(e.target.value || '')} /> <Spacer h={6} /> - <label className="label"> + <label className="px-1 py-2"> <span className="mb-1"> Content<span className={'text-red-700'}> *</span> </span> diff --git a/web/components/editor.tsx b/web/components/editor.tsx index 8f49c498..814f0090 100644 --- a/web/components/editor.tsx +++ b/web/components/editor.tsx @@ -258,7 +258,8 @@ export function TextEditor(props: { <> {/* hide placeholder when focused */} <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} /> <EditorContent editor={editor} /> {/* Toolbar, with buttons for images and embeds */} diff --git a/web/components/expanding-input.tsx b/web/components/expanding-input.tsx index ff442348..a387a213 100644 --- a/web/components/expanding-input.tsx +++ b/web/components/expanding-input.tsx @@ -7,7 +7,7 @@ export const ExpandingInput = (props: Parameters<typeof Textarea>[0]) => { return ( <Textarea 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 )} {...rest} diff --git a/web/components/groups/edit-group-button.tsx b/web/components/groups/edit-group-button.tsx index b8d2b84d..4284f6d4 100644 --- a/web/components/groups/edit-group-button.tsx +++ b/web/components/groups/edit-group-button.tsx @@ -52,7 +52,7 @@ export function EditGroupButton(props: { group: Group; className?: string }) { <Modal open={open} setOpen={updateOpen}> <div className="h-full rounded-md bg-white p-8"> <div className="form-control w-full"> - <label className="label"> + <label className="px-1 py-2"> <span className="mb-1">Group name</span> </label> @@ -67,7 +67,7 @@ export function EditGroupButton(props: { group: Group; className?: string }) { <Spacer h={4} /> <div className="form-control w-full"> - <label className="label"> + <label className="px-1 py-2"> <span className="mb-0">Add members</span> </label> <FilterSelectUsers @@ -77,7 +77,7 @@ export function EditGroupButton(props: { group: Group; className?: string }) { /> </div> - <div className="modal-action"> + <div className="flex"> <Button color="red" size="xs" diff --git a/web/components/groups/group-overview.tsx b/web/components/groups/group-overview.tsx index fc2faa14..b10fa1f3 100644 --- a/web/components/groups/group-overview.tsx +++ b/web/components/groups/group-overview.tsx @@ -377,7 +377,7 @@ export function GroupAbout(props: { <div className={'inline-flex items-center'}> <div className="mr-1 text-gray-500">Created by</div> <UserLink - className="text-neutral" + className="text-gray-700" name={creator.name} username={creator.username} /> diff --git a/web/components/groups/group-selector.tsx b/web/components/groups/group-selector.tsx index 04c2a804..35ad0f89 100644 --- a/web/components/groups/group-selector.tsx +++ b/web/components/groups/group-selector.tsx @@ -83,7 +83,7 @@ export function GroupSelector(props: { {() => ( <> {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 <InfoTooltip text="Question will be displayed alongside the other questions in the group." /> </Combobox.Label> diff --git a/web/components/input.tsx b/web/components/input.tsx index f37bfc78..e2209f8b 100644 --- a/web/components/input.tsx +++ b/web/components/input.tsx @@ -2,21 +2,21 @@ import clsx from 'clsx' import React from 'react' /** Text input. Wraps html `<input>` */ -export const Input = (props: JSX.IntrinsicElements['input']) => { - const { className, ...rest } = props +export const Input = ( + props: { error?: boolean } & JSX.IntrinsicElements['input'] +) => { + const { error, className, ...rest } = props return ( <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} /> ) } - -/* - 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 - */ diff --git a/web/components/leaderboard.tsx b/web/components/leaderboard.tsx index 1035e9d1..32caead9 100644 --- a/web/components/leaderboard.tsx +++ b/web/components/leaderboard.tsx @@ -2,6 +2,7 @@ import clsx from 'clsx' import { Avatar } from './avatar' import { Row } from './layout/row' import { SiteLink } from './site-link' +import { Table } from './table' import { Title } from './title' 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="overflow-x-auto"> - <table className="table-zebra table-compact table w-full text-gray-500"> + <Table> <thead> - <tr className="p-2"> + <tr> <th>#</th> <th>Name</th> {columns.map((column) => ( @@ -59,7 +60,7 @@ export function Leaderboard<T extends LeaderboardEntry>(props: { </tr> ))} </tbody> - </table> + </Table> </div> )} </div> diff --git a/web/components/limit-bets.tsx b/web/components/limit-bets.tsx index 254962cb..a5abe803 100644 --- a/web/components/limit-bets.tsx +++ b/web/components/limit-bets.tsx @@ -14,6 +14,7 @@ import { Row } from './layout/row' import { LoadingIndicator } from './loading-indicator' import { BinaryOutcomeLabel, PseudoNumericOutcomeLabel } from './outcome-label' import { Subtitle } from './subtitle' +import { Table } from './table' import { Title } from './title' export function LimitBets(props: { @@ -74,7 +75,7 @@ export function LimitOrderTable(props: { const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC' return ( - <table className="table-compact table w-full rounded text-gray-500"> + <Table className="rounded"> <thead> <tr> {!isYou && <th></th>} @@ -89,7 +90,7 @@ export function LimitOrderTable(props: { <LimitBet key={bet.id} bet={bet} contract={contract} isYou={isYou} /> ))} </tbody> - </table> + </Table> ) } diff --git a/web/components/manalinks/create-links-button.tsx b/web/components/manalinks/create-links-button.tsx index 8d5bac67..cae2af30 100644 --- a/web/components/manalinks/create-links-button.tsx +++ b/web/components/manalinks/create-links-button.tsx @@ -14,6 +14,7 @@ import { DuplicateIcon } from '@heroicons/react/outline' import { QRCode } from '../qr-code' import { Input } from '../input' import { ExpandingInput } from '../expanding-input' +import { Select } from '../select' export function CreateLinksButton(props: { user: User @@ -116,7 +117,7 @@ function CreateManalinkForm(props: { <Title className="!my-0" text="Create a Manalink" /> <div className="flex flex-col flex-wrap gap-x-5 gap-y-2"> <div className="form-control flex-auto"> - <label className="label">Amount</label> + <label className="px-1 py-2">Amount</label> <div className="relative"> <span className="absolute mx-3 mt-3.5 text-sm text-gray-400"> M$ @@ -136,7 +137,7 @@ function CreateManalinkForm(props: { </div> <div className="flex flex-col gap-2 md:flex-row"> <div className="form-control w-full md:w-1/2"> - <label className="label">Uses</label> + <label className="px-1 py-2">Uses</label> <Input type="number" min="1" @@ -149,9 +150,8 @@ function CreateManalinkForm(props: { /> </div> <div className="form-control w-full md:w-1/2"> - <label className="label">Expires in</label> - <select - className="!select !select-bordered" + <label className="px-1 py-2">Expires in</label> + <Select value={expiresIn} defaultValue={defaultExpire} onChange={(e) => { @@ -160,11 +160,11 @@ function CreateManalinkForm(props: { }} > {expireOptions} - </select> + </Select> </div> </div> <div className="form-control w-full"> - <label className="label">Message</label> + <label className="px-1 py-2">Message</label> <ExpandingInput placeholder={defaultMessage} maxLength={200} diff --git a/web/components/number-input.tsx b/web/components/number-input.tsx index 6509a5d7..5404994f 100644 --- a/web/components/number-input.tsx +++ b/web/components/number-input.tsx @@ -32,24 +32,19 @@ export function NumberInput(props: { return ( <Col className={className}> - <label className="input-group"> - <Input - className={clsx( - 'max-w-[200px] !text-lg', - error && 'input-error', - inputClassName - )} - ref={inputRef} - type="number" - pattern="[0-9]*" - inputMode="numeric" - placeholder={placeholder ?? '0'} - maxLength={9} - value={numberString} - disabled={disabled} - onChange={(e) => onChange(e.target.value.substring(0, 9))} - /> - </label> + <Input + className={clsx('max-w-[200px] !text-lg', inputClassName)} + ref={inputRef} + type="number" + pattern="[0-9]*" + inputMode="numeric" + placeholder={placeholder ?? '0'} + maxLength={9} + value={numberString} + error={!!error} + disabled={disabled} + onChange={(e) => onChange(e.target.value.substring(0, 9))} + /> <Spacer h={4} /> diff --git a/web/components/probability-input.tsx b/web/components/probability-input.tsx index 9b58dc64..447dcdb0 100644 --- a/web/components/probability-input.tsx +++ b/web/components/probability-input.tsx @@ -30,7 +30,7 @@ export function ProbabilityInput(props: { return ( <Col className={className}> - <label className="input-group"> + <label className="flex w-full items-stretch"> <Input className={clsx('max-w-[200px] !text-lg', inputClassName)} type="number" diff --git a/web/components/probability-selector.tsx b/web/components/probability-selector.tsx index 010c7bfa..c129ab81 100644 --- a/web/components/probability-selector.tsx +++ b/web/components/probability-selector.tsx @@ -1,5 +1,4 @@ import { Input } from './input' -import { Row } from './layout/row' export function ProbabilitySelector(props: { probabilityInt: number @@ -9,21 +8,19 @@ export function ProbabilitySelector(props: { const { probabilityInt, setProbabilityInt, isSubmitting } = props return ( - <Row className="items-center gap-2"> - <label className="input-group input-group-lg text-lg"> - <Input - type="number" - value={probabilityInt} - className="input-md w-28 !text-lg" - disabled={isSubmitting} - min={1} - max={99} - onChange={(e) => - setProbabilityInt(parseInt(e.target.value.substring(0, 2))) - } - /> - <span>%</span> - </label> - </Row> + <label className="flex items-center text-lg"> + <Input + type="number" + value={probabilityInt} + className="input-md w-28 !text-lg" + disabled={isSubmitting} + min={1} + max={99} + onChange={(e) => + setProbabilityInt(parseInt(e.target.value.substring(0, 2))) + } + /> + <span>%</span> + </label> ) } diff --git a/web/components/select.tsx b/web/components/select.tsx new file mode 100644 index 00000000..7533f737 --- /dev/null +++ b/web/components/select.tsx @@ -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> + ) +} diff --git a/web/components/table.tsx b/web/components/table.tsx new file mode 100644 index 00000000..76bfc68c --- /dev/null +++ b/web/components/table.tsx @@ -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> + ) +} diff --git a/web/components/toast-clipboard.tsx b/web/components/toast-clipboard.tsx index 387acaa5..216d9399 100644 --- a/web/components/toast-clipboard.tsx +++ b/web/components/toast-clipboard.tsx @@ -8,7 +8,7 @@ export function ToastClipboard(props: { className?: string }) { return ( <Row 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 ' + 'h-15 z-10 w-[15rem] p-2 pr-3 text-gray-500', className diff --git a/web/package.json b/web/package.json index 1d7eea54..9228632b 100644 --- a/web/package.json +++ b/web/package.json @@ -46,7 +46,6 @@ "d3-scale": "4.0.2", "d3-selection": "3.0.0", "d3-shape": "3.1.0", - "daisyui": "1.16.4", "dayjs": "1.10.7", "firebase": "9.9.3", "gridjs": "5.0.2", @@ -56,6 +55,7 @@ "next": "12.3.1", "node-fetch": "3.2.4", "prosemirror-state": "1.4.1", + "rc-slider": "10.0.1", "react": "18.2.0", "react-confetti": "6.0.1", "react-dom": "18.2.0", diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx index f2c46854..3977ef67 100644 --- a/web/pages/_document.tsx +++ b/web/pages/_document.tsx @@ -23,7 +23,7 @@ export default function Document() { crossOrigin="anonymous" /> </Head> - <body className="font-readex-pro bg-base-200 min-h-screen"> + <body className="font-readex-pro bg-greyscale-1 min-h-screen"> <Main /> <NextScript /> </body> diff --git a/web/pages/contract-search-firestore.tsx b/web/pages/contract-search-firestore.tsx index 0f81499f..a9ac9d22 100644 --- a/web/pages/contract-search-firestore.tsx +++ b/web/pages/contract-search-firestore.tsx @@ -10,6 +10,7 @@ import { } from 'web/hooks/use-persistent-state' import { PAST_BETS } from 'common/user' import { Input } from 'web/components/input' +import { Select } from 'web/components/select' const MAX_CONTRACTS_RENDERED = 100 @@ -96,17 +97,13 @@ export default function ContractSearchFirestore(props: { placeholder="Search markets" className="w-full" /> - <select - className="select select-bordered" - value={sort} - onChange={(e) => setSort(e.target.value)} - > + <Select value={sort} onChange={(e) => setSort(e.target.value)}> <option value="score">Trending</option> <option value="newest">Newest</option> <option value="most-traded">Most ${PAST_BETS}</option> <option value="24-hour-vol">24h volume</option> <option value="close-date">Closing soon</option> - </select> + </Select> </div> <ContractsGrid contracts={matches} showTime={showTime} /> </div> diff --git a/web/pages/create.tsx b/web/pages/create.tsx index 5229ca39..d74d54d8 100644 --- a/web/pages/create.tsx +++ b/web/pages/create.tsx @@ -97,10 +97,8 @@ export default function Create(props: { auth: { user: User } }) { <form> <div className="form-control w-full"> - <label className="label"> - <span className="mb-1"> - Question<span className={'text-red-700'}>*</span> - </span> + <label className="px-1 pt-2 pb-3"> + Question<span className={'text-red-700'}>*</span> </label> <ExpandingInput @@ -280,9 +278,7 @@ export function NewContract(props: { return ( <div> - <label className="label"> - <span className="mb-1">Answer type</span> - </label> + <label className="px-1 pt-2 pb-3">Answer type</label> <Row> <ChoicesToggleGroup currentChoice={outcomeType} @@ -319,7 +315,7 @@ export function NewContract(props: { {outcomeType === 'PSEUDO_NUMERIC' && ( <> <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> <InfoTooltip text="The lower and higher bounds of the numeric range. Choose bounds the value could reasonably be expected to hit." /> </label> @@ -364,7 +360,7 @@ export function NewContract(props: { )} </div> <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> <InfoTooltip text="The starting value for this market. Should be in between min and max values." /> </label> @@ -421,7 +417,7 @@ export function NewContract(props: { <Spacer h={6} /> <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> <InfoTooltip text="Predicting will be halted after this time (local timezone)." /> </label> @@ -464,7 +460,7 @@ export function NewContract(props: { <Spacer h={6} /> <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> <InfoTooltip text="Optional. Describe how you will resolve this question." /> </label> @@ -475,23 +471,23 @@ export function NewContract(props: { <span className={'text-error'}>{errorText}</span> <Row className="items-end justify-between"> <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> <InfoTooltip text={`Cost to create your question. This amount is used to subsidize predictions.`} /> </label> {!deservesFreeMarket ? ( - <div className="label-text text-neutral pl-1"> + <div className="pl-1 text-sm text-gray-700"> {formatMoney(ante)} </div> ) : ( - <Row> - <div className="label-text text-neutral pl-1 line-through"> + <Row className="text-sm"> + <div className="pl-1 text-gray-700 line-through"> {formatMoney(ante)} </div> - <div className="label-text text-primary pl-1">FREE </div> - <div className="label-text pl-1 text-gray-500"> + <div className="text-primary pl-1">FREE </div> + <div className="pl-1 text-gray-500"> (You have{' '} {FREE_MARKETS_PER_USER_MAX - (creator?.freeMarketsCreated ?? 0)}{' '} free markets left) diff --git a/web/pages/groups.tsx b/web/pages/groups.tsx index 90781da9..f661f34d 100644 --- a/web/pages/groups.tsx +++ b/web/pages/groups.tsx @@ -228,7 +228,7 @@ function GroupMembersList(props: { group: Group }) { const { totalMembers } = group if (totalMembers === 1) return <div /> return ( - <div className="text-neutral flex flex-wrap gap-1"> + <div className="flex flex-wrap gap-1 text-gray-700"> <span>{totalMembers} members</span> </div> ) diff --git a/web/pages/post/[...slugs]/index.tsx b/web/pages/post/[...slugs]/index.tsx index 6f999bfe..c0b4a815 100644 --- a/web/pages/post/[...slugs]/index.tsx +++ b/web/pages/post/[...slugs]/index.tsx @@ -86,7 +86,7 @@ export default function PostPage(props: { <div className={'inline-flex'}> <div className="mr-1 text-gray-500">Created by</div> <UserLink - className="text-neutral" + className="text-gray-700" name={creator.name} username={creator.username} /> diff --git a/web/pages/profile.tsx b/web/pages/profile.tsx index f85ff0c8..c32fe2fb 100644 --- a/web/pages/profile.tsx +++ b/web/pages/profile.tsx @@ -43,7 +43,7 @@ function EditUserField(props: { return ( <div> - <label className="label">{label}</label> + <label className="px-1 py-2">{label}</label> {field === 'bio' ? ( <ExpandingInput @@ -156,7 +156,7 @@ export default function ProfilePage(props: { </Row> <div> - <label className="label">Display name</label> + <label className="px-1 py-2">Display name</label> <Input type="text" placeholder="Display name" @@ -167,7 +167,7 @@ export default function ProfilePage(props: { </div> <div> - <label className="label">Username</label> + <label className="px-1 py-2">Username</label> <Input type="text" placeholder="Username" @@ -193,15 +193,15 @@ export default function ProfilePage(props: { ))} <div> - <label className="label">Email</label> + <label className="px-1 py-2">Email</label> <div className="ml-1 text-gray-500"> {privateUser.email ?? '\u00a0'} </div> </div> <div> - <label className="label">API key</label> - <div className="input-group w-full"> + <label className="px-1 py-2">API key</label> + <div className="flex w-full items-stretch"> <Input type="text" placeholder="Click refresh to generate key" diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 0390038f..f9268d1d 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -16,6 +16,10 @@ module.exports = { ), extend: { colors: { + primary: '#11b981', + 'primary-focus': '#069668', + warning: '#F59E0B', // amber-500 TODO: change color + error: '#ff5724', // TODO: change color 'red-25': '#FDF7F6', 'greyscale-1': '#FBFBFF', 'greyscale-1.5': '#F4F4FB', @@ -42,7 +46,6 @@ module.exports = { require('@tailwindcss/forms'), require('@tailwindcss/typography'), require('@tailwindcss/line-clamp'), - require('daisyui'), plugin(function ({ addUtilities }) { addUtilities({ '.scrollbar-hide': { @@ -61,57 +64,7 @@ module.exports = { 'overflow-wrap': 'anywhere', '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', - }, - }, - ], - }, } diff --git a/yarn.lock b/yarn.lock index 0ac185dd..6f68fc0f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1303,6 +1303,13 @@ dependencies: 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": version "7.18.3" 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-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: version "1.0.8" 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" 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: version "1.2.8" 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" 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" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==