diff options
author | Kadinsky <kandinsky454@protonmail.ch> | 2018-10-18 19:20:50 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-10-18 19:20:50 +0800 |
commit | 325af82217e994fdde8e904b93a76e6e3461f85a (patch) | |
tree | c51543ab9038ce0a3d42e4f0b7f6e257a2368c08 /packages/website/ts/components/ui/button.tsx | |
parent | ea65fa4f6560264b8aee6b4b1c9272a0efa82b12 (diff) | |
parent | 47dc384ea36fecbcf01eb9b3f20936331b43a0c6 (diff) | |
download | dexon-0x-contracts-325af82217e994fdde8e904b93a76e6e3461f85a.tar dexon-0x-contracts-325af82217e994fdde8e904b93a76e6e3461f85a.tar.gz dexon-0x-contracts-325af82217e994fdde8e904b93a76e6e3461f85a.tar.bz2 dexon-0x-contracts-325af82217e994fdde8e904b93a76e6e3461f85a.tar.lz dexon-0x-contracts-325af82217e994fdde8e904b93a76e6e3461f85a.tar.xz dexon-0x-contracts-325af82217e994fdde8e904b93a76e6e3461f85a.tar.zst dexon-0x-contracts-325af82217e994fdde8e904b93a76e6e3461f85a.zip |
Merge pull request #1154 from 0xProject/dev-section-redesign
[BASE_BRANCH] Developer section redesign
Diffstat (limited to 'packages/website/ts/components/ui/button.tsx')
-rw-r--r-- | packages/website/ts/components/ui/button.tsx | 7 |
1 files changed, 6 insertions, 1 deletions
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 75ba7bcff..2a6a1f477 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -10,11 +10,13 @@ export interface ButtonProps { fontFamily?: string; backgroundColor?: string; borderColor?: string; + borderRadius?: string; width?: string; padding?: string; type?: string; isDisabled?: boolean; onClick?: (event: React.MouseEvent<HTMLElement>) => void; + textAlign?: string; } const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => ( @@ -29,11 +31,12 @@ export const Button = styled(PlainButton)` color: ${props => props.fontColor}; transition: background-color, opacity 0.5s ease; padding: ${props => props.padding}; - border-radius: 6px; + border-radius: ${props => props.borderRadius}; font-weight: 500; outline: none; font-family: ${props => props.fontFamily}; width: ${props => props.width}; + text-align: ${props => props.textAlign}; background-color: ${props => props.backgroundColor}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; &:hover { @@ -52,11 +55,13 @@ export const Button = styled(PlainButton)` Button.defaultProps = { fontSize: '12px', + borderRadius: '6px', backgroundColor: colors.white, width: 'auto', fontFamily: 'Roboto', isDisabled: false, padding: '0.8em 2.2em', + textAlign: 'center', }; Button.displayName = 'Button'; |