From 984c713a6d8c87b379a5af1f9db6aa97e87d9e2c Mon Sep 17 00:00:00 2001
From: Jamal Jackson <jamal@bitpay.com>
Date: Mon, 12 Sep 2016 10:14:06 -0400
Subject: [PATCH] finish initial backup phrase view where phrase is shown to
 user

---
 public/views/backup.html                 | 30 +++++++++++---------
 src/sass/main.scss                       |  1 +
 src/sass/views/wallet-backup-phrase.scss | 36 ++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 14 deletions(-)
 create mode 100644 src/sass/views/wallet-backup-phrase.scss

diff --git a/public/views/backup.html b/public/views/backup.html
index 66dddae7e..39df36761 100644
--- a/public/views/backup.html
+++ b/public/views/backup.html
@@ -1,4 +1,4 @@
-<ion-view>
+<ion-view id="wallet-backup-phrase" title="Backup Phrase">
   <ion-nav-bar class="bar-royal">
     <ion-nav-back-button>
       <i class="icon ion-ios-arrow-thin-left"></i>
@@ -14,13 +14,14 @@
     ## STEP 1
     -->
     <div ng-show="step == 1 && (mnemonicWords || (!credentialsEncrypted && !deleted))">
-      <h5 translate>Backup Phrase</h5>
-      <div ng-class="{'enable_text_select': wallet.network == 'testnet'}">
+      <div class="backup-phrase" ng-class="{'enable_text_select': wallet.network == 'testnet'}">
         <span ng-repeat="word in mnemonicWords track by $index"><span style="white-space:nowrap">{{word}}</span><span ng-show="useIdeograms">&#x3000;</span> </span>
       </div>
-      <span translate>
-        Please carefully write down this phrase
-      </span>
+      <div class="row text-center">
+        <p class="col col-70" translate>
+          Please carefully write down this phrase
+        </p>
+      </div>
 
       <div ng-show="mnemonicHasPassphrase">
         <i class="ion-alert-circled"></i>
@@ -28,14 +29,15 @@
           This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
         </span>
       </div>
-
-        <button
-          ng-show="!deleted"
-          ng-disabled="credentialsEncrypted || error"
-          class="button button-block button-positive"
-          ng-click="goToStep(2);"
-          translate>I've written it down
-        </button>
+        <div class="cta-buttons">
+          <button
+            ng-show="!deleted"
+            ng-disabled="credentialsEncrypted || error"
+            class="button button-block button-positive"
+            ng-click="goToStep(2);"
+            translate>I've written it down
+          </button>
+        </div>
     </div>
 
       <!--
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 40aea0ae0..50c0d36a2 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -966,6 +966,7 @@ input[type=number] {
 @import "views/tab-send";
 @import "views/walletDetails";
 @import "views/bitpayCard";
+@import "views/wallet-backup-phrase";
 @import 'views/onboarding/onboarding';
 @import "views/includes/walletActivity";
 @import "views/includes/wallets";
diff --git a/src/sass/views/wallet-backup-phrase.scss b/src/sass/views/wallet-backup-phrase.scss
new file mode 100644
index 000000000..16525bb66
--- /dev/null
+++ b/src/sass/views/wallet-backup-phrase.scss
@@ -0,0 +1,36 @@
+#wallet-backup-phrase {
+  &,
+  & ion-content,
+  & ion-content .scroll {
+    height: 100%;
+  }
+  background: #fff;
+  .backup-phrase {
+    background: rgba(246, 246, 246, 0.87);
+    padding: 1.5rem 1rem;
+    border: 2px dashed rgb(206, 206, 206);
+    width: 80%;
+    margin: 2rem auto;
+    color: rgb(43, 43, 43);
+    text-align: center;
+    span {
+      line-height: 2rem;
+      font-weight: bold;
+      max-width: 400px;
+      color: rgb(43, 43, 43);
+    }
+  }
+  p {
+    color: rgb(58, 58, 58);
+    font-weight: 200;
+  }
+  .cta-buttons {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    bottom: 80px;
+    button {
+      max-width: 400px;
+    }
+  }
+}