diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-10 00:54:55 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-10 00:54:55 +0800 |
commit | fb3605026ef63ef6897010a52bf3f4c116cdf271 (patch) | |
tree | af3887e5f785e049daeaf795e0f3e4a9ad370d93 /packages/instant/src/components/ui/dropdown.tsx | |
parent | 76dde294f10bb3d5c1074cd6599668bcb1cdd8ec (diff) | |
parent | 5b8c9122a292f6558c45440b053ceae52d36d495 (diff) | |
download | dexon-0x-contracts-fb3605026ef63ef6897010a52bf3f4c116cdf271.tar dexon-0x-contracts-fb3605026ef63ef6897010a52bf3f4c116cdf271.tar.gz dexon-0x-contracts-fb3605026ef63ef6897010a52bf3f4c116cdf271.tar.bz2 dexon-0x-contracts-fb3605026ef63ef6897010a52bf3f4c116cdf271.tar.lz dexon-0x-contracts-fb3605026ef63ef6897010a52bf3f4c116cdf271.tar.xz dexon-0x-contracts-fb3605026ef63ef6897010a52bf3f4c116cdf271.tar.zst dexon-0x-contracts-fb3605026ef63ef6897010a52bf3f4c116cdf271.zip |
Merge branch 'development' into feature/instant/tell-amount-available
Diffstat (limited to 'packages/instant/src/components/ui/dropdown.tsx')
-rw-r--r-- | packages/instant/src/components/ui/dropdown.tsx | 43 |
1 files changed, 25 insertions, 18 deletions
diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx index 02e87d639..8788d3d59 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'; @@ -26,7 +27,7 @@ export interface DropdownState { isOpen: boolean; } -export class Dropdown extends React.Component<DropdownProps, DropdownState> { +export class Dropdown extends React.PureComponent<DropdownProps, DropdownState> { public static defaultProps = { items: [], }; @@ -121,20 +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'; |