diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-11 04:31:18 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-11 04:31:18 +0800 |
commit | 7418932432de53300ba276da1ca9a33fb2f1d8b1 (patch) | |
tree | 2bc7c5d8f1ba1da1e4f455cbe4bcb2ae76083063 /packages/dev-tools-pages | |
parent | fb882b0c7710151af7024c510d853f828a54f43a (diff) | |
download | dexon-0x-contracts-7418932432de53300ba276da1ca9a33fb2f1d8b1.tar dexon-0x-contracts-7418932432de53300ba276da1ca9a33fb2f1d8b1.tar.gz dexon-0x-contracts-7418932432de53300ba276da1ca9a33fb2f1d8b1.tar.bz2 dexon-0x-contracts-7418932432de53300ba276da1ca9a33fb2f1d8b1.tar.lz dexon-0x-contracts-7418932432de53300ba276da1ca9a33fb2f1d8b1.tar.xz dexon-0x-contracts-7418932432de53300ba276da1ca9a33fb2f1d8b1.tar.zst dexon-0x-contracts-7418932432de53300ba276da1ca9a33fb2f1d8b1.zip |
Fix button and center
Diffstat (limited to 'packages/dev-tools-pages')
-rw-r--r-- | packages/dev-tools-pages/ts/components/ui/button.tsx | 15 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/pages/landing.tsx | 7 |
2 files changed, 12 insertions, 10 deletions
diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx index 7b2e33141..9ffd87e91 100644 --- a/packages/dev-tools-pages/ts/components/ui/button.tsx +++ b/packages/dev-tools-pages/ts/components/ui/button.tsx @@ -31,28 +31,25 @@ export const Button = styled(PlainButton)` border-radius: 3px; outline: none; width: ${props => props.width}; - background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; - border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')}; + background-color: ${props => (props.backgroundColor ? props.backgroundColor : 'none')}; + border: ${props => (props.borderColor ? `1px solid ${props.backgroundColor}` : 'none')}; &:hover { background-color: ${props => - !props.isDisabled - ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white']) - : ''} !important; + !props.isDisabled ? darken(darkenOnHoverAmount, props.backgroundColor) : ''} !important; } &:active { - background-color: ${props => - !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''}; + background-color: ${props => (!props.isDisabled ? darken(darkenOnActiveAmount, props.backgroundColor) : '')}; } &:disabled { opacity: 0.5; } &:focus { - background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])}; + background-color: ${props => saturate(saturateOnFocusAmount, props.backgroundColor)}; } `; Button.defaultProps = { - backgroundColor: 'black', + backgroundColor: 'red', width: 'auto', isDisabled: false, padding: '1em 2.2em', diff --git a/packages/dev-tools-pages/ts/pages/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx index e89cfa665..a70a9de46 100644 --- a/packages/dev-tools-pages/ts/pages/landing.tsx +++ b/packages/dev-tools-pages/ts/pages/landing.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import { Button } from '../components/ui/button'; import { Container } from '../components/ui/container'; +import { Text } from '../components/ui/text'; interface LandingProps {} @@ -15,7 +16,11 @@ export class Landing extends React.Component<LandingProps, LandingState> { public render(): React.ReactNode { return ( <Container id="landing" className="clearfix"> - <Button>Click me!</Button> + <Container className="mx-auto p4" width="200px"> + <Button> + <Text fontColor="white">Click me!</Text> + </Button> + </Container> </Container> ); } |