aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/instant/src/components/ui/container.tsx2
-rw-r--r--packages/instant/src/components/ui/dropdown.tsx39
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>
);