aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/ui/button.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components/ui/button.tsx')
-rw-r--r--packages/instant/src/components/ui/button.tsx20
1 files changed, 3 insertions, 17 deletions
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index 0051482e7..5274d835b 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -3,11 +3,6 @@ import * as React from 'react';
import { ColorOption, styled } from '../../style/theme';
-export enum ButtonHoverStyle {
- Darken = 0,
- Opacity,
-}
-
export interface ButtonProps {
backgroundColor?: ColorOption;
borderColor?: ColorOption;
@@ -17,7 +12,6 @@ export interface ButtonProps {
isDisabled?: boolean;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
className?: string;
- hoverStyle?: ButtonHoverStyle;
}
const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
@@ -38,38 +32,30 @@ export const Button = styled(PlainButton)`
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')};
- opacity: ${props => (props.hoverStyle === ButtonHoverStyle.Opacity ? 0.7 : 1)};
&:hover {
background-color: ${props =>
- shouldDarken(props)
+ !props.isDisabled
? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
: ''} !important;
- opacity: 1;
}
&:active {
background-color: ${props =>
- shouldDarken(props) ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
- opacity: 1;
+ !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
}
&:disabled {
- opacity: ${props => (props.hoverStyle === ButtonHoverStyle.Darken ? 0.5 : 0.2)};
+ opacity: 0.5;
}
&:focus {
background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
}
`;
-const shouldDarken = (props: ButtonProps) => {
- return !props.isDisabled && props.hoverStyle === ButtonHoverStyle.Darken;
-};
-
Button.defaultProps = {
backgroundColor: ColorOption.primaryColor,
borderColor: ColorOption.primaryColor,
width: 'auto',
isDisabled: false,
padding: '1em 2.2em',
- hoverStyle: ButtonHoverStyle.Darken,
};
Button.displayName = 'Button';