Merge branch 'development' into feature/instant/buy-quote-heartbeat

9 files changed, 305 insertions, 159 deletions

diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index 5274d835b..b90221bf4 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -6,6 +6,8 @@ import { ColorOption, styled } from '../../style/theme';
 export interface ButtonProps {
     backgroundColor?: ColorOption;
     borderColor?: ColorOption;
+    fontColor?: ColorOption;
+    fontSize?: string;
     width?: string;
     padding?: string;
     type?: string;
@@ -24,29 +26,39 @@ const darkenOnHoverAmount = 0.1;
 const darkenOnActiveAmount = 0.2;
 const saturateOnFocusAmount = 0.2;
 export const Button = styled(PlainButton)`
-    cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
-    transition: background-color, opacity 0.5s ease;
-    padding: ${props => props.padding};
-    border-radius: 3px;
-    outline: none;
-    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')};
-    &:hover {
-        background-color: ${props =>
-            !props.isDisabled
-                ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
-                : ''} !important;
-    }
-    &:active {
-        background-color: ${props =>
-            !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
-    }
-    &:disabled {
-        opacity: 0.5;
-    }
-    &:focus {
-        background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
+    && {
+        all: initial;
+        box-sizing: border-box;
+        font-size: ${props => props.fontSize};
+        font-family: 'Inter UI', sans-serif;
+        font-weight: 600;
+        color: ${props => props.fontColor && props.theme[props.fontColor]};
+        cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
+        transition: background-color, opacity 0.5s ease;
+        padding: ${props => props.padding};
+        border-radius: 3px;
+        text-align: center;
+        outline: none;
+        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')};
+        &:hover {
+            background-color: ${props =>
+                !props.isDisabled
+                    ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
+                    : ''} !important;
+        }
+        &:active {
+            background-color: ${props =>
+                !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
+        }
+        &:disabled {
+            opacity: 0.5;
+        }
+        &:focus {
+            background-color: ${props =>
+                saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
+        }
     }
 `;
 
@@ -55,7 +67,8 @@ Button.defaultProps = {
     borderColor: ColorOption.primaryColor,
     width: 'auto',
     isDisabled: false,
-    padding: '1em 2.2em',
+    padding: '.6em 1.2em',
+    fontSize: '15px',
 };
 
 Button.displayName = 'Button';
diff --git a/packages/instant/src/components/ui/circle.tsx b/packages/instant/src/components/ui/circle.tsx
index eec2777d2..4f9f56f12 100644
--- a/packages/instant/src/components/ui/circle.tsx
+++ b/packages/instant/src/components/ui/circle.tsx
@@ -1,22 +1,27 @@
-import { styled } from '../../style/theme';
+import { ColorOption, styled, Theme, withTheme } from '../../style/theme';
 
 export interface CircleProps {
     diameter: number;
-    fillColor?: string;
+    rawColor?: string;
+    color?: ColorOption;
+    theme: Theme;
 }
 
-export const Circle =
+export const Circle = withTheme(
     styled.div <
-    CircleProps >
-    `
-    width: ${props => props.diameter}px;
-    height: ${props => props.diameter}px;
-    background-color: ${props => props.fillColor};
-    border-radius: 50%;
-`;
+        CircleProps >
+        `
+    && {
+        width: ${props => props.diameter}px;
+        height: ${props => props.diameter}px;
+        background-color: ${props => (props.rawColor ? props.rawColor : props.theme[props.color || ColorOption.white])};
+        border-radius: 50%;
+    }
+`,
+);
 
 Circle.displayName = 'Circle';
 
 Circle.defaultProps = {
-    fillColor: 'white',
+    color: ColorOption.white,
 };
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 403751210..8aa5db9e5 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -34,6 +34,7 @@ export interface ContainerProps {
     cursor?: string;
     overflow?: string;
     darkenOnHover?: boolean;
+    boxShadowOnHover?: boolean;
     flexGrow?: string | number;
 }
 
@@ -41,42 +42,45 @@ export const Container =
     styled.div <
     ContainerProps >
     `
-    box-sizing: border-box;
-    ${props => cssRuleIfExists(props, 'flex-grow')}
-    ${props => cssRuleIfExists(props, 'position')}
-    ${props => cssRuleIfExists(props, 'top')}
-    ${props => cssRuleIfExists(props, 'right')}
-    ${props => cssRuleIfExists(props, 'bottom')}
-    ${props => cssRuleIfExists(props, 'left')}
-    ${props => cssRuleIfExists(props, 'max-width')}
-    ${props => cssRuleIfExists(props, 'margin')}
-    ${props => cssRuleIfExists(props, 'margin-top')}
-    ${props => cssRuleIfExists(props, 'margin-right')}
-    ${props => cssRuleIfExists(props, 'margin-bottom')}
-    ${props => cssRuleIfExists(props, 'margin-left')}
-    ${props => cssRuleIfExists(props, 'padding')}
-    ${props => cssRuleIfExists(props, 'border-radius')}
-    ${props => cssRuleIfExists(props, 'border')}
-    ${props => cssRuleIfExists(props, 'border-top')}
-    ${props => cssRuleIfExists(props, 'border-bottom')}
-    ${props => cssRuleIfExists(props, 'z-index')}
-    ${props => cssRuleIfExists(props, 'white-space')}
-    ${props => cssRuleIfExists(props, 'opacity')}
-    ${props => cssRuleIfExists(props, 'cursor')}
-    ${props => cssRuleIfExists(props, 'overflow')}
-    ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
-    ${props => props.display && stylesForMedia('display', props.display)}
-    ${props => stylesForMedia('width', props.width || 'auto')}
-    ${props => stylesForMedia('height', props.height || 'auto')}
-    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'
-                  }`
-                : ''};
+    && {
+        box-sizing: border-box;
+        ${props => cssRuleIfExists(props, 'flex-grow')}
+        ${props => cssRuleIfExists(props, 'position')}
+        ${props => cssRuleIfExists(props, 'top')}
+        ${props => cssRuleIfExists(props, 'right')}
+        ${props => cssRuleIfExists(props, 'bottom')}
+        ${props => cssRuleIfExists(props, 'left')}
+        ${props => cssRuleIfExists(props, 'max-width')}
+        ${props => cssRuleIfExists(props, 'margin')}
+        ${props => cssRuleIfExists(props, 'margin-top')}
+        ${props => cssRuleIfExists(props, 'margin-right')}
+        ${props => cssRuleIfExists(props, 'margin-bottom')}
+        ${props => cssRuleIfExists(props, 'margin-left')}
+        ${props => cssRuleIfExists(props, 'padding')}
+        ${props => cssRuleIfExists(props, 'border-radius')}
+        ${props => cssRuleIfExists(props, 'border')}
+        ${props => cssRuleIfExists(props, 'border-top')}
+        ${props => cssRuleIfExists(props, 'border-bottom')}
+        ${props => cssRuleIfExists(props, 'z-index')}
+        ${props => cssRuleIfExists(props, 'white-space')}
+        ${props => cssRuleIfExists(props, 'opacity')}
+        ${props => cssRuleIfExists(props, 'cursor')}
+        ${props => cssRuleIfExists(props, 'overflow')}
+        ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
+        ${props => props.display && stylesForMedia<string>('display', props.display)}
+        ${props => props.width && stylesForMedia<string>('width', props.width)}
+        ${props => props.height && stylesForMedia<string>('height', props.height)}
+        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'
+                      }`
+                    : ''};
+            ${props => (props.boxShadowOnHover ? 'box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)' : '')};
+        }
     }
 `;
 
diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx
new file mode 100644
index 000000000..3a23f456d
--- /dev/null
+++ b/packages/instant/src/components/ui/dropdown.tsx
@@ -0,0 +1,134 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { ColorOption, completelyTransparent } from '../../style/theme';
+import { zIndex } from '../../style/z_index';
+
+import { Container } from './container';
+import { Flex } from './flex';
+import { Icon } from './icon';
+import { Overlay } from './overlay';
+import { Text } from './text';
+
+export interface DropdownItemConfig {
+    text: string;
+    onClick?: () => void;
+}
+
+export interface DropdownProps {
+    value: string;
+    label?: string;
+    items: DropdownItemConfig[];
+}
+
+export interface DropdownState {
+    isOpen: boolean;
+}
+
+export class Dropdown extends React.Component<DropdownProps, DropdownState> {
+    public static defaultProps = {
+        items: [],
+    };
+    public state: DropdownState = {
+        isOpen: false,
+    };
+    public render(): React.ReactNode {
+        const { value, label, items } = this.props;
+        const { isOpen } = this.state;
+        const hasItems = !_.isEmpty(items);
+        const borderRadius = isOpen ? '4px 4px 0px 0px' : '4px';
+        return (
+            <React.Fragment>
+                {isOpen && (
+                    <Overlay
+                        zIndex={zIndex.dropdownItems - 1}
+                        backgroundColor={completelyTransparent}
+                        onClick={this._closeDropdown}
+                    />
+                )}
+                <Container position="relative">
+                    <Container
+                        cursor={hasItems ? 'pointer' : undefined}
+                        onClick={this._handleDropdownClick}
+                        hasBoxShadow={isOpen}
+                        boxShadowOnHover={true}
+                        borderRadius={borderRadius}
+                        border="1px solid"
+                        borderColor={ColorOption.feintGrey}
+                        padding="0.8em"
+                    >
+                        <Flex justify="space-between">
+                            <Text fontSize="16px" fontColor={ColorOption.darkGrey}>
+                                {value}
+                            </Text>
+                            <Container>
+                                {label && (
+                                    <Text fontSize="16px" fontColor={ColorOption.lightGrey}>
+                                        {label}
+                                    </Text>
+                                )}
+                                {hasItems && (
+                                    <Container marginLeft="5px" display="inline-block" position="relative" bottom="2px">
+                                        <Icon padding="3px" icon="chevron" width={12} stroke={ColorOption.grey} />
+                                    </Container>
+                                )}
+                            </Container>
+                        </Flex>
+                    </Container>
+                    {isOpen && (
+                        <Container
+                            width="100%"
+                            position="absolute"
+                            onClick={this._closeDropdown}
+                            backgroundColor={ColorOption.white}
+                            hasBoxShadow={true}
+                            zIndex={zIndex.dropdownItems}
+                        >
+                            {_.map(items, (item, index) => (
+                                <DropdownItem key={item.text} {...item} isLast={index === items.length - 1} />
+                            ))}
+                        </Container>
+                    )}
+                </Container>
+            </React.Fragment>
+        );
+    }
+    private readonly _handleDropdownClick = (): void => {
+        if (_.isEmpty(this.props.items)) {
+            return;
+        }
+        this.setState({
+            isOpen: !this.state.isOpen,
+        });
+    };
+    private readonly _closeDropdown = (): void => {
+        this.setState({
+            isOpen: false,
+        });
+    };
+}
+
+export interface DropdownItemProps extends DropdownItemConfig {
+    text: string;
+    onClick?: () => void;
+    isLast: boolean;
+}
+
+export const DropdownItem: React.StatelessComponent<DropdownItemProps> = ({ text, onClick, isLast }) => (
+    <Container
+        onClick={onClick}
+        cursor="pointer"
+        darkenOnHover={true}
+        backgroundColor={ColorOption.white}
+        padding="0.8em"
+        borderTop="0"
+        border="1px solid"
+        borderRadius={isLast ? '0px 0px 4px 4px' : undefined}
+        width="100%"
+        borderColor={ColorOption.feintGrey}
+    >
+        <Text fontSize="14px" fontColor={ColorOption.darkGrey}>
+            {text}
+        </Text>
+    </Container>
+);
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index fd218b0cd..274c46b9e 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -18,15 +18,17 @@ export const Flex =
     styled.div <
     FlexProps >
     `
-    display: ${props => (props.inline ? 'inline-flex' : 'flex')};
-    flex-direction: ${props => props.direction};
-    flex-wrap: ${props => props.flexWrap};
-    ${props => cssRuleIfExists(props, 'flexGrow')}
-    justify-content: ${props => props.justify};
-    align-items: ${props => props.align};
-    background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
-    ${props => stylesForMedia('width', props.width || 'auto')}
-    ${props => stylesForMedia('height', props.height || 'auto')}
+    && {
+        display: ${props => (props.inline ? 'inline-flex' : 'flex')};
+        flex-direction: ${props => props.direction};
+        flex-wrap: ${props => props.flexWrap};
+        ${props => cssRuleIfExists(props, 'flexGrow')}
+        justify-content: ${props => props.justify};
+        align-items: ${props => props.align};
+        background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+        ${props => (props.width ? stylesForMedia('width', props.width) : '')}
+        ${props => (props.height ? stylesForMedia('height', props.height) : '')}
+    }
 `;
 
 Flex.defaultProps = {
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index 94ea26900..a88fa87dd 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -9,7 +9,6 @@ interface IconInfo {
     path: string;
     fillRule?: svgRule;
     clipRule?: svgRule;
-    stroke?: string;
     strokeOpacity?: number;
     strokeWidth?: number;
     strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
@@ -47,7 +46,6 @@ const ICONS: IconInfoMapping = {
     chevron: {
         viewBox: '0 0 12 7',
         path: 'M11 1L6 6L1 1',
-        stroke: 'white',
         strokeOpacity: 0.5,
         strokeWidth: 1.5,
         strokeLinecap: 'round',
@@ -67,6 +65,7 @@ export interface IconProps {
     width: number;
     height?: number;
     color?: ColorOption;
+    stroke?: ColorOption;
     icon: keyof IconInfoMapping;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     padding?: string;
@@ -75,6 +74,7 @@ export interface IconProps {
 const PlainIcon: React.StatelessComponent<IconProps> = props => {
     const iconInfo = ICONS[props.icon];
     const colorValue = _.isUndefined(props.color) ? undefined : props.theme[props.color];
+    const strokeValue = _.isUndefined(props.stroke) ? undefined : props.theme[props.stroke];
     return (
         <div onClick={props.onClick} className={props.className}>
             <svg
@@ -89,7 +89,7 @@ const PlainIcon: React.StatelessComponent<IconProps> = props => {
                     fill={colorValue}
                     fillRule={iconInfo.fillRule || 'nonzero'}
                     clipRule={iconInfo.clipRule || 'nonzero'}
-                    stroke={iconInfo.stroke}
+                    stroke={strokeValue}
                     strokeOpacity={iconInfo.strokeOpacity}
                     strokeWidth={iconInfo.strokeWidth}
                     strokeLinecap={iconInfo.strokeLinecap}
@@ -101,15 +101,18 @@ const PlainIcon: React.StatelessComponent<IconProps> = props => {
 };
 
 export const Icon = withTheme(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;
+    && {
+        display: inline-block;
+        ${props => (!_.isUndefined(props.onClick) ? 'cursor: pointer' : '')};
+        transition: opacity 0.5s ease;
+        padding: ${props => props.padding};
+        opacity: ${props => (!_.isUndefined(props.onClick) ? 0.7 : 1)};
+        &:hover {
+            opacity: 1;
+        }
+        &:active {
+            opacity: 1;
+        }
     }
 `);
 
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index a884ff7cb..2fb408db4 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -16,17 +16,20 @@ export const Input =
     styled.input <
     InputProps >
     `
-    font-size: ${props => props.fontSize};
-    width: ${props => props.width};
-    padding: 0.1em 0em;
-    font-family: 'Inter UI';
-    color: ${props => props.theme[props.fontColor || 'white']};
-    background: transparent;
-    outline: none;
-    border: none;
-    &::placeholder {
+    && {
+        all: initial;
+        font-size: ${props => props.fontSize};
+        width: ${props => props.width};
+        padding: 0.1em 0em;
+        font-family: 'Inter UI';
         color: ${props => props.theme[props.fontColor || 'white']};
-        opacity: 0.5;
+        background: transparent;
+        outline: none;
+        border: none;
+        &::placeholder {
+            color: ${props => props.theme[props.fontColor || 'white']};
+            opacity: 0.5;
+        }
     }
 `;
 
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index 7110ee70f..c5f55f9c0 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -1,40 +1,31 @@
 import * as _ from 'lodash';
-import * as React from 'react';
 
-import { ColorOption, overlayBlack, styled } from '../../style/theme';
-
-import { Container } from './container';
-import { Flex } from './flex';
-import { Icon } from './icon';
+import { overlayBlack, styled } from '../../style/theme';
+import { zIndex } from '../../style/z_index';
 
 export interface OverlayProps {
-    className?: string;
-    onClose?: () => void;
     zIndex?: number;
+    backgroundColor?: string;
 }
 
-const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
-    <Flex height="100vh" className={className}>
-        <Container position="absolute" top="0px" right="0px" display={{ default: 'initial', sm: 'none' }}>
-            <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" />
-        </Container>
-        <Container width={{ default: 'auto', sm: '100%' }} height={{ default: 'auto', sm: '100%' }}>
-            {children}
-        </Container>
-    </Flex>
-);
-export const Overlay = styled(PlainOverlay)`
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: ${props => props.zIndex}
-    background-color: ${overlayBlack};
+export const Overlay =
+    styled.div <
+    OverlayProps >
+    `
+    && {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: ${props => props.zIndex}
+        background-color: ${props => props.backgroundColor};
+    }
 `;
 
 Overlay.defaultProps = {
-    zIndex: 100,
+    zIndex: zIndex.overlayDefault,
+    backgroundColor: overlayBlack,
 };
 
 Overlay.displayName = 'Overlay';
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index cba6e7b20..4fe429d25 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -27,25 +27,27 @@ export const Text =
     styled.div <
     TextProps >
     `
-    font-family: ${props => props.fontFamily};
-    font-style: ${props => props.fontStyle};
-    font-weight: ${props => props.fontWeight};
-    font-size: ${props => props.fontSize};
-    opacity: ${props => props.opacity};
-    text-decoration-line: ${props => props.textDecorationLine};
-    ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
-    ${props => (props.center ? 'text-align: center' : '')};
-    color: ${props => props.fontColor && props.theme[props.fontColor]};
-    ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')};
-    ${props => (props.onClick ? 'cursor: pointer' : '')};
-    transition: color 0.5s ease;
-    ${props => (props.noWrap ? 'white-space: nowrap' : '')};
-    ${props => (props.display ? `display: ${props.display}` : '')};
-    ${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')};
-    ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')};
-    &:hover {
-        ${props =>
-            props.onClick ? `color: ${darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}` : ''};
+    && {
+        font-family: 'Inter UI', sans-serif;
+        font-style: ${props => props.fontStyle};
+        font-weight: ${props => props.fontWeight};
+        font-size: ${props => props.fontSize};
+        opacity: ${props => props.opacity};
+        text-decoration-line: ${props => props.textDecorationLine};
+        ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
+        ${props => (props.center ? 'text-align: center' : '')};
+        color: ${props => props.fontColor && props.theme[props.fontColor]};
+        ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')};
+        ${props => (props.onClick ? 'cursor: pointer' : '')};
+        transition: color 0.5s ease;
+        ${props => (props.noWrap ? 'white-space: nowrap' : '')};
+        ${props => (props.display ? `display: ${props.display}` : '')};
+        ${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')};
+        ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')};
+        &:hover {
+            ${props =>
+                props.onClick ? `color: ${darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}` : ''};
+        }
     }
 `;
 
@@ -61,14 +63,3 @@ Text.defaultProps = {
 };
 
 Text.displayName = 'Text';
-
-export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />;
-
-Title.defaultProps = {
-    fontSize: '20px',
-    fontWeight: 600,
-    opacity: 1,
-    fontColor: ColorOption.primaryColor,
-};
-
-Title.displayName = 'Title';