From b281c14e83058504154e8cd28470d664f178cad3 Mon Sep 17 00:00:00 2001
From: JDonadio <tanojaja@gmail.com>
Date: Sat, 28 Oct 2017 12:11:28 -0300
Subject: [PATCH] fix confirm modal img - use map colors properly

---
 app-template/bitpay/sass/_overrides.scss       |  1 +
 app-template/copay/sass/_overrides.scss        |  1 +
 src/assets/img/backup/success.svg              | 18 ++++++++++++++++++
 .../backup-confirm-modal.html                  |  6 ++----
 .../backup-confirm-modal.scss                  |  3 +--
 src/pages/backup/backup-game/backup-game.html  | 12 ++++++------
 src/pages/backup/backup-game/backup-game.scss  |  8 ++++----
 .../backup-warning-modal.html                  |  2 +-
 .../backup-warning-modal.scss                  |  3 +--
 9 files changed, 35 insertions(+), 19 deletions(-)
 create mode 100644 src/assets/img/backup/success.svg

diff --git a/app-template/bitpay/sass/_overrides.scss b/app-template/bitpay/sass/_overrides.scss
index 345a082be..302d4f050 100644
--- a/app-template/bitpay/sass/_overrides.scss
+++ b/app-template/bitpay/sass/_overrides.scss
@@ -16,6 +16,7 @@ $colors: (
   accent:     #647ce8,
   warning:    #EBA133,
   danger:     #bb331a,
+  success:    #7BC94D,
   light:      #f4f4f4,
   dark:       #222,
 );
diff --git a/app-template/copay/sass/_overrides.scss b/app-template/copay/sass/_overrides.scss
index b3d1f71e5..b004d2f10 100644
--- a/app-template/copay/sass/_overrides.scss
+++ b/app-template/copay/sass/_overrides.scss
@@ -16,6 +16,7 @@ $colors: (
   accent:     #1abb9b,
   warning:    #EBA133,
   danger:     #bb331a,
+  success:    #7BC94D,
   light:      #f4f4f4,
   dark:       #222,
 );
diff --git a/src/assets/img/backup/success.svg b/src/assets/img/backup/success.svg
new file mode 100644
index 000000000..665a3fd01
--- /dev/null
+++ b/src/assets/img/backup/success.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="158px" height="157px" viewBox="0 0 158 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 3</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="0.2.4---Wallet-Created" transform="translate(-109.000000, -169.000000)">
+            <g id="Overlay/Success" transform="translate(-1.000000, 0.000000)">
+                <g id="Group-3" transform="translate(111.592000, 170.431784)">
+                    <g id="ios-checkmark-outline" transform="translate(49.261333, 54.161919)"></g>
+                    <polyline id="Line" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" points="49.764 82.7473763 67.3573333 100.801349 114.608 54.6634183"></polyline>
+                    <path d="M77.4106667,154.461769 C120.163397,154.461769 154.821333,119.884324 154.821333,77.2308846 C154.821333,34.5774448 120.163397,0 77.4106667,0 C34.657936,0 0,34.5774448 0,77.2308846 C0,119.884324 34.657936,154.461769 77.4106667,154.461769 Z" id="Oval-1" stroke="#FFFFFF" stroke-width="2"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html
index 204f2668f..cd96f6cfd 100644
--- a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html
+++ b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html
@@ -1,8 +1,6 @@
 <ion-content>
   <div class="confirm-modal-header">
-    <div>
-      <img src='assets/img/onboarding/success.svg'/>
-    </div>
+    <img src='assets/img/backup/success.svg'/>
   </div>
   <div class="confirm-modal-content">
     <div>
@@ -12,7 +10,7 @@
       <div class="confirm-modal-message">
         <span translate>Be sure to store your recovery phrase in a secure place. If this app is deleted, your money cannot be recovered without it.</span>
       </div>
-      <button (click)="closeBackupResultModal()" translate>Got it</button>
+      <button ion-button clear (click)="closeBackupResultModal()" translate>Got it</button>
     </div>
   </div>
 </ion-content>
diff --git a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss
index a4936542f..2125796a3 100644
--- a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss
+++ b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss
@@ -1,5 +1,5 @@
 .confirm-modal-header {
-  background: green;
+  background: color($colors, success);
   padding: 1rem;
   border-radius: 12px 12px 0 0;
   min-height: 120px;
@@ -21,7 +21,6 @@
     font-size: 1.6rem;
   }
   button {
-    padding-top: 2rem;
     background: none;
     font-size: 1.6rem;
   }
