crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1481 from 0xProject/fix/instant/dropdown-color

Browse Source 
[instant] Dropdown hover 10% of primary color
This commit is contained in:
Steve Klebanoff
2019-01-03 09:07:57 -08:00
committed by GitHub
parent c1150824dc c62d862967
commit 2111ea159e
2 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/instant/src/components/ui/container.tsx
View File

@@ -36,6 +36,7 @@ export interface ContainerProps {
cursor?: string; cursor?: string;
overflow?: string; overflow?: string;
darkenOnHover?: boolean; darkenOnHover?: boolean;
rawHoverColor?: string;
boxShadowOnHover?: boolean; boxShadowOnHover?: boolean;
flexGrow?: string | number; flexGrow?: string | number;
} }
@@ -87,6 +88,7 @@ export const Container =
background-color: ${props => getBackgroundColor(props.theme, props.backgroundColor, props.rawBackgroundColor)}; background-color: ${props => getBackgroundColor(props.theme, props.backgroundColor, props.rawBackgroundColor)};
border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
&:hover { &:hover {
${props => (props.rawHoverColor ? `background-color: ${props.rawHoverColor}` : '')}
${props => ${props =>
props.darkenOnHover props.darkenOnHover
? `background-color: ${ ? `background-color: ${

39
packages/instant/src/components/ui/dropdown.tsx
View File

@@ -1,7 +1,8 @@
import * as _ from 'lodash'; import * as _ from 'lodash';
import { transparentize } from 'polished';
import * as React from 'react'; 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 { zIndex } from '../../style/z_index';
import { Container } from './container'; import { Container } from './container';
@@ -121,22 +122,26 @@ export interface DropdownItemProps extends DropdownItemConfig {
} }
export const DropdownItem: React.StatelessComponent<DropdownItemProps> = ({ text, onClick, isLast }) => ( export const DropdownItem: React.StatelessComponent<DropdownItemProps> = ({ text, onClick, isLast }) => (
<Container <ThemeConsumer>
onClick={onClick} {theme => (
cursor="pointer" <Container
darkenOnHover={true} onClick={onClick}
backgroundColor={ColorOption.white} cursor="pointer"
padding="0.8em" rawHoverColor={transparentize(0.9, theme[ColorOption.primaryColor])}
borderTop="0" backgroundColor={ColorOption.white}
border="1px solid" padding="0.8em"
borderRadius={isLast ? '0px 0px 4px 4px' : undefined} borderTop="0"
width="100%" border="1px solid"
borderColor={ColorOption.feintGrey} borderRadius={isLast ? '0px 0px 4px 4px' : undefined}
> width="100%"
<Text fontSize="14px" fontColor={ColorOption.darkGrey}> borderColor={ColorOption.feintGrey}
{text} >
</Text> <Text fontSize="14px" fontColor={ColorOption.darkGrey}>
</Container> {text}
</Text>
</Container>
)}
</ThemeConsumer>
); );
DropdownItem.displayName = 'DropdownItem'; DropdownItem.displayName = 'DropdownItem';