Standardize link copied toast

web/components/contract/contract-info-dialog.tsx

@@ -49,12 +49,15 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
           <div>Share</div>
 
           <Row className="justify-start gap-4">
-            <CopyLinkButton contract={contract} />
+            <CopyLinkButton
+              contract={contract}
+              toastClassName={'sm:-left-10 -left-4 min-w-[250%]'}
+            />
             <TweetButton
               className="self-start"
               tweetText={getTweetText(contract, false)}
             />
-            <ShareEmbedButton contract={contract} />
+            <ShareEmbedButton contract={contract} toastClassName={'-left-20'} />
           </Row>
           <div />
 

web/components/copy-link-button.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import React, { Fragment } from 'react'
 import { LinkIcon } from '@heroicons/react/outline'
 import { Menu, Transition } from '@headlessui/react'
 import clsx from 'clsx'
@@ -6,6 +6,7 @@ import { Contract } from 'common/contract'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { contractPath } from 'web/lib/firebase/contracts'
 import { ENV_CONFIG } from 'common/envs/constants'
+import { ToastClipboard } from 'web/components/toast-clipboard'
 
 function copyContractUrl(contract: Contract) {
   copyToClipboard(`https://${ENV_CONFIG.domain}${contractPath(contract)}`)
@@ -14,8 +15,9 @@ function copyContractUrl(contract: Contract) {
 export function CopyLinkButton(props: {
   contract: Contract
   buttonClassName?: string
+  toastClassName?: string
 }) {
-  const { contract, buttonClassName } = props
+  const { contract, buttonClassName, toastClassName } = props
 
   return (
     <Menu
@@ -42,9 +44,9 @@ export function CopyLinkButton(props: {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="origin-top-center absolute left-0 mt-2 w-40 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items>
           <Menu.Item>
-            <div className="px-2 py-1">Link copied!</div>
+            <ToastClipboard className={toastClassName} />
           </Menu.Item>
         </Menu.Items>
       </Transition>

web/components/feed/feed-items.tsx

@@ -50,11 +50,14 @@ import { DAY_MS } from 'common/util/time'
 import NewContractBadge from '../new-contract-badge'
 import { RelativeTimestamp } from '../relative-timestamp'
 import { calculateCpmmSale } from 'common/calculate-cpmm'
-import { ClipboardCopyIcon, LinkIcon } from '@heroicons/react/outline'
+import { LinkIcon } from '@heroicons/react/outline'
 import { DateTimeTooltip } from 'web/components/datetime-tooltip'
 import { fromNow } from 'web/lib/util/time'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
+import { ToastClipboard } from 'web/components/toast-clipboard'
+import { copyToClipboard } from 'web/lib/util/copy'
+import { ENV_CONFIG } from 'common/envs/constants'
 
 export function FeedItems(props: {
   contract: Contract
@@ -229,17 +232,21 @@ export function FeedComment(props: {
   useEffect(() => {
     if (router.asPath.includes(`#${comment.id}`)) {
       setHighlighted(true)
-      setTimeout(() => setHighlighted(false), 3000)
     }
   }, [router.asPath])
 
-  function copyLink(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+  function copyLinkToComment(
+    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+  ) {
     event.preventDefault()
-    let currentLocation = window.location.href
+
+    let currentLocation = window.location.href.includes('/home?u=')
+      ? `https://${ENV_CONFIG.domain}${contractPath(contract)}#${comment.id}`
+      : window.location.href
     if (currentLocation.includes('#')) {
       currentLocation = currentLocation.split('#')[0]
     }
-    navigator.clipboard.writeText(`${currentLocation}#${comment.id}`)
+    copyToClipboard(`${currentLocation}#${comment.id}`)
     setShowToast(true)
     setTimeout(() => setShowToast(false), 2000)
   }
@@ -256,7 +263,7 @@ export function FeedComment(props: {
     <Row
       className={clsx(
         'flex space-x-3 transition-all duration-1000',
-        highlighted ? `bg-primary/[0.3] rounded` : ''
+        highlighted ? `bg-primary/[0.2] -m-2 rounded p-2` : ''
       )}
     >
       <Avatar
@@ -305,22 +312,13 @@ export function FeedComment(props: {
               passHref={true}
             >
               <a
-                onClick={(event) => copyLink(event)}
+                onClick={(event) => copyLinkToComment(event)}
                 className={'cursor-pointer hover:underline'}
               >
                 <span className="ml-2 whitespace-nowrap text-gray-400">
                   {fromNow(createdTime)}
                   {showToast && (
-                    <div
-                      className="w-100 border-base-300 absolute left-40 flex items-center space-x-2 divide-x
-                       divide-gray-200 rounded-md border-2 bg-white p-2
-                       text-gray-500 sm:-left-16 "
-                    >
-                      <ClipboardCopyIcon height={20} />
-                      <div className="pl-4 text-sm font-normal">
-                        Link copied to clipboard!
-                      </div>
-                    </div>
+                    <ToastClipboard className={'left-24 sm:-left-16'} />
                   )}
                 </span>
                 <LinkIcon
@@ -1010,7 +1008,7 @@ function FeedAnswerGroup(props: {
         <div
           className="pointer-events-none absolute -mx-2 h-full rounded-tl-md bg-green-600 bg-opacity-10"
           style={{ width: `${100 * Math.max(prob, 0.01)}%` }}
-        ></div>
+        />
       )}
       <Row className="my-4 gap-3">
         <div className="px-1">

web/components/share-embed-button.tsx

@@ -1,10 +1,11 @@
-import { Fragment } from 'react'
+import React, { Fragment } from 'react'
 import { CodeIcon } from '@heroicons/react/outline'
 import { Menu, Transition } from '@headlessui/react'
 import { Contract } from 'common/contract'
 import { contractPath } from 'web/lib/firebase/contracts'
 import { DOMAIN } from 'common/envs/constants'
 import { copyToClipboard } from 'web/lib/util/copy'
+import { ToastClipboard } from 'web/components/toast-clipboard'
 
 function copyEmbedCode(contract: Contract) {
   const title = contract.question
@@ -15,8 +16,11 @@ function copyEmbedCode(contract: Contract) {
   copyToClipboard(embedCode)
 }
 
-export function ShareEmbedButton(props: { contract: Contract }) {
-  const { contract } = props
+export function ShareEmbedButton(props: {
+  contract: Contract
+  toastClassName?: string
+}) {
+  const { contract, toastClassName } = props
 
   return (
     <Menu
@@ -45,9 +49,9 @@ export function ShareEmbedButton(props: { contract: Contract }) {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="origin-top-center absolute left-0 mt-2 w-40 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items>
           <Menu.Item>
-            <div className="px-2 py-1">Embed code copied!</div>
+            <ToastClipboard className={toastClassName} />
           </Menu.Item>
         </Menu.Items>
       </Transition>

web/components/share-market.tsx

@@ -20,6 +20,7 @@ export function ShareMarket(props: { contract: Contract; className?: string }) {
         <CopyLinkButton
           contract={contract}
           buttonClassName="btn-md rounded-l-none"
+          toastClassName={'-left-28 mt-1'}
         />
       </Row>
     </Col>

web/components/toast-clipboard.tsx

@@ -0,0 +1,21 @@
+import { ClipboardCopyIcon } from '@heroicons/react/outline'
+import React from 'react'
+import clsx from 'clsx'
+import { Row } from 'web/components/layout/row'
+
+export function ToastClipboard(props: { className?: string }) {
+  const { className } = props
+  return (
+    <Row
+      className={clsx(
+        'border-base-300 absolute items-center' +
+          'gap-2 divide-x divide-gray-200 rounded-md border-2 bg-white ' +
+          'h-15 w-[15rem] p-2 pr-3 text-gray-500',
+        className
+      )}
+    >
+      <ClipboardCopyIcon height={20} className={'mr-2 self-center'} />
+      <div className="pl-4 text-sm font-normal">Link copied to clipboard!</div>
+    </Row>
+  )
+}