From 295430036714df52066284103e973cd5f9a0ab4c Mon Sep 17 00:00:00 2001
From: Szymon Lesisz <sz.lesisz@gmail.com>
Date: Wed, 3 Oct 2018 18:40:24 +0200
Subject: [PATCH] fix for AccountReceive component

---
 .../Wallet/views/AccountReceive/index.js      | 50 ++++++++++++++-----
 1 file changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/views/Wallet/views/AccountReceive/index.js b/src/views/Wallet/views/AccountReceive/index.js
index 6c52f7f0..21a8f108 100644
--- a/src/views/Wallet/views/AccountReceive/index.js
+++ b/src/views/Wallet/views/AccountReceive/index.js
@@ -71,23 +71,40 @@ const ValueWrapper = styled.div`
     `};
 
     ${props => props.isVerifying && css`
-        background: ${colors.WHITE};
         z-index: 10001; /* bigger than modal container */
-        border-color: ${colors.GREEN_PRIMARY};
+        border-color: ${colors.WHITE};
         border-width: 2px;
         transform: translate(-1px, -1px);
+        background: ${colors.DIVIDER};
     `};
 `;
 
-const AddressInfoText = styled.div`
-    display: block;
-    position: relative;
-    background: ${colors.WHITE};
+const ArrowUp = styled.div`
+    position: absolute;
+    top: 30px;
+    left: 70px;
+    width: 0;
+    height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-bottom: 9px solid black;
     z-index: 10001;
-    width: 100%;
-    padding: 6px 12px;
-    transform: translate(-1px, -1px);
+`;
+
+const AddressInfoText = styled.div`
+    display: flex;
+    align-items: center;
+    height: 37px;
     margin: 0px 2px;
+    padding: 0 14px 0 5px;
+    position: absolute;
+    top: 39px;
+    background: black;
+    color: ${colors.WHITE};
+    border-radius: 5px;
+    line-height: 37px;
+    z-index: 10001;
+    transform: translate(-1px, -1px);
 `;
 
 const ShowAddressButton = styled(Button)`
@@ -143,7 +160,7 @@ const AccountReceive = (props: Props) => {
 
     return (
         <Content>
-            <Wrapper>
+            <React.Fragment>
                 <H2>Receive Ethereum or tokens</H2>
                 <AddressWrapper
                     isShowingQrCode={addressVerified || addressUnverified}
@@ -188,7 +205,16 @@ const AccountReceive = (props: Props) => {
                         {address}
                     </ValueWrapper>
                     {isAddressVerifying && (
-                        <AddressInfoText>{account.network} account #{account.index + 1}</AddressInfoText>
+                        <React.Fragment>
+                            <ArrowUp />
+                            <AddressInfoText>
+                                <Icon
+                                    icon={ICONS.T1}
+                                    color={colors.WHITE}
+                                />
+                                Check address on your Trezor
+                            </AddressInfoText>
+                        </React.Fragment>
                     )}
                     {(addressVerified || addressUnverified) && (
                         <React.Fragment>
@@ -215,7 +241,7 @@ const AccountReceive = (props: Props) => {
                         </ShowAddressButton>
                     )}
                 </AddressWrapper>
-            </Wrapper>
+            </React.Fragment>
         </Content>
     );
 };