diff options
| -rw-r--r-- | packages/instant/src/components/erc20_token_selector.tsx | 37 | ||||
| -rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 2 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/circle.tsx | 24 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/container.tsx | 9 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/index.ts | 1 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/text.tsx | 5 |
6 files changed, 69 insertions, 9 deletions
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx index 12051b382..a8bef3d61 100644 --- a/packages/instant/src/components/erc20_token_selector.tsx +++ b/packages/instant/src/components/erc20_token_selector.tsx @@ -1,9 +1,11 @@ import * as _ from 'lodash'; import * as React from 'react'; +import { ColorOption } from '../style/theme'; import { ERC20Asset } from '../types'; +import { assetUtils } from '../util/asset'; -import { Button, Container } from './ui'; +import { Circle, Container, Flex, Text } from './ui'; export interface ERC20TokenSelectorProps { tokens: ERC20Asset[]; @@ -12,7 +14,9 @@ export interface ERC20TokenSelectorProps { export const ERC20TokenSelector: React.StatelessComponent<ERC20TokenSelectorProps> = ({ tokens, onTokenSelect }) => ( <Container> - {_.map(tokens, token => <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />)} + <Container overflow="scroll" height="325px"> + {_.map(tokens, token => <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />)} + </Container> </Container> ); @@ -24,9 +28,34 @@ interface TokenSelectorRowProps { class TokenSelectorRow extends React.Component<TokenSelectorRowProps> { public render(): React.ReactNode { const { token } = this.props; + const displaySymbol = assetUtils.bestNameForAsset(token); return ( - <Container> - <Button onClick={this._handleClick}>Select {token.metaData.symbol}</Button> + <Container + padding="12px 0px" + borderBottom="1px solid" + borderColor={ColorOption.feintGrey} + backgroundColor={ColorOption.white} + width="100%" + onClick={this._handleClick} + darkenOnHover={true} + cursor="pointer" + > + <Container marginLeft="10px"> + <Flex justify="flex-start"> + <Container marginRight="10px"> + <Circle diameter={30} fillColor={token.metaData.primaryColor}> + <Flex height="100%"> + <Text fontColor={ColorOption.white} fontSize="8px"> + {displaySymbol} + </Text> + </Flex> + </Circle> + </Container> + <Text fontWeight={700} fontColor={ColorOption.black}> + {displaySymbol} + </Text> + </Flex> + </Container> </Container> ); } diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 19c08db70..80d7a3ee2 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -22,7 +22,7 @@ export interface InstantHeadingProps { const PLACEHOLDER_COLOR = ColorOption.white; const ICON_WIDTH = 34; const ICON_HEIGHT = 34; -const ICON_COLOR = 'white'; +const ICON_COLOR = ColorOption.white; export class InstantHeading extends React.Component<InstantHeadingProps, {}> { public render(): React.ReactNode { diff --git a/packages/instant/src/components/ui/circle.tsx b/packages/instant/src/components/ui/circle.tsx new file mode 100644 index 000000000..bd967d326 --- /dev/null +++ b/packages/instant/src/components/ui/circle.tsx @@ -0,0 +1,24 @@ + +import { styled } from '../../style/theme'; + +export interface CircleProps { + className?: string; + diameter: number; + fillColor?: string; +} + +export const Circle = + styled.div < + CircleProps > + ` + width: ${props => props.diameter}px; + height: ${props => props.diameter}px; + background-color: ${props => props.fillColor}; + border-radius: 50%; +`; + +Circle.displayName = 'Circle'; + +Circle.defaultProps = { + fillColor: 'white', +}; diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 7b8642761..e228a01b6 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -1,3 +1,5 @@ +import { darken } from 'polished'; + import { ColorOption, styled } from '../../style/theme'; import { cssRuleIfExists } from '../../style/util'; @@ -30,6 +32,7 @@ export interface ContainerProps { opacity?: number; cursor?: string; overflow?: string; + darkenOnHover?: boolean; } export const Container = @@ -64,6 +67,12 @@ export const Container = ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; + &:hover { + ${props => + props.darkenOnHover + ? `background-color: ${darken(0.05, props.theme[props.backgroundColor || 'white'])}` + : ''}; + } `; Container.defaultProps = { diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts index 0efabdb85..87f5c11a1 100644 --- a/packages/instant/src/components/ui/index.ts +++ b/packages/instant/src/components/ui/index.ts @@ -1,4 +1,5 @@ export { Text, TextProps, Title } from './text'; +export { Circle, CircleProps } from './circle'; export { Button, ButtonProps } from './button'; export { Flex, FlexProps } from './flex'; export { Container, ContainerProps } from './container'; diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx index fd72f6cc8..cba6e7b20 100644 --- a/packages/instant/src/components/ui/text.tsx +++ b/packages/instant/src/components/ui/text.tsx @@ -18,7 +18,6 @@ export interface TextProps { fontWeight?: number | string; textDecorationLine?: string; onClick?: (event: React.MouseEvent<HTMLElement>) => void; - hoverColor?: string; noWrap?: boolean; display?: string; } @@ -46,9 +45,7 @@ export const Text = ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')}; &:hover { ${props => - props.onClick - ? `color: ${props.hoverColor || darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}` - : ''}; + props.onClick ? `color: ${darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}` : ''}; } `; |