diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-06-20 01:19:38 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-06-20 01:19:38 +0800 |
commit | 7454e16aae476b3908123dadab0cf9fdf6ab5990 (patch) | |
tree | 3477ace66bc71c2aa4e09b85dd1923087effac1b /packages/website/ts/components/ui/button.tsx | |
parent | 2cc7289b7b3c3177230957ff2384c58bed4266f3 (diff) | |
parent | e4acad60e91943c2dcbdd55b7766b543e78df6f6 (diff) | |
download | dexon-sol-tools-7454e16aae476b3908123dadab0cf9fdf6ab5990.tar dexon-sol-tools-7454e16aae476b3908123dadab0cf9fdf6ab5990.tar.gz dexon-sol-tools-7454e16aae476b3908123dadab0cf9fdf6ab5990.tar.bz2 dexon-sol-tools-7454e16aae476b3908123dadab0cf9fdf6ab5990.tar.lz dexon-sol-tools-7454e16aae476b3908123dadab0cf9fdf6ab5990.tar.xz dexon-sol-tools-7454e16aae476b3908123dadab0cf9fdf6ab5990.tar.zst dexon-sol-tools-7454e16aae476b3908123dadab0cf9fdf6ab5990.zip |
Merge branch 'v2-prototype' of https://github.com/0xProject/0x-monorepo into feature/website/portal-v2-analytics
Diffstat (limited to 'packages/website/ts/components/ui/button.tsx')
-rw-r--r-- | packages/website/ts/components/ui/button.tsx | 17 |
1 files changed, 10 insertions, 7 deletions
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 1f88297de..cb542a386 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -1,5 +1,5 @@ import { colors } from '@0xproject/react-shared'; -import { darken } from 'polished'; +import { darken, grayscale } from 'polished'; import * as React from 'react'; import { styled } from 'ts/style/theme'; @@ -12,32 +12,34 @@ export interface ButtonProps { borderColor?: string; width?: string; type?: string; + isDisabled?: boolean; onClick?: (event: React.MouseEvent<HTMLElement>) => void; } -const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, onClick, type, className }) => ( - <button type={type} className={className} onClick={onClick}> +const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => ( + <button type={type} className={className} onClick={isDisabled ? undefined : onClick}> {children} </button> ); export const Button = styled(PlainButton)` - cursor: pointer; + cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; font-size: ${props => props.fontSize}; color: ${props => props.fontColor}; + transition: background-color 0.5s ease; padding: 0.8em 2.2em; border-radius: 6px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); font-weight: 500; font-family: ${props => props.fontFamily}; width: ${props => props.width}; - background-color: ${props => props.backgroundColor}; + background-color: ${props => (props.isDisabled ? grayscale(props.backgroundColor) : props.backgroundColor)}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; &:hover { - background-color: ${props => darken(0.1, props.backgroundColor)}; + background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')}; } &:active { - background-color: ${props => darken(0.2, props.backgroundColor)}; + background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')}; } `; @@ -46,6 +48,7 @@ Button.defaultProps = { backgroundColor: colors.white, width: 'auto', fontFamily: 'Roboto', + isDisabled: false, }; Button.displayName = 'Button'; |