diff options
Diffstat (limited to 'packages/instant/src/components/ui/button.tsx')
-rw-r--r-- | packages/instant/src/components/ui/button.tsx | 20 |
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'; |