fix(instant): Dropdown hover should be 10% of primary color

2 files changed, 24 insertions, 17 deletions

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 636eb8fc9..58d7d5871 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -36,6 +36,7 @@ export interface ContainerProps {
     cursor?: string;
     overflow?: string;
     darkenOnHover?: boolean;
+    rawHoverColor?: string;
     boxShadowOnHover?: boolean;
     flexGrow?: string | number;
 }
@@ -87,6 +88,7 @@ export const Container =
         background-color: ${props => getBackgroundColor(props.theme, props.backgroundColor, props.rawBackgroundColor)};
         border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
         &:hover {
+            ${props => (props.rawHoverColor ? `background-color: ${props.rawHoverColor}` : '')}
             ${props =>
                 props.darkenOnHover
                     ? `background-color: ${
diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx
index 02e87d639..9b5824c5e 100644
--- a/packages/instant/src/components/ui/dropdown.tsx
+++ b/packages/instant/src/components/ui/dropdown.tsx
@@ -1,7 +1,8 @@
 import * as _ from 'lodash';
+import { transparentize } from 'polished';
 import * as React from 'react';
 
-import { ColorOption, completelyTransparent } from '../../style/theme';
+import { ColorOption, completelyTransparent, ThemeConsumer } from '../../style/theme';
 import { zIndex } from '../../style/z_index';
 
 import { Container } from './container';
@@ -121,20 +122,24 @@ export interface DropdownItemProps extends DropdownItemConfig {
 }
 
 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>
+    <ThemeConsumer>
+        {theme => (
+            <Container
+                onClick={onClick}
+                cursor="pointer"
+                rawHoverColor={transparentize(0.9, theme[ColorOption.primaryColor])}
+                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>
+        )}
+    </ThemeConsumer>
 );