diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index b9e9941eba..b07fdeb771 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/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 { {this._renderTitleText()} - {this._renderTitleLabel()} {this._renderMainContent()} @@ -70,7 +69,7 @@ export class PaymentMethod extends React.PureComponent { const { account, network } = this.props; const isMobile = envUtil.isMobileOperatingSystem(); const logo = isMobile ? : ; - 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 { return null; case AccountState.Locked: return ( - + - + + } {...colors} > - Click to Connect Metamask + Metamask + + + } + display="flex" + {...colors} > - Connect with Fortmatic + Use phone number ); @@ -112,11 +118,16 @@ export class PaymentMethod extends React.PureComponent { + + + } + display="flex" + {...colors} > - Connect with Fortmatic + Use phone number ); diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 59b733f3e1..b9040cfccb 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -75,6 +75,7 @@ export const Container = styled.div` ${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('display', props.display)} diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx index e251acf5e2..c669db60f1 100644 --- a/packages/instant/src/components/ui/icon.tsx +++ b/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 = props => { viewBox={iconInfo.viewBox} fill="none" xmlns="http://www.w3.org/2000/svg" + stroke={props.stroke} > = ({ @@ -21,11 +24,13 @@ export const WalletPrompt: React.StatelessComponent = ({ secondaryColor, primaryColor, marginTop, + display, + alignText, }) => ( = ({ cursor={onClick ? 'pointer' : undefined} boxShadowOnHover={!!onClick} marginTop={marginTop} + display={display} > - + {image} - + {children} + + + );