feat: use withTheme to use ColorOption to color Icon

2 files changed, 10 insertions, 8 deletions

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>