Adds phone svg
Updates design of payment methods
This commit is contained in:
apane
David Sun
parent
5130259552
commit
1cf8663f20
@ -1,5 +1,6 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import PhoneIconSvg from '../assets/icons/phone.svg';
|
||||
import { ColorOption } from '../style/theme';
|
||||
import { Account, AccountState, Network, ProviderType } from '../types';
|
||||
import { envUtil } from '../util/env';
|
||||
@ -11,7 +12,6 @@ import { SectionHeader } from './section_header';
|
||||
import { Circle } from './ui/circle';
|
||||
import { Container } from './ui/container';
|
||||
import { Flex } from './ui/flex';
|
||||
import { Icon } from './ui/icon';
|
||||
import { Text } from './ui/text';
|
||||
import { WalletPrompt } from './wallet_prompt';
|
||||
|
||||
@ -30,7 +30,6 @@ export class PaymentMethod extends React.PureComponent<PaymentMethodProps> {
|
||||
<Container marginBottom="12px">
|
||||
<Flex justify="space-between">
|
||||
<SectionHeader>{this._renderTitleText()}</SectionHeader>
|
||||
{this._renderTitleLabel()}
|
||||
</Flex>
|
||||
</Container>
|
||||
<Container>{this._renderMainContent()}</Container>
|
||||
@ -70,7 +69,7 @@ export class PaymentMethod extends React.PureComponent<PaymentMethodProps> {
|
||||
const { account, network } = this.props;
|
||||
const isMobile = envUtil.isMobileOperatingSystem();
|
||||
const logo = isMobile ? <CoinbaseWalletLogo width={22} /> : <MetaMaskLogo width={19} height={18} />;
|
||||
const primaryColor = isMobile ? ColorOption.darkBlue : ColorOption.darkOrange;
|
||||
const primaryColor = isMobile ? ColorOption.darkBlue : ColorOption.grey;
|
||||
const secondaryColor = isMobile ? ColorOption.lightBlue : ColorOption.lightOrange;
|
||||
const colors = { primaryColor, secondaryColor };
|
||||
const onUnlockGenericWallet = () => {
|
||||
@ -82,25 +81,32 @@ export class PaymentMethod extends React.PureComponent<PaymentMethodProps> {
|
||||
return null;
|
||||
case AccountState.Locked:
|
||||
return (
|
||||
<Flex direction="column" justify="space-between" height="100%">
|
||||
<Flex direction="column">
|
||||
<WalletPrompt
|
||||
onClick={onUnlockGenericWallet}
|
||||
display="flex"
|
||||
alignText={'flex-start'}
|
||||
image={
|
||||
<Container position="relative" top="2px">
|
||||
<Icon width={13} icon="lock" color={ColorOption.black} />
|
||||
<Container position="relative" display="flex">
|
||||
<MetaMaskLogo width={16} height={19} />
|
||||
</Container>
|
||||
}
|
||||
{...colors}
|
||||
>
|
||||
Click to Connect Metamask
|
||||
Metamask
|
||||
</WalletPrompt>
|
||||
<WalletPrompt
|
||||
onClick={onUnlockFormatic}
|
||||
primaryColor={ColorOption.fortmaticPrimary}
|
||||
secondaryColor={ColorOption.fortmaticSecondary}
|
||||
marginTop="5px"
|
||||
image={
|
||||
<Container position="relative" display="flex">
|
||||
<PhoneIconSvg />
|
||||
</Container>
|
||||
}
|
||||
display="flex"
|
||||
{...colors}
|
||||
>
|
||||
Connect with Fortmatic
|
||||
Use phone number
|
||||
</WalletPrompt>
|
||||
</Flex>
|
||||
);
|
||||
@ -112,11 +118,16 @@ export class PaymentMethod extends React.PureComponent<PaymentMethodProps> {
|
||||
</WalletPrompt>
|
||||
<WalletPrompt
|
||||
onClick={onUnlockFormatic}
|
||||
primaryColor={ColorOption.fortmaticPrimary}
|
||||
secondaryColor={ColorOption.fortmaticSecondary}
|
||||
marginTop="5px"
|
||||
image={
|
||||
<Container position="relative" display="flex">
|
||||
<PhoneIconSvg />
|
||||
</Container>
|
||||
}
|
||||
display="flex"
|
||||
{...colors}
|
||||
>
|
||||
Connect with Fortmatic
|
||||
Use phone number
|
||||
</WalletPrompt>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
@ -75,6 +75,7 @@ export const Container = styled.div<ContainerProps>`
|
||||
${props => cssRuleIfExists(props, 'opacity')}
|
||||
${props => cssRuleIfExists(props, 'cursor')}
|
||||
${props => cssRuleIfExists(props, 'overflow')}
|
||||
${props => cssRuleIfExists(props, 'alignSelf')}
|
||||
${props => (props.overflow === 'scroll' ? `-webkit-overflow-scrolling: touch` : '')};
|
||||
${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
|
||||
${props => props.display && stylesForMedia<string>('display', props.display)}
|
||||
|
||||
@ -19,6 +19,7 @@ interface IconInfoMapping {
|
||||
failed: IconInfo;
|
||||
success: IconInfo;
|
||||
chevron: IconInfo;
|
||||
chevronRight: IconInfo;
|
||||
search: IconInfo;
|
||||
lock: IconInfo;
|
||||
}
|
||||
@ -52,6 +53,14 @@ const ICONS: IconInfoMapping = {
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
},
|
||||
chevronRight: {
|
||||
viewBox: '0 0 7 13',
|
||||
path: 'M1 1.5L6 6.5L1 11.5',
|
||||
strokeOpacity: 0.5,
|
||||
strokeWidth: 1.5,
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
},
|
||||
search: {
|
||||
viewBox: '0 0 14 14',
|
||||
fillRule: 'evenodd',
|
||||
@ -89,6 +98,7 @@ const PlainIcon: React.StatelessComponent<IconProps> = props => {
|
||||
viewBox={iconInfo.viewBox}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke={props.stroke}
|
||||
>
|
||||
<path
|
||||
d={iconInfo.path}
|
||||
|
||||
@ -4,6 +4,7 @@ import { ColorOption } from '../style/theme';
|
||||
|
||||
import { Container } from './ui/container';
|
||||
import { Flex } from './ui/flex';
|
||||
import {Icon} from './ui/icon';
|
||||
import { Text } from './ui/text';
|
||||
|
||||
export interface WalletPromptProps {
|
||||
@ -12,6 +13,8 @@ export interface WalletPromptProps {
|
||||
primaryColor: ColorOption;
|
||||
secondaryColor: ColorOption;
|
||||
marginTop?: string;
|
||||
display?: string;
|
||||
alignText?: string;
|
||||
}
|
||||
|
||||
export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({
|
||||
@ -21,11 +24,13 @@ export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({
|
||||
secondaryColor,
|
||||
primaryColor,
|
||||
marginTop,
|
||||
display,
|
||||
alignText,
|
||||
}) => (
|
||||
<Container
|
||||
padding="10px"
|
||||
border={`1px solid`}
|
||||
borderColor={primaryColor}
|
||||
borderColor={ColorOption.feintGrey}
|
||||
backgroundColor={secondaryColor}
|
||||
width="100%"
|
||||
borderRadius="4px"
|
||||
@ -33,14 +38,18 @@ export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({
|
||||
cursor={onClick ? 'pointer' : undefined}
|
||||
boxShadowOnHover={!!onClick}
|
||||
marginTop={marginTop}
|
||||
display={display}
|
||||
>
|
||||
<Flex>
|
||||
<Flex width="100%">
|
||||
{image}
|
||||
<Container marginLeft="10px">
|
||||
<Container marginLeft="10px" display={display} width="100%" alignSelf={alignText}>
|
||||
<Text fontSize="16px" fontColor={primaryColor} fontWeight="500">
|
||||
{children}
|
||||
</Text>
|
||||
</Container>
|
||||
<Container position="relative" top="2px" display={display}>
|
||||
<Icon width={13} icon="chevronRight" stroke="#AAAAAA" />
|
||||
</Container>
|
||||
</Flex>
|
||||
</Container>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user