From 7863a4232d873cdc64195ec8fb358f36050f1226 Mon Sep 17 00:00:00 2001 From: Sinclair Chen Date: Wed, 5 Oct 2022 15:51:10 -0700 Subject: [PATCH] Un-daisy share buttons (#1010) * Make embed and challenge buttons non-daisyui * Allow link Buttons. Change tweet, dupe buttons. * lint --- web/components/button.tsx | 75 ++++++++++---------- web/components/contract/share-modal.tsx | 18 +++-- web/components/duplicate-contract-button.tsx | 21 +++--- web/components/share-embed-button.tsx | 26 ++++--- web/components/share-post-modal.tsx | 8 +-- web/components/tweet-button.tsx | 19 ++--- web/lib/icons/twitter-logo.tsx | 28 ++++++++ web/public/twitter-icon-white.svg | 16 ----- 8 files changed, 108 insertions(+), 103 deletions(-) create mode 100644 web/lib/icons/twitter-logo.tsx delete mode 100644 web/public/twitter-icon-white.svg diff --git a/web/components/button.tsx b/web/components/button.tsx index 57c0bb4b..b64b8daf 100644 --- a/web/components/button.tsx +++ b/web/components/button.tsx @@ -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 | 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 ( + )} diff --git a/web/components/duplicate-contract-button.tsx b/web/components/duplicate-contract-button.tsx index c02a2a9c..9c89d8c5 100644 --- a/web/components/duplicate-contract-button.tsx +++ b/web/components/duplicate-contract-button.tsx @@ -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 ( - ) diff --git a/web/components/share-embed-button.tsx b/web/components/share-embed-button.tsx index 0a5dc0c9..ad57b2f7 100644 --- a/web/components/share-embed-button.tsx +++ b/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 `` } +// 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 =