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
commit 2111ea159e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 17 deletions
Show Stats 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;
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: ${

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

@ -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,22 +122,26 @@ 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>
);
DropdownItem.displayName = 'DropdownItem';