crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds phone svg

Browse Source 
Updates design of payment methods
This commit is contained in:
apane 2019-10-08 16:38:03 -03:00 committed by David Sun
parent 5130259552
commit 1cf8663f20
4 changed files with 47 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/instant/src/components/payment_method.tsx
View File

@ -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>
);

1
packages/instant/src/components/ui/container.tsx
View File

@ -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)}

10
packages/instant/src/components/ui/icon.tsx
View File

@ -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}

15
packages/instant/src/components/wallet_prompt.tsx
View File

@ -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>
);