aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/instant/src/components/erc20_token_selector.tsx37
-rw-r--r--packages/instant/src/components/instant_heading.tsx2
-rw-r--r--packages/instant/src/components/ui/circle.tsx24
-rw-r--r--packages/instant/src/components/ui/container.tsx9
-rw-r--r--packages/instant/src/components/ui/index.ts1
-rw-r--r--packages/instant/src/components/ui/text.tsx5
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'])}` : ''};
}
`;