From d35b62b33652a8c4795148db5b05a80bff502edf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= <nainpuissant@gmail.com>
Date: Tue, 17 Apr 2018 14:04:40 +0200
Subject: [PATCH] Update CurrentAddress design

---
 src/components/CurrentAddress/index.js        | 94 +++++++++++--------
 src/components/CurrentAddress/stories.js      |  3 +-
 src/components/base/Modal/index.js            | 11 +--
 src/components/layout/Print.js                |  7 +-
 .../modals/Receive/04-step-receive-funds.js   |  6 +-
 static/i18n/en/currentAddress.yml             |  1 +
 6 files changed, 66 insertions(+), 56 deletions(-)

diff --git a/src/components/CurrentAddress/index.js b/src/components/CurrentAddress/index.js
index 977029d5..1b95a372 100644
--- a/src/components/CurrentAddress/index.js
+++ b/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'),
-  py: 5,
+  bg: p =>
+    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.26)}` : 'none')};
-  width: 100%;
+  border: ${p => (p.notValid ? `1px dashed ${rgba(p.theme.colors.alertRed, 0.5)}` : 'none')};
 `
 
 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}>
-    {icon}
-    <Box fontSize={3} ff="Museo Sans|Bold" mt={1}>
-      {label}
-    </Box>
-  </FooterButtonWrapper>
+  <Box grow alignItems="center" justifyContent="center">
+    <FooterButtonWrapper onClick={onClick}>
+      {icon}
+      <Box fontSize={3} ff="Museo Sans|Bold" mt={1}>
+        {label}
+      </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 && (
-            <Box mb={4}>
-              <QRCode size={150} data={`bitcoin:${address}${amount ? `?amount=${amount}` : ''}`} />
-            </Box>
-          )}
-          <Label>
-            <Box>{t('currentAddress:label')}</Box>
-            <IconInfoCircle size={12} />
-          </Label>
-          <Address withQRCode={withQRCode} notValid={notValid}>
-            {address}
-          </Address>
-        </WrapperAddress>
+        {withQRCode && (
+          <Box mb={4}>
+            <QRCode size={120} data={`bitcoin:${address}${amount ? `?amount=${amount}` : ''}`} />
+          </Box>
+        )}
+        <Label>
+          <Box>
+            {accountName ? (
+              <Trans i18nKey="currentAddress:labelFrom" parent="div">
+                {'Address from '}
+                <strong>{accountName}</strong>
+              </Trans>
+            ) : (
+              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} />}
diff --git a/src/components/CurrentAddress/stories.js b/src/components/CurrentAddress/stories.js
index 188b4c00..bc665a32 100644
--- a/src/components/CurrentAddress/stories.js
+++ b/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)}
diff --git a/src/components/base/Modal/index.js b/src/components/base/Modal/index.js
index ee76bae0..9e36938f 100644
--- a/src/components/base/Modal/index.js
+++ b/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
-              alignItems="center"
-              full
-              justifyContent="flex-start"
-              style={{ height: '100%' }}
-            >
+            <GrowScroll alignItems="center" full justifyContent="center" style={{ height: '100%' }}>
               <Wrapper
                 op={m.opacity}
                 scale={m.scale}
diff --git a/src/components/layout/Print.js b/src/components/layout/Print.js
index bc760816..6051d353 100644
--- a/src/components/layout/Print.js
+++ b/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)}
-        amount={amount}
+        accountName={accountName}
         address={address}
+        amount={amount}
+        innerRef={n => (this._node = n)}
         withQRCode
       />
     )
diff --git a/src/components/modals/Receive/04-step-receive-funds.js b/src/components/modals/Receive/04-step-receive-funds.js
index 9a51f66f..efe220f7 100644
--- a/src/components/modals/Receive/04-step-receive-funds.js
+++ b/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}
diff --git a/static/i18n/en/currentAddress.yml b/static/i18n/en/currentAddress.yml
index 01c83432..6cefd17e 100644
--- a/static/i18n/en/currentAddress.yml
+++ b/static/i18n/en/currentAddress.yml
@@ -1 +1,2 @@
 label: Current address
+labelFrom: Address from <1><0>{{accountName}}</0></1>