Make embed and challenge buttons non-daisyui

web/components/button.tsx

@@ -20,7 +20,7 @@ export function Button(props: {
   onClick?: MouseEventHandler<any> | undefined
   children?: ReactNode
   size?: SizeType
-  color?: ColorType
+  color?: ColorType | 'override'
   type?: 'button' | 'reset' | 'submit'
   disabled?: boolean
   loading?: boolean
@@ -50,7 +50,7 @@ export function Button(props: {
     <button
       type={type}
       className={clsx(
-        'font-md items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
+        'font-md inline-flex items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
         sizeClasses,
         color === 'green' &&
           'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',

web/components/contract/share-modal.tsx

@@ -18,6 +18,7 @@ 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'
+import { Button } from '../button'
 
 export function ShareModal(props: {
   contract: Contract
@@ -67,16 +68,16 @@ export function ShareModal(props: {
           <ShareEmbedButton contract={contract} />
 
           {showChallenge && (
-            <button
-              className={
-                'btn btn-xs flex-nowrap border-2 !border-indigo-500 !bg-white normal-case text-indigo-500'
-              }
+            <Button
+              size="2xs"
+              color="override"
+              className="gap-1 border-2  border-indigo-500 text-indigo-500 hover:bg-indigo-500 hover:text-white"
               onClick={withTracking(
                 () => setOpenCreateChallengeModal(true),
                 'click challenge button'
               )}
             >
-              ️<ChallengeIcon className="mr-1 h-4 w-4" /> Challenge
+              <ChallengeIcon className="h-4 w-4" /> Challenge
               <CreateChallengeModal
                 isOpen={openCreateChallengeModal}
                 setOpen={(open) => {
@@ -88,7 +89,7 @@ export function ShareModal(props: {
                 user={user}
                 contract={contract}
               />
-            </button>
+            </Button>
           )}
         </Row>
       </Col>

web/components/share-embed-button.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { CodeIcon } from '@heroicons/react/outline'
-import { Menu } from '@headlessui/react'
 import toast from 'react-hot-toast'
 
 import { Contract } from 'common/contract'
@@ -8,6 +7,7 @@ import { contractPath } from 'web/lib/firebase/contracts'
 import { DOMAIN } from 'common/envs/constants'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { track } from 'web/lib/service/analytics'
+import { Button } from './button'
 
 export function embedContractCode(contract: Contract) {
   const title = contract.question
@@ -15,6 +15,7 @@ export function embedContractCode(contract: Contract) {
   return `<iframe src="${src}" title="${title}" frameborder="0"></iframe>`
 }
 
+// TODO: move this function elsewhere
 export function embedContractGridCode(contracts: Contract[]) {
   const height = (contracts.length - (contracts.length % 2)) * 100 + 'px'
   const src = `https://${DOMAIN}/embed/grid/${contracts
@@ -26,24 +27,21 @@ export function embedContractGridCode(contracts: Contract[]) {
 export function ShareEmbedButton(props: { contract: Contract }) {
   const { contract } = props
 
-  const codeIcon = <CodeIcon className="mr-1.5 h-4 w-4" aria-hidden="true" />
+  const codeIcon = <CodeIcon className="h-4 w-4" aria-hidden />
 
   return (
-    <Menu
-      as="div"
-      className="relative z-10 flex-shrink-0"
-      onMouseUp={() => {
+    <Button
+      size="2xs"
+      color="gray-outline"
+      className="gap-1"
+      onClick={() => {
         copyToClipboard(embedContractCode(contract))
-        toast.success('Embed code copied!', {
-          icon: codeIcon,
-        })
+        toast.success('Embed code copied!', { icon: codeIcon })
         track('copy embed code')
       }}
     >
-      <Menu.Button className="btn btn-xs border-2 !border-gray-500 !bg-white normal-case text-gray-500">
-        {codeIcon}
-        Embed
-      </Menu.Button>
-    </Menu>
+      {codeIcon}
+      Embed
+    </Button>
   )
 }