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

1 files changed, 22 insertions, 17 deletions

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>
 );