6 files changed, 53 insertions, 13 deletions
diff --git a/packages/instant/src/components/ui/circle.tsx b/packages/instant/src/components/ui/circle.tsx
new file mode 100644
index 000000000..eec2777d2
--- /dev/null
+++ b/packages/instant/src/components/ui/circle.tsx
@@ -0,0 +1,22 @@
+import { styled } from '../../style/theme';
+
+export interface CircleProps {
+    diameter: number;
+    fillColor?: string;
+}
+
+export const Circle =
+    styled.div <
+    CircleProps >
+    `
+    width: ${props => props.diameter}px;
+    height: ${props => props.diameter}px;
+    background-color: ${props => props.fillColor};
+    border-radius: 50%;
+`;
+
+Circle.displayName = 'Circle';
+
+Circle.defaultProps = {
+    fillColor: 'white',
+};
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 7b8642761..a0a187e5f 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -1,3 +1,5 @@
+import { darken } from 'polished';
+
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
@@ -30,6 +32,7 @@ export interface ContainerProps {
     opacity?: number;
     cursor?: string;
     overflow?: string;
+    darkenOnHover?: boolean;
 }
 
 export const Container =
@@ -64,6 +67,14 @@ export const Container =
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
+    &:hover {
+        ${props =>
+            props.darkenOnHover
+                ? `background-color: ${
+                      props.backgroundColor ? darken(0.05, props.theme[props.backgroundColor]) : 'none'
+                  }`
+                : ''};
+    }
 `;
 
 Container.defaultProps = {
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index f12059cff..94ea26900 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 {
@@ -20,6 +20,7 @@ interface IconInfoMapping {
     failed: IconInfo;
     success: IconInfo;
     chevron: IconInfo;
+    search: IconInfo;
 }
 const ICONS: IconInfoMapping = {
     closeX: {
@@ -52,19 +53,28 @@ const ICONS: IconInfoMapping = {
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
     },
+    search: {
+        viewBox: '0 0 14 14',
+        fillRule: 'evenodd',
+        clipRule: 'evenodd',
+        path:
+            'M8.39404 5.19727C8.39404 6.96289 6.96265 8.39453 5.19702 8.39453C3.4314 8.39453 2 6.96289 2 5.19727C2 3.43164 3.4314 2 5.19702 2C6.96265 2 8.39404 3.43164 8.39404 5.19727ZM8.09668 9.51074C7.26855 10.0684 6.27075 10.3945 5.19702 10.3945C2.3269 10.3945 0 8.06738 0 5.19727C0 2.32715 2.3269 0 5.19702 0C8.06738 0 10.394 2.32715 10.394 5.19727C10.394 6.27051 10.0686 7.26855 9.51074 8.09668L13.6997 12.2861L12.2854 13.7002L8.09668 9.51074Z',
+    },
 };
 
 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 +86,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 +100,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,10 +111,9 @@ export const Icon = styled(PlainIcon)`
     &:active {
         opacity: 1;
     }
-`;
+`);
 
 Icon.defaultProps = {
-    color: 'white',
     padding: '0em 0em',
 };
 
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
index 0efabdb85..87f5c11a1 100644
--- a/packages/instant/src/components/ui/index.ts
+++ b/packages/instant/src/components/ui/index.ts
@@ -1,4 +1,5 @@
 export { Text, TextProps, Title } from './text';
+export { Circle, CircleProps } from './circle';
 export { Button, ButtonProps } from './button';
 export { Flex, FlexProps } from './flex';
 export { Container, ContainerProps } from './container';
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/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index fd72f6cc8..cba6e7b20 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -18,7 +18,6 @@ export interface TextProps {
     fontWeight?: number | string;
     textDecorationLine?: string;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    hoverColor?: string;
     noWrap?: boolean;
     display?: string;
 }
@@ -46,9 +45,7 @@ export const Text =
     ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')};
     &:hover {
         ${props =>
-            props.onClick
-                ? `color: ${props.hoverColor || darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}`
-                : ''};
+            props.onClick ? `color: ${darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}` : ''};
     }
 `;