diff --git a/src/pages/backup/backup-game/backup-game.html b/src/pages/backup/backup-game/backup-game.html
index 2509cb37f..0be52dbed 100644
--- a/src/pages/backup/backup-game/backup-game.html
+++ b/src/pages/backup/backup-game/backup-game.html
@@ -26,7 +26,7 @@
         
         <div class="buttons">
           <div class="tldr" translate>We'll confirm on the next screen.</div>
-          <button [disabled]="wallet.credentials.mnemonicEncrypted || error" (click)="slideNext()" translate>I've written it down</button>
+          <button ion-button block [disabled]="wallet.credentials.mnemonicEncrypted || error" (click)="slideNext()" translate>I've written it down</button>
         </div>
       </div>
     </ion-slide>
@@ -35,13 +35,13 @@
       <div>
         <div translate>Let's verify your backup phrase.</div>
         <div class="phrase">
-          <button *ngFor="let customWord of customWords; let i = index" (click)="removeButton(i, customWord)">{{customWord.word}}</button>
+          <button ion-button outline *ngFor="let customWord of customWords; let i = index" (click)="removeButton(i, customWord)">{{customWord.word}}</button>
         </div>
         <div class="buttons">
           <div *ngIf="!selectComplete">
             <div class="tldr" translate>Please tap each word in the correct order.</div>
             <div>
-              <button *ngFor="let shuffledWord of shuffledMnemonicWords; let i = index"
+              <button ion-button *ngFor="let shuffledWord of shuffledMnemonicWords; let i = index"
                 (click)="addButton(i, shuffledWord)"
                 [disabled]="shuffledWord.selected">{{shuffledWord.word}}
               </button>
@@ -51,8 +51,8 @@
           <div *ngIf="selectComplete">
             <div class="tldr" translate>Is this correct?</div>
             <div>
-              <button (click)="slideNext();" translate>Confirm</button>
-              <button (click)="initFlow();" translate>Clear</button>
+              <button ion-button block (click)="slideNext();" translate>Confirm</button>
+              <button ion-button block outline (click)="initFlow();" translate>Clear</button>
             </div>
           </div>
         </div>
@@ -75,7 +75,7 @@
       </div>
 
       <div class="buttons">
-        <button [disabled]="!passphrase" (click)="finalStep();" translate>Confirm</button>
+        <button ion-button block [disabled]="!passphrase" (click)="finalStep();" translate>Confirm</button>
       </div>
     </ion-slide>
   </ion-slides>
diff --git a/src/pages/backup/backup-game/backup-game.scss b/src/pages/backup/backup-game/backup-game.scss
index 02b8db623..26fb16f84 100644
--- a/src/pages/backup/backup-game/backup-game.scss
+++ b/src/pages/backup/backup-game/backup-game.scss
@@ -9,18 +9,18 @@
     .password-required {
       padding: 2rem;
       font-size: 14px;
-      color: #DB5B44;
+      color: color($colors, danger);
     }
     .password {
-      background-color: #f2f2f2;
+      background-color: color($colors, light);
       padding: 2rem;
     }
     .phrase {
       display: -webkit-box;
-      background: #f2f2f2;
+      background: color($colors, light);
       border: 2px dashed #d9d9d9;
       border-radius: 3px;
-      color: #445;
+      color: color($colors, secondary);
       text-align: center;
       max-width: 500px;
       min-height: 12rem;
diff --git a/src/pages/backup/backup-warning-modal/backup-warning-modal.html b/src/pages/backup/backup-warning-modal/backup-warning-modal.html
index cb1a92584..122529edb 100644
--- a/src/pages/backup/backup-warning-modal/backup-warning-modal.html
+++ b/src/pages/backup/backup-warning-modal/backup-warning-modal.html
@@ -10,7 +10,7 @@
       <div class="warning-modal-message">
         <span translate>If you take a screenshot, your backup may be viewed by other apps. You can make a safe backup with physical paper and a pen.</span>
       </div>
-      <button (click)="close()" translate>I understand</button>
+      <button ion-button clear (click)="close()" translate>I understand</button>
     </div>
   </div>
 </ion-content>
diff --git a/src/pages/backup/backup-warning-modal/backup-warning-modal.scss b/src/pages/backup/backup-warning-modal/backup-warning-modal.scss
index 6f235dbea..655d2f7f5 100644
--- a/src/pages/backup/backup-warning-modal/backup-warning-modal.scss
+++ b/src/pages/backup/backup-warning-modal/backup-warning-modal.scss
@@ -1,5 +1,5 @@
 .warning-modal-header {
-  background: orange;
+  background: color($colors, warning);
   padding: 1rem;
   border-radius: 12px 12px 0 0;
   min-height: 120px;
@@ -21,7 +21,6 @@
     font-size: 1.6rem;
   }
   button {
-    padding-top: 2rem;
     background: none;
     font-size: 1.6rem;
   }