Merge branch 'main' of https://github.com/manifoldmarkets/manifold

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: {
           <Title className="!my-0" text="Challenge Created!" />
 
           <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'}>

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

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

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

@@ -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} />

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>