diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/instant/src/components/sliding_panel.tsx | 6 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/icon.tsx | 14 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/overlay.tsx | 4 | ||||
| -rw-r--r-- | packages/instant/src/components/zero_ex_instant_provider.tsx | 2 | ||||
| -rw-r--r-- | packages/instant/src/style/theme.ts | 4 |
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 }; |