aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-02 07:41:08 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-02 07:41:08 +0800
commit180f176716b57d43e2988b5db3a2423c7974177e (patch)
treed8a28e35b510403fd30793479c4f420e63a24fe7
parentad96e953ceabd9e752eb9749f12090dd9ae17b9d (diff)
downloaddexon-sol-tools-180f176716b57d43e2988b5db3a2423c7974177e.tar
dexon-sol-tools-180f176716b57d43e2988b5db3a2423c7974177e.tar.gz
dexon-sol-tools-180f176716b57d43e2988b5db3a2423c7974177e.tar.bz2
dexon-sol-tools-180f176716b57d43e2988b5db3a2423c7974177e.tar.lz
dexon-sol-tools-180f176716b57d43e2988b5db3a2423c7974177e.tar.xz
dexon-sol-tools-180f176716b57d43e2988b5db3a2423c7974177e.tar.zst
dexon-sol-tools-180f176716b57d43e2988b5db3a2423c7974177e.zip
feat: use withTheme to use ColorOption to color Icon
-rw-r--r--packages/instant/src/components/sliding_panel.tsx6
-rw-r--r--packages/instant/src/components/ui/icon.tsx14
-rw-r--r--packages/instant/src/components/ui/overlay.tsx4
-rw-r--r--packages/instant/src/components/zero_ex_instant_provider.tsx2
-rw-r--r--packages/instant/src/style/theme.ts4
5 files changed, 14 insertions, 16 deletions
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index 9219ad1f1..e83cf0fb5 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -5,7 +5,7 @@ import { zIndex } from '../style/z_index';
import { PositionAnimationSettings } from './animations/position_animation';
import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
-import { Button, Container, Text } from './ui';
+import { Container, Icon } from './ui';
export interface PanelProps {
onClose?: () => void;
@@ -13,9 +13,7 @@ export interface PanelProps {
export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
<Container backgroundColor={ColorOption.white} width="100%" height="100%" zIndex={zIndex.panel}>
- <Button onClick={onClose}>
- <Text fontColor={ColorOption.white}>Close </Text>
- </Button>
+ <Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} />
{children}
</Container>
);
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index 574cb26b7..9b83d962a 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
-import { styled } from '../../style/theme';
+import { ColorOption, styled, Theme, withTheme } from '../../style/theme';
type svgRule = 'evenodd' | 'nonzero' | 'inherit';
interface IconInfo {
@@ -58,13 +58,15 @@ export interface IconProps {
className?: string;
width: number;
height?: number;
- color?: string;
+ color?: ColorOption;
icon: keyof IconInfoMapping;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
padding?: string;
+ theme: Theme;
}
-const PlainIcon: React.SFC<IconProps> = props => {
+const PlainIcon: React.StatelessComponent<IconProps> = props => {
const iconInfo = ICONS[props.icon];
+ const colorValue = _.isUndefined(props.color) ? undefined : props.theme[props.color];
return (
<div onClick={props.onClick} className={props.className}>
<svg
@@ -76,7 +78,7 @@ const PlainIcon: React.SFC<IconProps> = props => {
>
<path
d={iconInfo.path}
- fill={props.color}
+ fill={colorValue}
fillRule={iconInfo.fillRule || 'nonzero'}
clipRule={iconInfo.clipRule || 'nonzero'}
stroke={iconInfo.stroke}
@@ -90,7 +92,7 @@ const PlainIcon: React.SFC<IconProps> = props => {
);
};
-export const Icon = styled(PlainIcon)`
+export const Icon = withTheme(styled(PlainIcon)`
cursor: ${props => (!_.isUndefined(props.onClick) ? 'pointer' : 'default')};
transition: opacity 0.5s ease;
padding: ${props => props.padding};
@@ -101,7 +103,7 @@ export const Icon = styled(PlainIcon)`
&:active {
opacity: 1;
}
-`;
+`);
Icon.defaultProps = {
padding: '0em 0em',
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index c5258b031..f1706c874 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
-import { overlayBlack, styled } from '../../style/theme';
+import { ColorOption, overlayBlack, styled } from '../../style/theme';
import { Container } from './container';
import { Flex } from './flex';
@@ -16,7 +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">
- <Icon height={18} width={18} color="white" icon="closeX" onClick={onClose} padding="2em 2em" />
+ <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" />
</Container>
<div>{children}</div>
</Flex>
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 8552a7fb5..ce939c144 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -17,8 +17,6 @@ import { gasPriceEstimator } from '../util/gas_price_estimator';
import { getProvider } from '../util/provider';
import { web3Wrapper } from '../util/web3_wrapper';
-import { ZeroExInstantContainer } from './zero_ex_instant_container';
-
fonts.include();
export type ZeroExInstantProviderProps = ZeroExInstantProviderRequiredProps &
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index e81694620..8a5d56927 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -1,6 +1,6 @@
import * as styledComponents from 'styled-components';
-const { default: styled, css, keyframes, ThemeProvider } = styledComponents;
+const { default: styled, css, keyframes, withTheme, ThemeProvider } = styledComponents;
export type Theme = { [key in ColorOption]: string };
@@ -31,4 +31,4 @@ export const theme: Theme = {
export const transparentWhite = 'rgba(255,255,255,0.3)';
export const overlayBlack = 'rgba(0, 0, 0, 0.6)';
-export { styled, css, keyframes, ThemeProvider };
+export { styled, css, keyframes, withTheme, ThemeProvider };