diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-11-10 07:26:57 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-10 07:26:57 +0800 |
commit | 433fb3597dc19cb223a2b8d0e373502042241abb (patch) | |
tree | dc9cccf7b1cc0d1c3d2d30986961e288fba4341e /packages/instant | |
parent | 7460f2796a2a549eaed15051009e35229fb1280f (diff) | |
download | dexon-0x-contracts-433fb3597dc19cb223a2b8d0e373502042241abb.tar dexon-0x-contracts-433fb3597dc19cb223a2b8d0e373502042241abb.tar.gz dexon-0x-contracts-433fb3597dc19cb223a2b8d0e373502042241abb.tar.bz2 dexon-0x-contracts-433fb3597dc19cb223a2b8d0e373502042241abb.tar.lz dexon-0x-contracts-433fb3597dc19cb223a2b8d0e373502042241abb.tar.xz dexon-0x-contracts-433fb3597dc19cb223a2b8d0e373502042241abb.tar.zst dexon-0x-contracts-433fb3597dc19cb223a2b8d0e373502042241abb.zip |
feat: refactor button styles and add href to Text
Diffstat (limited to 'packages/instant')
-rw-r--r-- | packages/instant/src/components/buy_button.tsx | 2 | ||||
-rw-r--r-- | packages/instant/src/components/standard_panel_content.tsx | 21 | ||||
-rw-r--r-- | packages/instant/src/components/ui/button.tsx | 11 | ||||
-rw-r--r-- | packages/instant/src/components/ui/text.tsx | 9 | ||||
-rw-r--r-- | packages/instant/src/util/util.ts | 1 |
5 files changed, 24 insertions, 20 deletions
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 877ab275c..c10e07b83 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -43,7 +43,7 @@ export class BuyButton extends React.Component<BuyButtonProps> { onClick={this._handleClick} isDisabled={shouldDisableButton} fontColor={ColorOption.white} - fontSize="20px" + fontSize="16px" > Buy </Button> diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx index fca5383ea..95a79bd55 100644 --- a/packages/instant/src/components/standard_panel_content.tsx +++ b/packages/instant/src/components/standard_panel_content.tsx @@ -29,7 +29,7 @@ export const StandardPanelContent: React.StatelessComponent<StandardPanelContent action, }) => ( <Container height="100%"> - <Flex direction="column" height="calc(100% - 55px)"> + <Flex direction="column" height="calc(100% - 58px)"> <Container marginBottom={spacingBetweenPx}>{image}</Container> <Container marginBottom={spacingBetweenPx}> <Text fontSize="20px" fontWeight={700} fontColor={ColorOption.black}> @@ -43,16 +43,15 @@ export const StandardPanelContent: React.StatelessComponent<StandardPanelContent </Container> <Container marginBottom={spacingBetweenPx}> {moreInfoSettings && ( - <a href={moreInfoSettings.href} target="_blank"> - <Text - center={true} - fontSize="13px" - textDecorationLine="underline" - fontColor={ColorOption.lightGrey} - > - {moreInfoSettings.text} - </Text> - </a> + <Text + center={true} + fontSize="13px" + textDecorationLine="underline" + fontColor={ColorOption.lightGrey} + href={moreInfoSettings.href} + > + {moreInfoSettings.text} + </Text> )} </Container> </Flex> diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx index 479ef6c77..fbc5bcad4 100644 --- a/packages/instant/src/components/ui/button.tsx +++ b/packages/instant/src/components/ui/button.tsx @@ -2,6 +2,7 @@ import { darken, saturate } from 'polished'; import * as React from 'react'; import { ColorOption, styled } from '../../style/theme'; +import { util } from '../../util/util'; export type ButtonOnClickHandler = (event: React.MouseEvent<HTMLElement>) => void; @@ -19,10 +20,6 @@ export interface ButtonProps { className?: string; } -const createHrefOnClick = (href: string) => () => { - window.open(href, '_blank'); -}; - const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, @@ -31,7 +28,7 @@ const PlainButton: React.StatelessComponent<ButtonProps> = ({ type, className, }) => { - const computedOnClick = isDisabled ? undefined : href ? createHrefOnClick(href) : onClick; + const computedOnClick = isDisabled ? undefined : href ? util.createHrefOnClick(href) : onClick; return ( <button type={type} className={className} onClick={computedOnClick} disabled={isDisabled}> {children} @@ -48,7 +45,7 @@ export const Button = styled(PlainButton)` box-sizing: border-box; font-size: ${props => props.fontSize}; font-family: 'Inter UI', sans-serif; - font-weight: 600; + font-weight: 500; color: ${props => props.fontColor && props.theme[props.fontColor]}; cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; transition: background-color, opacity 0.5s ease; @@ -83,7 +80,7 @@ Button.defaultProps = { backgroundColor: ColorOption.primaryColor, width: 'auto', isDisabled: false, - padding: '.6em 1.2em', + padding: '.82em 1.2em', fontSize: '15px', }; diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx index 4fe429d25..3dba11c74 100644 --- a/packages/instant/src/components/ui/text.tsx +++ b/packages/instant/src/components/ui/text.tsx @@ -2,6 +2,7 @@ import { darken } from 'polished'; import * as React from 'react'; import { ColorOption, styled } from '../../style/theme'; +import { util } from '../../util/util'; export interface TextProps { fontColor?: ColorOption; @@ -20,10 +21,16 @@ export interface TextProps { onClick?: (event: React.MouseEvent<HTMLElement>) => void; noWrap?: boolean; display?: string; + href?: string; } +export const Text: React.StatelessComponent<TextProps> = ({ href, onClick, ...rest }) => { + const computedOnClick = href ? util.createHrefOnClick(href) : onClick; + return <StyledText {...rest} onClick={computedOnClick} />; +}; + const darkenOnHoverAmount = 0.3; -export const Text = +export const StyledText = styled.div < TextProps > ` diff --git a/packages/instant/src/util/util.ts b/packages/instant/src/util/util.ts index 232a86850..aeb68956b 100644 --- a/packages/instant/src/util/util.ts +++ b/packages/instant/src/util/util.ts @@ -2,4 +2,5 @@ import * as _ from 'lodash'; export const util = { boundNoop: _.noop.bind(_), + createHrefOnClick: (href: string) => () => window.open(href, '_blank'), }; |