Remove alternate hover styling from button and move into icon component

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';

packages/instant/src/components/ui/icon.tsx

@@ -1,5 +1,8 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 
+import { styled } from '../../style/theme';
+
 type svgRule = 'evenodd' | 'nonzero' | 'inherit';
 interface IconInfo {
     viewBox: string;
@@ -52,33 +55,57 @@ const ICONS: IconInfoMapping = {
 };
 
 export interface IconProps {
+    className?: string;
     width: number;
     height?: number;
     color?: string;
     icon: keyof IconInfoMapping;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    padding?: string;
 }
-export const Icon: React.SFC<IconProps> = props => {
+const PlainIcon: React.SFC<IconProps> = props => {
     const iconInfo = ICONS[props.icon];
-
     return (
-        <svg
-            width={props.width}
-            height={props.height}
-            viewBox={iconInfo.viewBox}
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d={iconInfo.path}
-                fill={props.color}
-                fillRule={iconInfo.fillRule || 'nonzero'}
-                clipRule={iconInfo.clipRule || 'nonzero'}
-                stroke={iconInfo.stroke}
-                strokeOpacity={iconInfo.strokeOpacity}
-                strokeWidth={iconInfo.strokeWidth}
-                strokeLinecap={iconInfo.strokeLinecap}
-                strokeLinejoin={iconInfo.strokeLinejoin}
-            />
-        </svg>
+        <div onClick={props.onClick} className={props.className}>
+            <svg
+                width={props.width}
+                height={props.height}
+                viewBox={iconInfo.viewBox}
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d={iconInfo.path}
+                    fill={props.color}
+                    fillRule={iconInfo.fillRule || 'nonzero'}
+                    clipRule={iconInfo.clipRule || 'nonzero'}
+                    stroke={iconInfo.stroke}
+                    strokeOpacity={iconInfo.strokeOpacity}
+                    strokeWidth={iconInfo.strokeWidth}
+                    strokeLinecap={iconInfo.strokeLinecap}
+                    strokeLinejoin={iconInfo.strokeLinejoin}
+                />
+            </svg>
+        </div>
     );
 };
+
+export const Icon = styled(PlainIcon)`
+    cursor: ${props => (!_.isUndefined(props.onClick) ? 'pointer' : 'default')};
+    transition: opacity 0.5s ease;
+    padding: ${props => props.padding};
+    opacity: ${props => (!_.isUndefined(props.onClick) ? 0.7 : 1)};
+    &:hover {
+        opacity: 1;
+    }
+    &:active {
+        opacity: 1;
+    }
+`;
+
+Icon.defaultProps = {
+    color: 'white',
+    padding: '0em 0em',
+};
+
+Icon.displayName = 'Icon';

packages/instant/src/components/ui/index.ts

@@ -1,5 +1,5 @@
 export { Text, TextProps, Title } from './text';
-export { Button, ButtonProps, ButtonHoverStyle } from './button';
+export { Button, ButtonProps } from './button';
 export { Flex, FlexProps } from './flex';
 export { Container, ContainerProps } from './container';
 export { Input, InputProps } from './input';

packages/instant/src/components/ui/overlay.tsx

@@ -1,10 +1,8 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { ColorOption, overlayBlack, styled } from '../../style/theme';
-import { util } from '../../util/util';
+import { overlayBlack, styled } from '../../style/theme';
 
-import { Button, ButtonHoverStyle } from './button';
 import { Container } from './container';
 import { Flex } from './flex';
 import { Icon } from './icon';
@@ -18,15 +16,7 @@ export interface OverlayProps {
 const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
     <Flex height="100vh" className={className}>
         <Container position="absolute" top="0px" right="0px">
-            <Button
-                backgroundColor={ColorOption.clear}
-                borderColor={ColorOption.clear}
-                padding="2em 2em"
-                onClick={onClose}
-                hoverStyle={ButtonHoverStyle.Opacity}
-            >
-                <Icon height={18} width={18} color="white" icon="closeX" />
-            </Button>
+            <Icon height={18} width={18} color="white" icon="closeX" onClick={onClose} padding="2em 2em" />
         </Container>
         <div>{children}</div>
     </Flex>
@@ -42,7 +32,6 @@ export const Overlay = styled(PlainOverlay)`
 `;
 
 Overlay.defaultProps = {
-    onClose: util.boundNoop,
     zIndex: 100,
 };
 

packages/instant/src/style/theme.ts

@@ -14,7 +14,6 @@ export enum ColorOption {
     white = 'white',
     lightOrange = 'lightOrange',
     darkOrange = 'darkOrange',
-    clear = 'clear',
 }
 
 export const theme: Theme = {
@@ -27,7 +26,6 @@ export const theme: Theme = {
     white: 'white',
     lightOrange: '#F9F2ED',
     darkOrange: '#F2994C',
-    clear: 'rgba(0, 0, 0, 0.0)',
 };
 
 export const transparentWhite = 'rgba(255,255,255,0.3)';