Standardize on CopyLinkButton

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 { SwitchVerticalIcon } from '@heroicons/react/outline'
-import toast from 'react-hot-toast'
 
 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: {
           <Title className="!my-0" text="Challenge Created!" />
 
           <div>Share the challenge using the link.</div>
-          <button
+          <CopyLinkButton url={challengeSlug} />
-            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>
 
           <QRCode url={challengeSlug} className="self-center" />
           <Row className={'gap-1 text-gray-500'}>

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
+        <CopyLinkButton url={shareUrl} tracking="copy share link" />
-          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>
 
         <Row className="z-0 flex-wrap justify-center gap-4 self-center">
           <TweetButton

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
           )}
         >

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
+        <CopyLinkButton url={shareUrl} tracking="copy share post link" />
-          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>
 
         <Row className="z-0 justify-start gap-4 self-center">
           <TweetButton className="self-start" tweetText={shareUrl} />