diff --git a/web/components/challenges/create-challenge-modal.tsx b/web/components/challenges/create-challenge-modal.tsx index 6c810a44..f18fbdad 100644 --- a/web/components/challenges/create-challenge-modal.tsx +++ b/web/components/challenges/create-challenge-modal.tsx @@ -1,8 +1,7 @@ import clsx from 'clsx' import dayjs from 'dayjs' import React, { useEffect, useState } from 'react' -import { LinkIcon, SwitchVerticalIcon } from '@heroicons/react/outline' -import toast from 'react-hot-toast' +import { SwitchVerticalIcon } from '@heroicons/react/outline' import { Col } from '../layout/col' import { Row } from '../layout/row' @@ -16,7 +15,6 @@ import { SiteLink } from 'web/components/site-link' import { formatMoney } from 'common/util/format' import { NoLabel, YesLabel } from '../outcome-label' import { QRCode } from '../qr-code' -import { copyToClipboard } from 'web/lib/util/copy' import { AmountInput } from '../amount-input' import { getProbability } from 'common/calculate' import { createMarket } from 'web/lib/firebase/api' @@ -26,6 +24,7 @@ import Textarea from 'react-expanding-textarea' import { useTextEditor } from 'web/components/editor' import { LoadingIndicator } from 'web/components/loading-indicator' import { track } from 'web/lib/service/analytics' +import { CopyLinkButton } from '../copy-link-button' type challengeInfo = { amount: number @@ -302,16 +301,7 @@ function CreateChallengeForm(props: { <div>Share the challenge using the link.</div> - <button - onClick={() => { - copyToClipboard(challengeSlug) - toast('Link copied to clipboard!') - }} - className={'btn btn-outline mb-4 whitespace-nowrap normal-case'} - > - <LinkIcon className={'mr-2 h-5 w-5'} /> - Copy link - </button> + <CopyLinkButton url={challengeSlug} /> <QRCode url={challengeSlug} className="self-center" /> <Row className={'gap-1 text-gray-500'}> diff --git a/web/components/comment-input.tsx b/web/components/comment-input.tsx index 6304b58d..65a697fe 100644 --- a/web/components/comment-input.tsx +++ b/web/components/comment-input.tsx @@ -138,16 +138,6 @@ export function CommentInputTextArea(props: { <LoadingIndicator spinnerClassName="border-gray-500" /> )} </TextEditor> - <Row> - {!user && ( - <button - className="btn btn-outline btn-sm mt-2 normal-case" - onClick={submitComment} - > - Add my comment - </button> - )} - </Row> </> ) } diff --git a/web/components/contract/share-modal.tsx b/web/components/contract/share-modal.tsx index 72c7aba3..df19b955 100644 --- a/web/components/contract/share-modal.tsx +++ b/web/components/contract/share-modal.tsx @@ -1,5 +1,4 @@ import { LinkIcon } from '@heroicons/react/outline' -import toast from 'react-hot-toast' import { Contract } from 'common/contract' import { contractPath } from 'web/lib/firebase/contracts' @@ -9,9 +8,7 @@ import { Row } from '../layout/row' import { ShareEmbedButton } from '../share-embed-button' import { Title } from '../title' import { TweetButton } from '../tweet-button' -import { Button } from '../button' -import { copyToClipboard } from 'web/lib/util/copy' -import { track, withTracking } from 'web/lib/service/analytics' +import { withTracking } from 'web/lib/service/analytics' import { ENV_CONFIG } from 'common/envs/constants' import { User } from 'common/user' import { SiteLink } from '../site-link' @@ -22,6 +19,7 @@ import { useState } from 'react' import { CHALLENGES_ENABLED } from 'common/challenge' import ChallengeIcon from 'web/lib/icons/challenge-icon' import { QRCode } from '../qr-code' +import { CopyLinkButton } from '../copy-link-button' export function ShareModal(props: { contract: Contract @@ -61,20 +59,7 @@ export function ShareModal(props: { width={150} height={150} /> - <Button - size="2xl" - color="indigo" - className={'mb-2 flex max-w-xs self-center'} - onClick={() => { - copyToClipboard(shareUrl) - toast.success('Link copied!', { - icon: linkIcon, - }) - track('copy share link') - }} - > - {linkIcon} Copy link - </Button> + <CopyLinkButton url={shareUrl} tracking="copy share link" /> <Row className="z-0 flex-wrap justify-center gap-4 self-center"> <TweetButton diff --git a/web/components/copy-link-button.tsx b/web/components/copy-link-button.tsx index f3489f3d..25f7e54a 100644 --- a/web/components/copy-link-button.tsx +++ b/web/components/copy-link-button.tsx @@ -21,10 +21,11 @@ export function CopyLinkButton(props: { return ( <Row className="w-full"> <input - className="input input-bordered flex-1 rounded-r-none text-gray-500" + className="block w-full rounded-none rounded-l-md border-gray-300 text-gray-400 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" readOnly type="text" value={displayUrl ?? url} + onFocus={(e) => e.target.select()} /> <Menu @@ -37,7 +38,7 @@ export function CopyLinkButton(props: { > <Menu.Button className={clsx( - 'btn btn-xs border-2 border-green-600 bg-white normal-case text-green-600 hover:border-green-600 hover:bg-white', + 'relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500', buttonClassName )} > diff --git a/web/components/share-post-modal.tsx b/web/components/share-post-modal.tsx index fa8658c6..28488bb8 100644 --- a/web/components/share-post-modal.tsx +++ b/web/components/share-post-modal.tsx @@ -1,13 +1,9 @@ -import { LinkIcon } from '@heroicons/react/outline' -import toast from 'react-hot-toast' -import { copyToClipboard } from 'web/lib/util/copy' -import { track } from 'web/lib/service/analytics' import { Modal } from './layout/modal' import { Col } from './layout/col' import { Title } from './title' -import { Button } from './button' import { TweetButton } from './tweet-button' import { Row } from './layout/row' +import { CopyLinkButton } from './copy-link-button' export function SharePostModal(props: { shareUrl: string @@ -16,26 +12,11 @@ export function SharePostModal(props: { }) { const { isOpen, setOpen, shareUrl } = props - const linkIcon = <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" /> - return ( <Modal open={isOpen} setOpen={setOpen} size="md"> <Col className="gap-4 rounded bg-white p-4"> <Title className="!mt-0 !mb-2" text="Share this post" /> - <Button - size="2xl" - color="gradient" - className={'mb-2 flex max-w-xs self-center'} - onClick={() => { - copyToClipboard(shareUrl) - toast.success('Link copied!', { - icon: linkIcon, - }) - track('copy share post link') - }} - > - {linkIcon} Copy link - </Button> + <CopyLinkButton url={shareUrl} tracking="copy share post link" /> <Row className="z-0 justify-start gap-4 self-center"> <TweetButton className="self-start" tweetText={shareUrl} /> diff --git a/web/pages/add-funds.tsx b/web/pages/add-funds.tsx index 602de276..66d63359 100644 --- a/web/pages/add-funds.tsx +++ b/web/pages/add-funds.tsx @@ -9,6 +9,7 @@ import { Page } from 'web/components/page' import { useTracking } from 'web/hooks/use-tracking' import { trackCallback } from 'web/lib/service/analytics' import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth' +import { Button } from 'web/components/button' export const getServerSideProps = redirectIfLoggedOut('/') @@ -33,15 +34,15 @@ export default function AddFundsPage() { <Col className="h-full rounded bg-white p-4 py-8 sm:p-8 sm:shadow-md"> <Title className="!mt-0" text="Get Mana" /> <img - className="mb-6 block -scale-x-100 self-center" - src="/stylized-crane-black.png" + className="mb-6 block self-center" + src="/welcome/manipurple.png" width={200} height={200} /> <div className="mb-6 text-gray-500"> - Buy mana (M$) to trade in your favorite markets. <br /> (Not - redeemable for cash.) + Buy mana (M$) to trade in your favorite markets. <br />{' '} + <i>Not redeemable for cash.</i> </div> <div className="mb-2 text-sm text-gray-500">Amount</div> @@ -63,13 +64,14 @@ export default function AddFundsPage() { method="POST" className="mt-8" > - <button - type="submit" - className="btn btn-primary w-full bg-gradient-to-r from-indigo-500 to-blue-500 font-medium hover:from-indigo-600 hover:to-blue-600" + <Button + color="gradient" + size="xl" + className="w-full" onClick={trackCallback('checkout', { amount: amountSelected })} > Checkout - </button> + </Button> </form> </Col> </Col>