first step of ui

public/views/backup.html

@@ -4,7 +4,7 @@
   ng-init="titleSection='Backup'; closeToHome = 'true'">
 </div>
 
-<div class="content preferences" ng-controller="backupController as wordsC">
+<div class="content preferences backup" ng-controller="backupController as wordsC">
   <h4></h4>
   <div class="box-notification" ng-show="wordsC.error">
     <span class="text-warning">
@@ -12,76 +12,67 @@
     </span>
   </div>
 
-  <div ng-show="wordsC.mnemonicWords || (wordsC.credentialsEncrypted && !wordsC.deleted)">
-    <div class="row" ng-show="(index.n>1 && index.m != index.n )">
-      <div class="m10t columns size-14 text-gray">
-        <span translate>
-          To restore this {{index.m}}-{{index.n}} <b>shared</b> wallet you will need
-        </span>:
-        <ol class="m10t columns size-14 text-gray">
-          <li translate>Your wallet seed and access to the server that coordinated the initial wallet creation. You still need {{index.m}} keys to spend.</li>
-          <li translate><b>OR</b> the wallet seed of <b>all</b> copayers in the wallet</li>
-          <li translate><b>OR</b> 1 wallet export file and the remaining quorum of wallet seeds (e.g. in a 3-5 wallet: 1 wallet export file + 2 wallet seeds of any of the other copayers).</li>
-        </ol>
-        </span>
-      </div>
-    </div>
-    <div class="row" ng-show="(index.n>1 && index.m == index.n )">
-      <div class="m10t columns size-14 text-gray">
-        <span translate>
-          To restore this {{index.m}}-{{index.n}} <b>shared</b> wallet you will need
-        </span>:
-        <ol class="m10t columns size-14 text-gray">
-          <li translate>Your wallet seed and access to the server that coordinated the initial wallet creation. You still need {{index.m}} keys to spend.</li>
-          <li translate><b>OR</b> the wallet seeds of <b>all</b> copayers in the wallet</li>
-        </ol>
-        </span>
-      </div>
-    </div>
-  </div>
-
-  <div class="row m20t" ng-show="wordsC.deleted">
-    <div class="columns size-14 text-gray text-center" translate>
-      Wallet seed not available. You can still export it from Advanced &gt; Export.
-    </div>
-  </div>
- 
-  <div ng-show="wordsC.mnemonicWords || (wordsC.credentialsEncrypted && !wordsC.deleted)">
-    <div class="row"  ng-show="index.n==1 && wordsC.step1">
-      <div class="m10t columns size-14 text-gray">
-        <span translate>
-          You need the wallet seed to restore this personal wallet.
-        </span>
-        <span translate class="text-bold">
-          Write it down and keep them somewhere safe.
-        </span>
-      </div>
-    </div>
-    <div class="row" ng-show="wordsC.credentialsEncrypted">
-      <div class="m10t columns">
-        <a class="button outline light-gray expand tiny" ng-click="wordsC.toggle()">
-          <i class="fi-widget m3r"></i>
-          <span translate ng-hide="wordsC.show">Show Wallet Seed</span>
-        </a>
-      </div>
-    </div>
-
-    <div class="row m10t m10b" ng-show="!wordsC.credentialsEncrypted">
-      <div class="small-centered  text-gray columns size-14 text-center" translate>
-        Your Wallet Seed
-      </div>
-    </div>
-
     <!--
     ## STEP 1
     -->
+
+
     <div ng-show="wordsC.step1">
-      <div class="row" ng-show="!wordsC.credentialsEncrypted">
+      <div ng-show="wordsC.mnemonicWords || (wordsC.credentialsEncrypted && !wordsC.deleted)">
+        <h5 class="text-center">Write your wallet seed</h5>
+        <div class="p20 size-14 text-gray" ng-show="(index.n>1 && index.m != index.n )">
+          <span translate>
+            To restore this {{index.m}}-{{index.n}} <b>shared</b> wallet you will need
+          </span>:
+          <ol class="m10t columns size-14 text-gray">
+            <li translate>Your wallet seed and access to the server that coordinated the initial wallet creation. You still need {{index.m}} keys to spend.</li>
+            <li translate><b>OR</b> the wallet seed of <b>all</b> copayers in the wallet</li>
+            <li translate><b>OR</b> 1 wallet export file and the remaining quorum of wallet seeds (e.g. in a 3-5 wallet: 1 wallet export file + 2 wallet seeds of any of the other copayers).</li>
+          </ol>
+          </span>
+        </div>
+        <div class="p20 size-14 text-gray" ng-show="(index.n>1 && index.m == index.n )">
+          <span translate>
+            To restore this {{index.m}}-{{index.n}} <b>shared</b> wallet you will need
+          </span>:
+          <ol class="m10t columns size-14 text-gray">
+            <li translate>Your wallet seed and access to the server that coordinated the initial wallet creation. You still need {{index.m}} keys to spend.</li>
+            <li translate><b>OR</b> the wallet seeds of <b>all</b> copayers in the wallet</li>
+          </ol>
+          </span>
+        </div>
+      </div>
+
+      <div class="row m20t" ng-show="wordsC.deleted">
+        <div class="columns size-14 text-gray text-center" translate>
+          Wallet seed not available. You can still export it from Advanced &gt; Export.
+        </div>
+      </div>
+
+      <div ng-show="wordsC.mnemonicWords || (wordsC.credentialsEncrypted && !wordsC.deleted)">
+        <p class="p20 text-gray"  ng-show="index.n==1 && wordsC.step1">
+          <span translate>
+            You need the wallet seed to restore this personal wallet.
+          </span>
+          <span translate class="text-bold">
+            Write it down and keep them somewhere safe.
+          </span>
+        </p>
+        <div class="row" ng-show="wordsC.credentialsEncrypted">
+          <div class="m10t columns">
+            <a class="button outline light-gray expand tiny" ng-click="wordsC.toggle()">
+              <i class="fi-widget m3r"></i>
+              <span translate ng-hide="wordsC.show">Show Wallet Seed</span>
+            </a>
+          </div>
+        </div>
+        <div class="row" ng-show="!wordsC.credentialsEncrypted">
           <div class="columns">
