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; 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: ${

9
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,10 +122,12 @@ export interface DropdownItemProps extends DropdownItemConfig {
} }
export const DropdownItem: React.StatelessComponent<DropdownItemProps> = ({ text, onClick, isLast }) => ( export const DropdownItem: React.StatelessComponent<DropdownItemProps> = ({ text, onClick, isLast }) => (
<ThemeConsumer>
{theme => (
<Container <Container
onClick={onClick} onClick={onClick}
cursor="pointer" cursor="pointer"
darkenOnHover={true} rawHoverColor={transparentize(0.9, theme[ColorOption.primaryColor])}
backgroundColor={ColorOption.white} backgroundColor={ColorOption.white}
padding="0.8em" padding="0.8em"
borderTop="0" borderTop="0"
@ -137,6 +140,8 @@ export const DropdownItem: React.StatelessComponent<DropdownItemProps> = ({ text
{text} {text}
</Text> </Text>
</Container> </Container>
)}
</ThemeConsumer>
); );
DropdownItem.displayName = 'DropdownItem'; DropdownItem.displayName = 'DropdownItem';