From d42ec42b0e5c114b0afe1e61cfa718479a80cf36 Mon Sep 17 00:00:00 2001 From: Austin Chen Date: Wed, 5 Oct 2022 09:55:46 -0400 Subject: [PATCH] Standardize on CopyLinkButton --- .../challenges/create-challenge-modal.tsx | 16 +++------------- web/components/contract/share-modal.tsx | 16 ++-------------- web/components/copy-link-button.tsx | 5 +++-- web/components/share-post-modal.tsx | 18 ++---------------- 4 files changed, 10 insertions(+), 45 deletions(-) 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/contract/share-modal.tsx b/web/components/contract/share-modal.tsx index 72c7aba3..8f3def1a 100644 --- a/web/components/contract/share-modal.tsx +++ b/web/components/contract/share-modal.tsx @@ -22,6 +22,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 +62,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..51ccd6fe 100644 --- a/web/components/share-post-modal.tsx +++ b/web/components/share-post-modal.tsx @@ -8,6 +8,7 @@ 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 +17,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} />