arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

Added button styles

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-23 14:01:30 +02:00
parent 3fb4699172
commit 8b6cd23c26
1 changed files with 47 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/js/components/Button/index.js
View File

@ -13,26 +13,71 @@ const Wrapper = styled.button`
background: ${colors.GREEN_PRIMARY};
color: ${colors.WHITE};
border: 0;
&:hover {
background: ${colors.GREEN_SECONDARY};
}
&:active {
background: ${colors.GREEN_TERTIARY};
}
${props => props.disabled && css`
pointer-events: none;
color: ${colors.TEXT_SECONDARY};
background: ${colors.GRAY_LIGHT};
`}
${props => props.blue && css`
background: transparent;
border: 1px solid ${colors.INFO_PRIMARY};
color: ${colors.INFO_PRIMARY};
padding: 12px 58px;
&:hover {
color: ${colors.WHITE};
background: ${colors.INFO_PRIMARY};
}
`}
${props => props.white && css`
background: @color_white;
color: ${colors.TEXT_SECONDARY};
border: 1px solid ${colors.DIVIDER};
&:hover {
color: ${colors.TEXT_PRIMARY};
border-color: ${colors.TEXT_PRIMARY};
background: ${colors.DIVIDER};
}
&:active {
color: ${colors.TEXT_PRIMARY};
background: ${colors.DIVIDER};
}
`}
${props => props.transparent && css`
background: transparent;
border: 0px;
color: ${colors.TEXT_SECONDARY};
&:hover,
&:active {
color: ${colors.TEXT_PRIMARY};
background: transparent;
}
`}
`;
const Button = ({
text, onClick, disabled, blue, white,
text, onClick, disabled, blue, white, transparent,
}) => (
<Wrapper
onClick={onClick}
disabled={disabled}
blue={blue}
transparent={transparent}
white={white}
>{text}
</Wrapper>
@ -42,6 +87,7 @@ Button.propTypes = {
onClick: PropTypes.func,
disabled: PropTypes.bool,
blue: PropTypes.bool,
transparent: PropTypes.bool,
white: PropTypes.bool,
text: PropTypes.string.isRequired,
};