Allow link Buttons. Change tweet, dupe buttons.
This commit is contained in:
Sinclair Chen
parent
97a1bdb51b
commit
24482dd429
|
|
@ -15,6 +15,43 @@ 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
|
||||
|
|
@ -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 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',
|
||||
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}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -60,10 +60,7 @@ 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} />
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -17,10 +17,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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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
28
web/lib/icons/twitter-logo.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in New Issue
Block a user