-            <div class="p10" style="background:white" ng-class="{'enable_text_select': index.network == 'testnet'}">
+            <div class="panel" ng-class="{'enable_text_select': index.network == 'testnet'}">
               <span ng-repeat="word in wordsC.mnemonicWords track by $index"><span style="white-space:nowrap">{{word}}</span><span ng-show="wordsC.useIdeograms">&#x3000;</span> </span>
             </div>
           </div>
+        </div>
       </div>
 
       <div class="row m10t m20b" ng-show="!wordsC.credentialsEncrypted">
@@ -109,18 +100,20 @@
     <!--
     ## STEP 2
     -->
-    <div ng-show="wordsC.step2">
+    <div ng-show="wordsC.step2" class="columns">
-      <div class="row m10b">
+      <div class="columns text-center">
-        <div class="columns">
+          <h5>Confirm your wallet seed</h5>
-          <div class="p10 panel" ng-class="{'enable_text_select': index.network == 'testnet'}">
+          <p class="p20 text-gray m0">
+            Please tap the words in order to confirm your backup phrase is correctly written.
+          </p>
+          <div class="panel words text-left" ng-class="{'enable_text_select': index.network == 'testnet'}">
             <div id="addWord"></div>
           </div>
-          <div class="p10" style="background:white" ng-class="{'enable_text_select': index.network == 'testnet'}">
+          <div class="text-left m20b" ng-class="{'enable_text_select': index.network == 'testnet'}">
             <span ng-repeat="word in wordsC.mnemonicWords track by $index">
-              <button class="button radius tiny" ng-style="{'background-color':index.backgroundColor}" ng-click="wordsC.disableButton(word)" id="{{word}}">{{word}}</button>
+              <button class="button radius tiny words" ng-click="wordsC.disableButton(word)" id="{{word}}">{{word}}</button>
             </span>
           </div>
-        </div>
       </div>
 
       <div class="columns text-center">
@@ -138,11 +131,9 @@
     ## STEP 3
     -->
     <div ng-show="wordsC.step3">
-      <div class="row m10t m10b panel">
+      <div class="columns text-center">
-        <div class="small-centered  text-gray columns size-14 text-center" translate>
+        <h5> Enter your passphrase</h5>
-          Passphrase needed
+        <div class="panel m20v">
-        </div>
-        <div class="columns size-14 m20t">
           <input type="text" id="passphrase" ng-model="passphrase" autocapitalize="off" spellcheck="false" autofocus/>
         </div>
       </div>
@@ -181,10 +172,14 @@
         </div>
       </div>
 
-      <div class="row m10t m10b">
+      <div class="row m10t m10b text-center">
-        <div class="small-centered  text-gray columns size-14 text-center" translate>
+        <div class="circle-icon">
-          Congratulations
+          <i class="fi-like size-48"></i>
         </div>
+        <h5>Congratulation</h5>
+        <p class="text-gray p20" translate>
+          You backed up your new wallet. You can now restore this wallet at any time.
+        </p>
       </div>
 
       <div class="columns text-center m20t">

public/views/walletHome.html

@@ -182,23 +182,18 @@
     -->
     <div id="receive" class="receive tab-view">
 
-      <div ng-show="index.needsBackup" class="p60t row text-center">
+      <div ng-show="index.needsBackup" class="p60t columns text-center">
-        <div class="large-12 columns">
+        <div class="circle-icon">
-          <div class="text-warning text-bold m15b">
+          <i class="fi-alert size-48"></i>
-            <i class="fi-alert"></i>
-            <span translate>
-              WARNING: Backup needed
-            </span>
-          </div>
-          <div class="text-gray" translate>
-            Before receiving funds, it is highly recommended you backup your wallet keys.
-          </div>
-
-          <button class="m20t button black expand round"
-            ng-click="$root.go('backup')" ng-style="{'background-color':index.backgroundColor}" >
-            <span translate>Backup now</span>
-          </button>
         </div>
+        <h5>Backup Needed</h5>
+        <p class="text-gray p20" translate>
+          Before receiving funds, it is highly recommended you backup your wallet. If you lose this device, it is impossible to access your funds without a backup.
+        </p>
+        <button class="m20t button black expand round"
+          ng-click="$root.go('backup')" ng-style="{'background-color':index.backgroundColor}" >
+          <span translate>Backup now</span>
+      </button>
       </div>
       <div ng-show="!index.needsBackup">
         <div class="row">
@@ -473,6 +468,14 @@
             <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>
 
       <div ng-show="index.txHistory[0]">
@@ -514,7 +517,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>

src/css/main.css

@@ -988,6 +988,29 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
   padding: 1rem;
 }
 
+.panel.words {
+  background: #E6EAEE;
+  border: 1px dashed #A5B2BF;
+  min-height: 170px;
+}
+
+.backup .panel {
+  padding: 0.5rem;
+}
+
+.backup button.words {
+  background: #FFFFFF;
+  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.30);
+  color: #4B6178;
+  text-transform: lowercase;
+  font-size: 0.8rem;
+  margin: 5px;
+}
+
+.backup button[disabled] {
+  box-shadow: none;
+}
+
 .panel qrcode {
   background-color: white;
 }