From c7bed7dfc9fcd8f75fdfd8e6e19870ccc40cf80f Mon Sep 17 00:00:00 2001
From: bechi <bechilandia@gmail.com>
Date: Wed, 18 Nov 2015 15:19:47 -0300
Subject: [PATCH] fix style on history sync

---
 public/views/walletHome.html | 42 ++++++++++++++++++++----------------
 src/css/main.css             |  9 ++++++++
 2 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/public/views/walletHome.html b/public/views/walletHome.html
index 4acb4bfd1..3a078ccbf 100644
--- a/public/views/walletHome.html
+++ b/public/views/walletHome.html
@@ -316,7 +316,7 @@
                 <div class="addressbook-input" ng-show="!sendForm.address.$invalid && _address">
                   {{index.addressbook[_address] || _address}}
                 </div>
-                <a class="postfix size-12 m0 text-gray" 
+                <a class="postfix size-12 m0 text-gray"
                 ng-click="openDestinationAddressModal(index.otherWallets, _address)">
                   <i class="icon-wallet size-18"></i>
                 </a>
@@ -450,22 +450,28 @@
         </div>
       </div>
       <div class="row m20t text-center" ng-show="index.updatingTxHistory[index.walletId]">
-        <div class="columns large-12 medium-12 small-12">
-          <div class="spinner">
-            <div class="rect1"></div>
-            <div class="rect2"></div>
-            <div class="rect3"></div>
-            <div class="rect4"></div>
-            <div class="rect5"></div>
+        <div ng-show="index.txProgress > 6">
+          <div class="circle-icon">
+            <img src="/img/icon-sync.svg" alt="sync" width="70">
+          </div>
+          <div translate class="size-12 text-gray m20t small-10 small-centered columns">
+            Initial transaction history synchronization can take some minutes for wallets with many transactions.
+            <b> Please stand by.</b>
+          </div>
+          <div class="small-8 small-centered columns line-b p10 m20b"></div>
+          <div class="columns large-12 medium-12 small-12 m10b">
+            <div class="spinner">
+              <div class="rect1"></div>
+              <div class="rect2"></div>
+              <div class="rect3"></div>
+              <div class="rect4"></div>
+              <div class="rect5"></div>
+            </div>
+          </div>
+          <div class="size-14 text-gray m20t">
+            <b>{{index.txProgress}}</b> <br>
+            <span translate>Transactions Downloaded</span>
           </div>
-        </div>
-        <div ng-show="index.txProgress > 6" translate class="size-12 text-gray m20t">
-          Initial transaction history synchronization can take some minutes for wallets with many transactions.</br>
-          Please stand by.
-        </div>
-        <div ng-show="index.txProgress > 6" class="size-14 text-gray m20t">
-          <b>{{index.txProgress}}</b> 
-          <span translate>Transactions<br> Downloaded</span>
         </div>
       </div>
 
@@ -508,7 +514,7 @@
           <div class="size-14 text-gray columns m5t" ng-if="btx.message || btx.addressTo">
             <div ng-show="btx.message">{{btx.message}}</div>
             <div ng-show="!btx.message">
-              {{index.addressbook[btx.addressTo] || btx.addressTo}}
+              <span translate>To</span>: {{index.addressbook[btx.addressTo] || btx.addressTo}}
             </div>
           </div>
         </div>
@@ -524,7 +530,7 @@
             </div>
           </div>
         </div>
-  
+
         <div class="row m20t">
           <div class="large-6 medium-6 small-6 columns">
             <button type="submit" class="button black round expand" ng-show="index.historyShowShowAll" ng-click="index.showAllHistory()" ng-style="{'background-color':index.backgroundColor}"  translate>
diff --git a/src/css/main.css b/src/css/main.css
index 9767bbd71..9794b9a5d 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -359,6 +359,15 @@ ul.tx-copayers {
   background-color: #C0392B;
 }
 
+.circle-icon {
+  background: #F1F3F5;
+  border-radius: 100%;
+  padding: 1.5rem;
+  width: 80px;
+  height: 80px;
+  margin: 0 auto;
+}
+
 .date-message {
   background-color: #213140;
   border-radius: 3px;