Adds phone svg

Updates design of payment methods

packages/instant/src/components/payment_method.tsx

@@ -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">
+                                <Container position="relative" display="flex">
-                                    <Icon width={13} icon="lock" color={ColorOption.black} />
+                                    <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>
                 );

packages/instant/src/components/ui/container.tsx

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

packages/instant/src/components/ui/icon.tsx

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

packages/instant/src/components/wallet_prompt.tsx

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