open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Un-daisy share buttons (#1010)

Browse Source 
* Make embed and challenge buttons non-daisyui

* Allow link Buttons. Change tweet, dupe buttons.

* lint
This commit is contained in:
Sinclair Chen 2022-10-05 15:51:10 -07:00 committed by GitHub
parent a3b841423f
commit 7863a4232d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 108 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
web/components/button.tsx
View File

@ -15,12 +15,49 @@ export type ColorType =
| 'gray-white'
| 'highlight-blue'
const sizeClasses = {
'2xs': 'px-2 py-1 text-xs',
xs: 'px-2.5 py-1.5 text-sm',
sm: 'px-3 py-2 text-sm',
md: 'px-4 py-2 text-sm',
lg: 'px-4 py-2 text-base',
xl: 'px-6 py-2.5 text-base font-semibold',
'2xl': 'px-6 py-3 text-xl font-semibold',
}
export function buttonClass(size: SizeType, color: ColorType | 'override') {
return clsx(
'font-md inline-flex items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
sizeClasses[size],
color === 'green' &&
'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',
color === 'red' &&
'disabled:bg-greyscale-2 bg-red-400 text-white hover:bg-red-500',
color === 'yellow' &&
'disabled:bg-greyscale-2 bg-yellow-400 text-white hover:bg-yellow-500',
color === 'blue' &&
'disabled:bg-greyscale-2 bg-blue-400 text-white hover:bg-blue-500',
color === 'indigo' &&
'disabled:bg-greyscale-2 bg-indigo-500 text-white hover:bg-indigo-600',
color === 'gray' &&
'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
color === 'gray-outline' &&
'border-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 border-2 hover:text-white disabled:opacity-50',
color === 'gradient' &&
'disabled:bg-greyscale-2 border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
color === 'gray-white' &&
'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
color === 'highlight-blue' &&
'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none'
)
}
export function Button(props: {
className?: string
onClick?: MouseEventHandler<any> | undefined
children?: ReactNode
size?: SizeType
color?: ColorType
color?: ColorType | 'override'
type?: 'button' | 'reset' | 'submit'
disabled?: boolean
loading?: boolean
@ -36,44 +73,10 @@ export function Button(props: {
loading,
} = props
const sizeClasses = {
'2xs': 'px-2 py-1 text-xs',
xs: 'px-2.5 py-1.5 text-sm',
sm: 'px-3 py-2 text-sm',
md: 'px-4 py-2 text-sm',
lg: 'px-4 py-2 text-base',
xl: 'px-6 py-2.5 text-base font-semibold',
'2xl': 'px-6 py-3 text-xl font-semibold',
}[size]
return (
<button
type={type}
className={clsx(
'font-md 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',
color === 'red' &&
'disabled:bg-greyscale-2 bg-red-400 text-white hover:bg-red-500',
color === 'yellow' &&
'disabled:bg-greyscale-2 bg-yellow-400 text-white hover:bg-yellow-500',
color === 'blue' &&
'disabled:bg-greyscale-2 bg-blue-400 text-white hover:bg-blue-500',
color === 'indigo' &&
'disabled:bg-greyscale-2 bg-indigo-500 text-white hover:bg-indigo-600',
color === 'gray' &&
'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
color === 'gray-outline' &&
'border-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 border-2 hover:text-white disabled:opacity-50',
color === 'gradient' &&
'disabled:bg-greyscale-2 border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
color === 'gray-white' &&
'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
color === 'highlight-blue' &&
'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none',
className
)}
className={clsx(buttonClass(size, color), className)}
disabled={disabled || loading}
onClick={onClick}
>

18
web/components/contract/share-modal.tsx
View File

@ -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
@ -59,24 +60,21 @@ export function ShareModal(props: {
<CopyLinkButton url={shareUrl} tracking="copy share link" />
<Row className="z-0 flex-wrap justify-center gap-4 self-center">
<TweetButton
className="self-start"
tweetText={getTweetText(contract, shareUrl)}
/>
<TweetButton tweetText={getTweetText(contract, shareUrl)} />
<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 +86,7 @@ export function ShareModal(props: {
user={user}
contract={contract}
/>
</button>
</Button>
)}
</Row>
</Col>

21
web/components/duplicate-contract-button.tsx
View File

@ -3,27 +3,22 @@ import clsx from 'clsx'
import { Contract } from 'common/contract'
import { getMappedValue } from 'common/pseudo-numeric'
import { trackCallback } from 'web/lib/service/analytics'
import { buttonClass } from './button'
export function DuplicateContractButton(props: {
contract: Contract
className?: string
}) {
const { contract, className } = props
export function DuplicateContractButton(props: { contract: Contract }) {
const { contract } = props
return (
<a
className={clsx('btn btn-xs flex-nowrap normal-case', className)}
style={{
backgroundColor: 'white',
border: '2px solid #a78bfa',
// violet-400
color: '#a78bfa',
}}
className={clsx(
buttonClass('2xs', 'override'),
'gap-1 border-2 border-violet-400 text-violet-400 hover:bg-violet-400 hover:text-white'
)}
href={duplicateContractHref(contract)}
onClick={trackCallback('duplicate market')}
target="_blank"
>
<DuplicateIcon className="mr-1.5 h-4 w-4" aria-hidden="true" />
<DuplicateIcon className="h-4 w-4" aria-hidden="true" />
<div>Duplicate</div>
</a>
)

26
web/components/share-embed-button.tsx
View File

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

8
web/components/share-post-modal.tsx
View File

@ -2,7 +2,6 @@ import { Modal } from './layout/modal'
import { Col } from './layout/col'
import { Title } from './title'
import { TweetButton } from './tweet-button'
import { Row } from './layout/row'
import { CopyLinkButton } from './copy-link-button'
export function SharePostModal(props: {
@ -17,10 +16,9 @@ export function SharePostModal(props: {
<Col className="gap-4 rounded bg-white p-4">
<Title className="!mt-0 !mb-2" text="Share this post" />
<CopyLinkButton url={shareUrl} tracking="copy share post link" />
<Row className="z-0 justify-start gap-4 self-center">
<TweetButton className="self-start" tweetText={shareUrl} />
</Row>
<div className="self-center">
<TweetButton tweetText={shareUrl} />
</div>
</Col>
</Modal>
)

19
web/components/tweet-button.tsx
View File

@ -1,22 +1,23 @@
import clsx from 'clsx'
import TwitterLogo from 'web/lib/icons/twitter-logo'
import { trackCallback } from 'web/lib/service/analytics'
import { buttonClass } from './button'
export function TweetButton(props: { className?: string; tweetText: string }) {
const { tweetText, className } = props
export function TweetButton(props: { tweetText: string }) {
const { tweetText } = props
return (
<a
className={clsx('btn btn-xs flex-nowrap normal-case', className)}
style={{
backgroundColor: 'white',
border: '2px solid #1da1f2',
color: '#1da1f2',
}}
// #1da1f2 is twitter blue
className={clsx(
buttonClass('2xs', 'override'),
'gap-1 border-2 border-[#1da1f2] text-[#1da1f2] hover:bg-[#1da1f2] hover:text-white'
)}
href={getTweetHref(tweetText)}
onClick={trackCallback('share tweet')}
target="_blank"
>
<img className="mr-2" src={'/twitter-logo.svg'} width={15} height={15} />
<TwitterLogo width={15} height={15} />
<div>Tweet</div>
</a>
)

28
web/lib/icons/twitter-logo.tsx Normal file
View File

@ -0,0 +1,28 @@
export default function TwitterLogo(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
version="1.1"
id="Logo"
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
viewBox="0 0 248 204"
stroke="currentColor"
fill="currentColor"
{...props}
>
<g id="Logo_1_">
<path
id="white_background"
className="st0"
d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"
/>
</g>
</svg>
)
}

16
web/public/twitter-icon-white.svg
View File

@ -1,16 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 248 204" style="enable-background:new 0 0 248 204;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g id="Logo_1_">
<path id="white_background" class="st0" d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB