Update CurrentAddress design

src/components/CurrentAddress/index.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { PureComponent } from 'react'
-import { translate } from 'react-i18next'
+import { Trans, translate } from 'react-i18next'
 import styled from 'styled-components'
 
 import noop from 'lodash/noop'
@@ -25,20 +25,12 @@ import IconShield from 'icons/Shield'
 const Container = styled(Box).attrs({
   borderRadius: 1,
   alignItems: 'center',
-  bg: p => (p.withQRCode ? 'lightGrey' : 'transparent'),
+  bg: p =>
-  py: 5,
+    p.withQRCode ? (p.notValid ? rgba(p.theme.colors.alertRed, 0.02) : 'lightGrey') : 'transparent',
+  py: 4,
   px: 7,
-})``
-
-const WrapperAddress = styled(Box).attrs({
-  alignItems: 'center',
-  borderRadius: 1,
-  py: p => (p.notValid ? 4 : 0),
-  px: 4,
 })`
-  background: ${p => (p.notValid ? rgba(p.theme.colors.alertRed, 0.05) : 'transparent')};
+  border: ${p => (p.notValid ? `1px dashed ${rgba(p.theme.colors.alertRed, 0.5)}` : 'none')};
-  border: ${p => (p.notValid ? `1px dashed ${rgba(p.theme.colors.alertRed, 0.26)}` : 'none')};
-  width: 100%;
 `
 
 const Address = styled(Box).attrs({
@@ -63,11 +55,17 @@ const Label = styled(Box).attrs({
   fontSize: 4,
   flow: 1,
   horizontal: true,
-})``
+})`
+  strong {
+    color: ${p => p.theme.colors.dark};
+    font-weight: 600;
+    border-bottom: 1px dashed ${p => p.theme.colors.dark};
+  }
+`
 
 const Footer = styled(Box).attrs({
   horizontal: true,
-  mt: 5,
+  mt: 4,
 })`
   text-transform: uppercase;
   width: 100%;
@@ -77,9 +75,20 @@ const FooterButtonWrapper = styled(Box).attrs({
   color: 'grey',
   alignItems: 'center',
   justifyContent: 'center',
-  grow: true,
+  borderRadius: 1,
 })`
   cursor: pointer;
+  height: 55px;
+  width: 55px;
+
+  &:hover {
+    background-color: rgba(100, 144, 241, 0.1);
+    color: ${p => p.theme.colors.dark};
+
+    svg {
+      color: ${p => p.theme.colors.wallet};
+    }
+  }
 `
 
 const FooterButton = ({
@@ -91,15 +100,18 @@ const FooterButton = ({
   label: string,
   onClick: Function,
 }) => (
-  <FooterButtonWrapper onClick={onClick}>
+  <Box grow alignItems="center" justifyContent="center">
-    {icon}
+    <FooterButtonWrapper onClick={onClick}>
-    <Box fontSize={3} ff="Museo Sans|Bold" mt={1}>
+      {icon}
-      {label}
+      <Box fontSize={3} ff="Museo Sans|Bold" mt={1}>
-    </Box>
+        {label}
-  </FooterButtonWrapper>
+      </Box>
+    </FooterButtonWrapper>
+  </Box>
 )
 
 type Props = {
+  accountName?: string,
   address: string,
   addressVerified?: boolean,
   amount?: string,
@@ -130,6 +142,7 @@ class CurrentAddress extends PureComponent<Props> {
 
   render() {
     const {
+      accountName,
       address,
       addressVerified,
       amount,
@@ -149,20 +162,27 @@ class CurrentAddress extends PureComponent<Props> {
 
     return (
       <Container withQRCode={withQRCode} notValid={notValid} {...props}>
-        <WrapperAddress notValid={notValid} grow>
+        {withQRCode && (
-          {withQRCode && (
+          <Box mb={4}>
-            <Box mb={4}>
+            <QRCode size={120} data={`bitcoin:${address}${amount ? `?amount=${amount}` : ''}`} />
-              <QRCode size={150} data={`bitcoin:${address}${amount ? `?amount=${amount}` : ''}`} />
+          </Box>
-            </Box>
+        )}
-          )}
+        <Label>
-          <Label>
+          <Box>
-            <Box>{t('currentAddress:label')}</Box>
+            {accountName ? (
-            <IconInfoCircle size={12} />
+              <Trans i18nKey="currentAddress:labelFrom" parent="div">
-          </Label>
+                {'Address from '}
-          <Address withQRCode={withQRCode} notValid={notValid}>
+                <strong>{accountName}</strong>
-            {address}
+              </Trans>
-          </Address>
+            ) : (
-        </WrapperAddress>
+              t('currentAddress:label')
+            )}
+          </Box>
+          <IconInfoCircle size={12} />
+        </Label>
+        <Address withQRCode={withQRCode} notValid={notValid}>
+          {address}
+        </Address>
         {withBadge && (
           <Box horizontal flow={2} mt={2} alignItems="center">
             <Box color={notValid ? 'alertRed' : 'wallet'}>
@@ -186,7 +206,7 @@ class CurrentAddress extends PureComponent<Props> {
               )}
             />
             <Print
-              data={{ address, amount }}
+              data={{ address, amount, accountName }}
               render={(print, isLoading) => (
                 <FooterButton
                   icon={<IconPrint size={16} />}

src/components/CurrentAddress/stories.js

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { boolean } from '@storybook/addon-knobs'
+import { boolean, text } from '@storybook/addon-knobs'
 
 import CurrentAddress from 'components/CurrentAddress'
 
@@ -12,6 +12,7 @@ const stories = storiesOf('Components', module)
 
 stories.add('CurrentAddress', () => (
   <CurrentAddress
+    accountName={text('accountName', '')}
     address={accounts[0].address}
     addressVerified={boolean('addressVerified', true)}
     withBadge={boolean('withBadge', false)}

src/components/base/Modal/index.js

@@ -55,8 +55,6 @@ const mapDispatchToProps: Function = (dispatch, { name, onClose = noop }): * =>
 
 const Container = styled(Box).attrs({
   color: 'grey',
-  alignItems: 'center',
-  justifyContent: 'flex-start',
   sticky: true,
   style: p => ({
     pointerEvents: p.isVisible ? 'auto' : 'none',
@@ -79,8 +77,6 @@ const Backdrop = styled(Box).attrs({
 const Wrapper = styled(Tabbable).attrs({
   bg: 'transparent',
   flow: 4,
-  mt: 100,
-  mb: 100,
   style: p => ({
     opacity: p.op,
     transform: `scale3d(${p.scale}, ${p.scale}, ${p.scale})`,
@@ -175,12 +171,7 @@ export class Modal extends Component<Props> {
         {(m, isVisible, isAnimated) => (
           <Container isVisible={isVisible} onClick={preventBackdropClick ? undefined : onClose}>
             <Backdrop op={m.opacity} />
-            <GrowScroll
+            <GrowScroll alignItems="center" full justifyContent="center" style={{ height: '100%' }}>
-              alignItems="center"
-              full
-              justifyContent="flex-start"
-              style={{ height: '100%' }}
-            >
               <Wrapper
                 op={m.opacity}
                 scale={m.scale}

src/components/layout/Print.js

@@ -31,12 +31,13 @@ class Print extends PureComponent<any> {
     if (!data) {
       return null
     }
-    const { address, amount } = data
+    const { address, amount, accountName } = data
     return (
       <CurrentAddress
-        innerRef={n => (this._node = n)}
+        accountName={accountName}
-        amount={amount}
         address={address}
+        amount={amount}
+        innerRef={n => (this._node = n)}
         withQRCode
       />
     )

src/components/modals/Receive/04-step-receive-funds.js

@@ -8,7 +8,6 @@ import type { T } from 'types/common'
 import Box from 'components/base/Box'
 import CurrentAddress from 'components/CurrentAddress'
 import Label from 'components/base/Label'
-import SelectAccount from 'components/SelectAccount'
 import RequestAmount from 'components/RequestAmount'
 
 type Props = {
@@ -22,10 +21,6 @@ type Props = {
 
 export default (props: Props) => (
   <Box flow={5}>
-    <Box flow={1}>
-      <Label>{props.t('receive:steps.chooseAccount.label')}</Label>
-      <SelectAccount disabled value={props.account} />
-    </Box>
     <Box flow={1}>
       <Label>{props.t('receive:steps.receiveFunds.label')}</Label>
       <RequestAmount
@@ -36,6 +31,7 @@ export default (props: Props) => (
       />
     </Box>
     <CurrentAddress
+      accountName={props.account && props.account.name}
       address={props.account && props.account.address}
       addressVerified={props.addressVerified}
       amount={props.amount}

static/i18n/en/currentAddress.yml

@@ -1 +1,2 @@
 label: Current address
+labelFrom: Address from <1><0>{{accountName}}</0></1>