diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-04 22:45:04 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-04 22:45:04 +0800 |
commit | 8acb25f577feaea910ef0c1121aaba2ea177e718 (patch) | |
tree | b875844cbafd5d4e1a287b1d20e712ce2adddc70 /packages/website/ts/@next/components/button.tsx | |
parent | eec40080a06bf5dbc0661a5929e5cbb8d1b88911 (diff) | |
download | dexon-0x-contracts-8acb25f577feaea910ef0c1121aaba2ea177e718.tar dexon-0x-contracts-8acb25f577feaea910ef0c1121aaba2ea177e718.tar.gz dexon-0x-contracts-8acb25f577feaea910ef0c1121aaba2ea177e718.tar.bz2 dexon-0x-contracts-8acb25f577feaea910ef0c1121aaba2ea177e718.tar.lz dexon-0x-contracts-8acb25f577feaea910ef0c1121aaba2ea177e718.tar.xz dexon-0x-contracts-8acb25f577feaea910ef0c1121aaba2ea177e718.tar.zst dexon-0x-contracts-8acb25f577feaea910ef0c1121aaba2ea177e718.zip |
Refactors buttons/links/header
Diffstat (limited to 'packages/website/ts/@next/components/button.tsx')
-rw-r--r-- | packages/website/ts/@next/components/button.tsx | 24 |
1 files changed, 15 insertions, 9 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 2f96759ce..2c153788a 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -1,3 +1,4 @@ +import { History } from 'history'; import * as React from 'react'; import { withRouter } from 'react-router-dom'; import styled from 'styled-components'; @@ -5,15 +6,19 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; interface ButtonInterface { - children: Node | string; + color?: string; + children?: Node | string; isTransparent?: boolean; + isNoBorder?: boolean; + isNoPadding?: boolean; hasIcon?: boolean | string; isInline?: boolean; href?: string; - history?: { - push: () => void; + onClick?: () => any; + history?: History; + theme?: { + textColor: string; }; - onClick?: () => void; } export const Button = styled.button<ButtonInterface>` @@ -21,24 +26,25 @@ export const Button = styled.button<ButtonInterface>` border: 1px solid transparent; display: ${props => props.isInline && 'inline-block'}; background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'}; - border-color: ${props => props.isTransparent && '#6a6a6a'}; + border-color: ${props => (props.isTransparent && !props.isNoBorder) && '#6a6a6a'}; color: ${props => props.color || props.theme.textColor}; + padding: ${props => !props.isNoPadding && '14px 22px'}; text-align: center; - padding: 14px 22px; font-size: 18px; text-decoration: none; `; export const Link = withRouter((props: ButtonInterface) => { const { + children, history, href, - children, } = props; - const Component = StyledButton.withComponent('a'); + const Component = Button.withComponent('a'); + const handleClick = () => history.push(href); return ( - <Component onClick={history.push(href)}> + <Component onClick={handleClick} {...props}> {children} </Component> ); |