aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-08 14:17:27 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-08 14:17:27 +0800
commit8b0928617346ae5066d2ea8185af625de5b5f577 (patch)
tree7e9c98dd763be27eb54edf7d153b6f09304efd6d /packages/instant/src/components
parentbfe708533fb424cef9b1659871982549eaf34e02 (diff)
downloaddexon-sol-tools-8b0928617346ae5066d2ea8185af625de5b5f577.tar
dexon-sol-tools-8b0928617346ae5066d2ea8185af625de5b5f577.tar.gz
dexon-sol-tools-8b0928617346ae5066d2ea8185af625de5b5f577.tar.bz2
dexon-sol-tools-8b0928617346ae5066d2ea8185af625de5b5f577.tar.lz
dexon-sol-tools-8b0928617346ae5066d2ea8185af625de5b5f577.tar.xz
dexon-sol-tools-8b0928617346ae5066d2ea8185af625de5b5f577.tar.zst
dexon-sol-tools-8b0928617346ae5066d2ea8185af625de5b5f577.zip
fix: restore button to previous state
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/ui/button.tsx62
1 files changed, 24 insertions, 38 deletions
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index 61a0f23a8..5274d835b 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -6,8 +6,6 @@ import { ColorOption, styled } from '../../style/theme';
export interface ButtonProps {
backgroundColor?: ColorOption;
borderColor?: ColorOption;
- fontColor?: ColorOption;
- fontSize?: string;
width?: string;
padding?: string;
type?: string;
@@ -26,50 +24,38 @@ const darkenOnHoverAmount = 0.1;
const darkenOnActiveAmount = 0.2;
const saturateOnFocusAmount = 0.2;
export const Button = styled(PlainButton)`
- && {
- all: initial;
- box-sizing: border-box;
- font-size: ${props => props.fontSize};
- font-family: 'Inter UI', sans-serif;
- font-weight: 600;
- color: ${props => props.fontColor && props.theme[props.fontColor]};
- cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
- transition: background-color, opacity 0.5s ease;
- padding: ${props => props.padding};
- border-radius: 3px;
- text-align: center;
- 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')};
- &:hover {
- background-color: ${props =>
- !props.isDisabled
- ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
- : ''} !important;
- }
- &:active {
- background-color: ${props =>
- !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
- }
- &:disabled {
- opacity: 0.5;
- }
- &:focus {
- background-color: ${props =>
- saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
- }
+ cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
+ transition: background-color, opacity 0.5s ease;
+ padding: ${props => props.padding};
+ 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')};
+ &:hover {
+ background-color: ${props =>
+ !props.isDisabled
+ ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
+ : ''} !important;
+ }
+ &:active {
+ background-color: ${props =>
+ !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
+ }
+ &:disabled {
+ opacity: 0.5;
+ }
+ &:focus {
+ background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
}
`;
Button.defaultProps = {
backgroundColor: ColorOption.primaryColor,
borderColor: ColorOption.primaryColor,
- fontColor: ColorOption.white,
width: 'auto',
isDisabled: false,
- padding: '.6em 1.2em',
- fontSize: '15px',
+ padding: '1em 2.2em',
};
Button.displayName = 'Button';