diff --git a/web/components/contract/contract-info-dialog.tsx b/web/components/contract/contract-info-dialog.tsx index a41be451..9bf4390c 100644 --- a/web/components/contract/contract-info-dialog.tsx +++ b/web/components/contract/contract-info-dialog.tsx @@ -19,11 +19,12 @@ import ShortToggle from '../widgets/short-toggle' import { DuplicateContractButton } from '../duplicate-contract-button' import { Row } from '../layout/row' import { BETTORS, User } from 'common/user' -import { Button } from '../button' +import { IconButton } from '../button' import { AddLiquidityButton } from './add-liquidity-button' +import { Tooltip } from '../tooltip' -export const contractDetailsButtonClassName = - 'group flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 text-gray-400 hover:text-gray-500' +// export const contractDetailsButtonClassName = +// 'group flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 text-gray-400 hover:text-gray-500' export function ContractInfoDialog(props: { contract: Contract @@ -84,171 +85,173 @@ export function ContractInfoDialog(props: { return ( <> - + + setOpen(true)} + > + - - - + <Modal open={open} setOpen={setOpen}> + <Col className="gap-4 rounded bg-white p-6"> + <Title className="!mt-0 !mb-0" text="This Market" /> - <table className="table-compact table-zebra table w-full text-gray-500"> - <tbody> - <tr> - <td>Type</td> - <td>{typeDisplay}</td> - </tr> - - <tr> - <td>Payout</td> - <td className="flex gap-1"> - {mechanism === 'cpmm-1' ? ( - <> - Fixed{' '} - <InfoTooltip text="Each YES share is worth M$1 if YES wins." /> - </> - ) : ( - <> - Parimutuel{' '} - <InfoTooltip text="Each share is a fraction of the pool. " /> - </> - )} - </td> - </tr> - - <tr> - <td>Market created</td> - <td>{formatTime(createdTime)}</td> - </tr> - - {closeTime && ( + <table className="table-compact table-zebra table w-full text-gray-500"> + <tbody> <tr> - <td>Market close{closeTime > Date.now() ? 's' : 'd'}</td> - <td>{formatTime(closeTime)}</td> + <td>Type</td> + <td>{typeDisplay}</td> </tr> - )} - {resolutionTime && ( <tr> - <td>Market resolved</td> - <td>{formatTime(resolutionTime)}</td> - </tr> - )} - - <tr> - <td> - <span className="mr-1">Volume</span> - <InfoTooltip text="Total amount bought or sold" /> - </td> - <td>{formatMoney(contract.volume)}</td> - </tr> - - <tr> - <td>{capitalize(BETTORS)}</td> - <td>{uniqueBettorCount ?? '0'}</td> - </tr> - - <tr> - <td> - <Row> - <span className="mr-1">Elasticity</span> - <InfoTooltip - text={ - mechanism === 'cpmm-1' - ? 'Probability change between a M$50 bet on YES and NO' - : 'Probability change from a M$100 bet' - } - /> - </Row> - </td> - <td>{formatPercent(elasticity)}</td> - </tr> - - <tr> - <td>Liquidity subsidies</td> - <td> - {mechanism === 'cpmm-1' - ? formatMoney(contract.totalLiquidity) - : formatMoney(100)} - </td> - </tr> - - <tr> - <td>Pool</td> - <td> - {mechanism === 'cpmm-1' && outcomeType === 'BINARY' - ? `${Math.round(pool.YES)} YES, ${Math.round(pool.NO)} NO` - : mechanism === 'cpmm-1' && outcomeType === 'PSEUDO_NUMERIC' - ? `${Math.round(pool.YES)} HIGHER, ${Math.round( - pool.NO - )} LOWER` - : contractPool(contract)} - </td> - </tr> - - {/* Show a path to Firebase if user is an admin, or we're on localhost */} - {(isAdmin || isDev) && ( - <tr> - <td>[ADMIN] Firestore</td> - <td> - <SiteLink href={firestoreConsolePath(id)}> - Console link - </SiteLink> + <td>Payout</td> + <td className="flex gap-1"> + {mechanism === 'cpmm-1' ? ( + <> + Fixed{' '} + <InfoTooltip text="Each YES share is worth M$1 if YES wins." /> + </> + ) : ( + <> + Parimutuel{' '} + <InfoTooltip text="Each share is a fraction of the pool. " /> + </> + )} </td> </tr> - )} - {isAdmin && ( - <tr> - <td>[ADMIN] Featured</td> - <td> - <ShortToggle - on={featured} - setOn={setFeatured} - onChange={onFeaturedToggle} - /> - </td> - </tr> - )} - {user && ( - <tr> - <td>{isAdmin ? '[ADMIN]' : ''} Unlisted</td> - <td> - <ShortToggle - disabled={ - isUnlisted - ? !(isAdmin || (isCreator && wasUnlistedByCreator)) - : !(isCreator || isAdmin) - } - on={contract.visibility === 'unlisted'} - setOn={(b) => - updateContract(id, { - visibility: b ? 'unlisted' : 'public', - unlistedById: b ? user.id : '', - }) - } - /> - </td> - </tr> - )} - </tbody> - </table> - <Row className="flex-wrap"> - {mechanism === 'cpmm-1' && ( - <AddLiquidityButton contract={contract} className="mr-2" /> - )} - <DuplicateContractButton contract={contract} /> - </Row> - </Col> - </Modal> + <tr> + <td>Market created</td> + <td>{formatTime(createdTime)}</td> + </tr> + + {closeTime && ( + <tr> + <td>Market close{closeTime > Date.now() ? 's' : 'd'}</td> + <td>{formatTime(closeTime)}</td> + </tr> + )} + + {resolutionTime && ( + <tr> + <td>Market resolved</td> + <td>{formatTime(resolutionTime)}</td> + </tr> + )} + + <tr> + <td> + <span className="mr-1">Volume</span> + <InfoTooltip text="Total amount bought or sold" /> + </td> + <td>{formatMoney(contract.volume)}</td> + </tr> + + <tr> + <td>{capitalize(BETTORS)}</td> + <td>{uniqueBettorCount ?? '0'}</td> + </tr> + + <tr> + <td> + <Row> + <span className="mr-1">Elasticity</span> + <InfoTooltip + text={ + mechanism === 'cpmm-1' + ? 'Probability change between a M$50 bet on YES and NO' + : 'Probability change from a M$100 bet' + } + /> + </Row> + </td> + <td>{formatPercent(elasticity)}</td> + </tr> + + <tr> + <td>Liquidity subsidies</td> + <td> + {mechanism === 'cpmm-1' + ? formatMoney(contract.totalLiquidity) + : formatMoney(100)} + </td> + </tr> + + <tr> + <td>Pool</td> + <td> + {mechanism === 'cpmm-1' && outcomeType === 'BINARY' + ? `${Math.round(pool.YES)} YES, ${Math.round(pool.NO)} NO` + : mechanism === 'cpmm-1' && + outcomeType === 'PSEUDO_NUMERIC' + ? `${Math.round(pool.YES)} HIGHER, ${Math.round( + pool.NO + )} LOWER` + : contractPool(contract)} + </td> + </tr> + + {/* Show a path to Firebase if user is an admin, or we're on localhost */} + {(isAdmin || isDev) && ( + <tr> + <td>[ADMIN] Firestore</td> + <td> + <SiteLink href={firestoreConsolePath(id)}> + Console link + </SiteLink> + </td> + </tr> + )} + {isAdmin && ( + <tr> + <td>[ADMIN] Featured</td> + <td> + <ShortToggle + on={featured} + setOn={setFeatured} + onChange={onFeaturedToggle} + /> + </td> + </tr> + )} + {user && ( + <tr> + <td>{isAdmin ? '[ADMIN]' : ''} Unlisted</td> + <td> + <ShortToggle + disabled={ + isUnlisted + ? !(isAdmin || (isCreator && wasUnlistedByCreator)) + : !(isCreator || isAdmin) + } + on={contract.visibility === 'unlisted'} + setOn={(b) => + updateContract(id, { + visibility: b ? 'unlisted' : 'public', + unlistedById: b ? user.id : '', + }) + } + /> + </td> + </tr> + )} + </tbody> + </table> + + <Row className="flex-wrap"> + {mechanism === 'cpmm-1' && ( + <AddLiquidityButton contract={contract} className="mr-2" /> + )} + <DuplicateContractButton contract={contract} /> + </Row> + </Col> + </Modal> + </Tooltip> </> ) } diff --git a/web/components/contract/extra-contract-actions-row.tsx b/web/components/contract/extra-contract-actions-row.tsx index 0c77c666..7353bb6e 100644 --- a/web/components/contract/extra-contract-actions-row.tsx +++ b/web/components/contract/extra-contract-actions-row.tsx @@ -2,7 +2,7 @@ import { ShareIcon } from '@heroicons/react/outline' import { Row } from '../layout/row' import { Contract } from 'web/lib/firebase/contracts' import React, { useState } from 'react' -import { Button } from 'web/components/button' +import { IconButton } from 'web/components/button' import { useUser } from 'web/hooks/use-user' import { ShareModal } from './share-modal' import { FollowMarketButton } from 'web/components/follow-market-button' @@ -16,15 +16,14 @@ export function ExtraContractActionsRow(props: { contract: Contract }) { const [isShareOpen, setShareOpen] = useState(false) return ( - <Row> + <Row className="gap-1"> <FollowMarketButton contract={contract} user={user} /> <LikeMarketButton contract={contract} user={user} /> <Tooltip text="Share" placement="bottom" noTap noFade> - <Button - size="sm" - color="gray-white" + <IconButton + size="2xs" className={'flex'} onClick={() => setShareOpen(true)} > @@ -35,7 +34,7 @@ export function ExtraContractActionsRow(props: { contract: Contract }) { contract={contract} user={user} /> - </Button> + </IconButton> </Tooltip> <ContractInfoDialog contract={contract} user={user} /> diff --git a/web/components/contract/tip-button.tsx b/web/components/contract/tip-button.tsx index e108b7b6..fd80d97f 100644 --- a/web/components/contract/tip-button.tsx +++ b/web/components/contract/tip-button.tsx @@ -13,8 +13,7 @@ export function TipButton(props: { isCompact?: boolean disabled?: boolean }) { - const { tipAmount, totalTipped, userTipped, isCompact, onClick, disabled } = - props + const { tipAmount, totalTipped, userTipped, onClick, disabled } = props const tipDisplay = shortFormatNumber(Math.ceil(totalTipped / 10)) @@ -35,6 +34,7 @@ export function TipButton(props: { onClick={onClick} disabled={disabled} className={clsx( + 'px-2 py-1 text-xs', //2xs button 'text-greyscale-6 transition-transform hover:text-indigo-600 disabled:cursor-not-allowed', !disabled ? 'hover:rotate-12' : '' )} @@ -43,20 +43,20 @@ export function TipButton(props: { > <Col className={clsx('relative', disabled ? 'opacity-30' : '')}> <TipJar - size={16} - color={hover || userTipped ? '#4f46e5' : '#66667C'} + size={18} + color={userTipped || (hover && !disabled) ? '#4f46e5' : '#66667C'} fill={userTipped ? '#4f46e5' : 'none'} /> <div className={clsx( - ' absolute top-[3px] text-[0.5rem]', + ' absolute top-[2px] text-[0.5rem]', userTipped ? 'text-white' : '', tipDisplay.length === 1 - ? 'left-[6px]' + ? 'left-[7px]' : tipDisplay.length === 2 - ? 'left-[3.5px]' + ? 'left-[4.5px]' : tipDisplay.length > 2 - ? 'left-[3px] top-[5px] text-[0.35rem]' + ? 'left-[4px] top-[2.5px] text-[0.35rem]' : '' )} > diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx index a2701d71..73d89c67 100644 --- a/web/components/feed/feed-comments.tsx +++ b/web/components/feed/feed-comments.tsx @@ -178,14 +178,10 @@ export function CommentActions(props: { }) { const { onReplyClick, comment, showTip, myTip, totalTip, contract } = props return ( - <Row className="grow justify-end gap-2"> + <Row className="grow justify-end"> {onReplyClick && ( - <IconButton - size={'xs'} - className={clsx('mt-0 mb-1 max-w-xs')} - onClick={() => onReplyClick(comment)} - > - <ReplyIcon className="h-4 w-4" /> + <IconButton size={'xs'} onClick={() => onReplyClick(comment)}> + <ReplyIcon className="h-5 w-5" /> </IconButton> )} {showTip && ( diff --git a/web/components/follow-market-button.tsx b/web/components/follow-market-button.tsx index 319d4af6..5185390b 100644 --- a/web/components/follow-market-button.tsx +++ b/web/components/follow-market-button.tsx @@ -1,4 +1,4 @@ -import { Button } from 'web/components/button' +import { IconButton } from 'web/components/button' import { Contract, followContract, @@ -33,9 +33,8 @@ export const FollowMarketButton = (props: { noTap noFade > - <Button - size={'sm'} - color={'gray-white'} + <IconButton + size="2xs" onClick={async () => { if (!user) return firebaseLogin() if (followers?.includes(user.id)) { @@ -65,18 +64,12 @@ export const FollowMarketButton = (props: { > {watching ? ( <Col className={'items-center gap-x-2 sm:flex-row'}> - <EyeOffIcon - className={clsx('h-5 w-5 sm:h-6 sm:w-6')} - aria-hidden="true" - /> + <EyeOffIcon className={clsx('h-5 w-5')} aria-hidden="true" /> {/* Unwatch */} </Col> ) : ( <Col className={'items-center gap-x-2 sm:flex-row'}> - <EyeIcon - className={clsx('h-5 w-5 sm:h-6 sm:w-6')} - aria-hidden="true" - /> + <EyeIcon className={clsx('h-5 w-5')} aria-hidden="true" /> {/* Watch */} </Col> )} @@ -87,7 +80,7 @@ export const FollowMarketButton = (props: { followers?.includes(user?.id ?? 'nope') ? 'watched' : 'unwatched' } a question!`} /> - </Button> + </IconButton> </Tooltip> ) }