aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-11-02 06:23:42 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-11-02 06:25:34 +0800
commitd16499da4e0611438df7bfe226bce940beca6918 (patch)
tree59affb762069db178050928fa826062244f4a1e8
parentc2645b26b457c66b3adcb98a5c089eba3e72f458 (diff)
downloaddexon-sol-tools-d16499da4e0611438df7bfe226bce940beca6918.tar
dexon-sol-tools-d16499da4e0611438df7bfe226bce940beca6918.tar.gz
dexon-sol-tools-d16499da4e0611438df7bfe226bce940beca6918.tar.bz2
dexon-sol-tools-d16499da4e0611438df7bfe226bce940beca6918.tar.lz
dexon-sol-tools-d16499da4e0611438df7bfe226bce940beca6918.tar.xz
dexon-sol-tools-d16499da4e0611438df7bfe226bce940beca6918.tar.zst
dexon-sol-tools-d16499da4e0611438df7bfe226bce940beca6918.zip
Remove alternate hover styling from button and move into icon component
-rw-r--r--packages/instant/src/components/ui/button.tsx20
-rw-r--r--packages/instant/src/components/ui/icon.tsx69
-rw-r--r--packages/instant/src/components/ui/index.ts2
-rw-r--r--packages/instant/src/components/ui/overlay.tsx15
-rw-r--r--packages/instant/src/style/theme.ts2
5 files changed, 54 insertions, 54 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';
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index a05017ba1..f12059cff 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/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';
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
index c60b9640e..0efabdb85 100644
--- a/packages/instant/src/components/ui/index.ts
+++ b/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';
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index 94fa10fc5..c5258b031 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/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,
};
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index c7cb0bebe..e81694620 100644
--- a/packages/instant/src/style/theme.ts
+++ b/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)';