diff options
| -rw-r--r-- | packages/instant/src/components/erc20_token_selector.tsx | 2 | ||||
| -rw-r--r-- | packages/instant/src/components/payment_method.tsx | 30 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/circle.tsx | 19 | ||||
| -rw-r--r-- | packages/instant/src/style/theme.ts | 4 |
4 files changed, 37 insertions, 18 deletions
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx index c10b1492e..d3043438e 100644 --- a/packages/instant/src/components/erc20_token_selector.tsx +++ b/packages/instant/src/components/erc20_token_selector.tsx @@ -85,7 +85,7 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> { <Container marginLeft="5px"> <Flex justify="flex-start"> <Container marginRight="10px"> - <Circle diameter={30} fillColor={token.metaData.primaryColor}> + <Circle diameter={30} rawColor={token.metaData.primaryColor}> <Flex height="100%"> <Text fontColor={ColorOption.white} fontSize="8px"> {displaySymbol} diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 4d3daff62..70ad1f96e 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -4,7 +4,9 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; import { PaymentMethodDropdown } from './payment_method_dropdown'; +import { Circle } from './ui/circle'; import { Container } from './ui/container'; +import { Flex } from './ui/flex'; import { Text } from './ui/text'; export interface PaymentMethodProps {} @@ -14,15 +16,25 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> { return ( <Container padding="20px" width="100%"> <Container marginBottom="10px"> - <Text - letterSpacing="1px" - fontColor={ColorOption.primaryColor} - fontWeight={600} - textTransform="uppercase" - fontSize="14px" - > - Payment Method - </Text> + <Flex justify="space-between"> + <Text + letterSpacing="1px" + fontColor={ColorOption.primaryColor} + fontWeight={600} + textTransform="uppercase" + fontSize="14px" + > + Payment Method + </Text> + <Flex> + <Circle color={ColorOption.green} diameter={8} /> + <Container marginLeft="3px"> + <Text fontColor={ColorOption.darkGrey} fontSize="12px"> + MetaMask + </Text> + </Container> + </Flex> + </Flex> </Container> <PaymentMethodDropdown /> </Container> diff --git a/packages/instant/src/components/ui/circle.tsx b/packages/instant/src/components/ui/circle.tsx index eec2777d2..cb121992f 100644 --- a/packages/instant/src/components/ui/circle.tsx +++ b/packages/instant/src/components/ui/circle.tsx @@ -1,22 +1,25 @@ -import { styled } from '../../style/theme'; +import { ColorOption, styled, Theme, withTheme } from '../../style/theme'; export interface CircleProps { diameter: number; - fillColor?: string; + rawColor?: string; + color?: ColorOption; + theme: Theme; } -export const Circle = +export const Circle = withTheme( styled.div < - CircleProps > - ` + CircleProps > + ` width: ${props => props.diameter}px; height: ${props => props.diameter}px; - background-color: ${props => props.fillColor}; + background-color: ${props => (props.rawColor ? props.rawColor : props.theme[props.color || ColorOption.white])}; border-radius: 50%; -`; +`, +); Circle.displayName = 'Circle'; Circle.defaultProps = { - fillColor: 'white', + color: ColorOption.white, }; diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts index 7917164a1..0bd8ce4e0 100644 --- a/packages/instant/src/style/theme.ts +++ b/packages/instant/src/style/theme.ts @@ -15,6 +15,8 @@ export enum ColorOption { white = 'white', lightOrange = 'lightOrange', darkOrange = 'darkOrange', + green = 'green', + red = 'red', } export const theme: Theme = { @@ -28,6 +30,8 @@ export const theme: Theme = { white: 'white', lightOrange: '#F9F2ED', darkOrange: '#F2994C', + green: '#3CB34F', + red: '#D00000', }; export const transparentWhite = 'rgba(255,255,255,0.3)'; |