share dialog styling

web/components/contract/share-modal.tsx

@@ -9,7 +9,6 @@ import { Row } from '../layout/row'
 import { ShareEmbedButton } from '../share-embed-button'
 import { Title } from '../title'
 import { TweetButton } from '../tweet-button'
-import { DuplicateContractButton } from '../copy-contract-button'
 import { Button } from '../button'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { track, withTracking } from 'web/lib/service/analytics'
@@ -21,6 +20,7 @@ import { REFERRAL_AMOUNT } from 'common/economy'
 import { CreateChallengeModal } from 'web/components/challenges/create-challenge-modal'
 import { useState } from 'react'
 import { CHALLENGES_ENABLED } from 'common/challenge'
+import ChallengeIcon from 'web/lib/icons/challenge-icon'
 
 export function ShareModal(props: {
   contract: Contract
@@ -56,8 +56,8 @@ export function ShareModal(props: {
         </p>
         <Button
           size="2xl"
-          color="gradient"
-          className={'flex max-w-xs self-center'}
+          color="indigo"
+          className={'mb-2 flex max-w-xs self-center'}
           onClick={() => {
             copyToClipboard(shareUrl)
             toast.success('Link copied!', {
@@ -68,18 +68,26 @@ export function ShareModal(props: {
         >
           {linkIcon} Copy link
         </Button>
-        <Row className={'justify-center'}>or</Row>
+
+        <Row className="z-0 flex-wrap justify-center gap-4 self-center">
+          <TweetButton
+            className="self-start"
+            tweetText={getTweetText(contract, shareUrl)}
+          />
+
+          <ShareEmbedButton contract={contract} />
+
           {showChallenge && (
-          <Button
-            size="2xl"
-            color="gradient"
-            className={'mb-2 flex max-w-xs self-center'}
+            <button
+              className={
+                'btn btn-xs flex-nowrap border-2 !border-indigo-500 !bg-white normal-case text-indigo-500'
+              }
               onClick={withTracking(
                 () => setOpenCreateChallengeModal(true),
                 'click challenge button'
               )}
             >
-            <span>⚔️ Challenge</span>
+              ️<ChallengeIcon className="mr-1 h-4 w-4" /> Challenge
               <CreateChallengeModal
                 isOpen={openCreateChallengeModal}
                 setOpen={(open) => {
@@ -91,15 +99,8 @@ export function ShareModal(props: {
                 user={user}
                 contract={contract}
               />
-          </Button>
+            </button>
           )}
-        <Row className="z-0 flex-wrap justify-center gap-4 self-center">
-          <TweetButton
-            className="self-start"
-            tweetText={getTweetText(contract, shareUrl)}
-          />
-          <ShareEmbedButton contract={contract} />
-          <DuplicateContractButton contract={contract} />
         </Row>
       </Col>
     </Modal>

web/components/share-embed-button.tsx

@@ -40,14 +40,7 @@ export function ShareEmbedButton(props: { contract: Contract }) {
         track('copy embed code')
       }}
     >
-      <Menu.Button
-        className="btn btn-xs normal-case"
-        style={{
-          backgroundColor: 'white',
-          border: '2px solid #9ca3af',
-          color: '#9ca3af', // text-gray-400
-        }}
-      >
+      <Menu.Button className="btn btn-xs border-2 !border-gray-500 !bg-white normal-case text-gray-500">
         {codeIcon}
         Embed
       </Menu.Button>