added basic modal class styling, styled success modal

public/views/includes/confirmBackupPopup.html

@@ -1,13 +1,18 @@
-<div class="text-center" ng-show="!backupError">
+<div id="backup-confirm-modal" class="popup-modal">
+  <div class="popup-modal-header">
+    <div ng-class="{'popup-modal-header-success': !backupError, 'popup-modal-header-fail': backupError}"></div>
+  </div>
+  <div class="popup-modal-content" ng-class="{'popup-modal-content-success': !backupError, 'popup-modal-content-fail': backupError}">
+    <div class="text-center" ng-show="!backupError">
       <h5 translate>Your bitcoin wallet is backed up!</h5>
-  <p translate> Be sure to store your recovery phrase in a secure place. If this app is deelted, you money coont be recovered with out it.</p>
+      <p translate> Be sure to store your recovery phrase in a secure place. If this app is deelted, you money cannot be recoved with out it.</p>
       <button
-    class="button round expand"
+        class="button button-clear expand"
         ng-click="closePopup(true)"
         translate>Got it
       </button>
-</div>
+    </div>
-<div class="text-center" ng-show="backupError">
+    <div class="text-center" ng-show="backupError">
       <h5 translate>uh oh...</h5>
       <p translate>It's importante that you write your backup phrase down correctly. If something happens to your wallet, you'll need this backup to recover your money
       Please review your backup and try again</p>
@@ -16,4 +21,6 @@
         ng-click="closePopup(false)"
         translate>Ok
       </button>
+    </div>
+  </div>
 </div>

src/js/controllers/backup.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('backupController',
-  function($rootScope, $scope, $timeout, $log, $state, $stateParams, $ionicPopup, $ionicNavBarDelegate, uxLanguage, lodash, fingerprintService, platformInfo, configService, profileService, bwcService, walletService, ongoingProcess, storageService) {
+  function($rootScope, $scope, $timeout, $log, $state, $stateParams, $ionicPopup, $ionicModal, $ionicNavBarDelegate, uxLanguage, lodash, fingerprintService, platformInfo, configService, profileService, bwcService, walletService, ongoingProcess, storageService) {
   var wallet = profileService.getWallet($stateParams.walletId);
   $ionicNavBarDelegate.title(wallet.credentials.walletName);
   $scope.n = wallet.n;
@@ -85,15 +85,9 @@ angular.module('copayApp.controllers').controller('backupController',
     }, 1);
   };
 
-    var openPopup = function() {
-      var confirmBackupPopup = $ionicPopup.show({
-        templateUrl: "views/includes/confirmBackupPopup.html",
-        scope: $scope,
-      });
-
   $scope.closePopup = function(val) {
     if (val) {
-          confirmBackupPopup.close();
+      $scope.closeModal();
       if ($stateParams.fromOnboarding) $state.go('onboarding.disclaimer');
       else $state.go('tabs.home')
     } else {
@@ -101,7 +95,23 @@ angular.module('copayApp.controllers').controller('backupController',
       $scope.goToStep(1);
     }
   };
-    }
+
+  $ionicModal.fromTemplateUrl('views/includes/confirmBackupPopup.html', {
+    scope: $scope,
+    animation: 'slide-in-up'
+  }).then(function(modal) {
+    $scope.modal = modal;
+  });
+  $scope.openModal = function() {
+    $scope.modal.show();
+  };
+  $scope.closeModal = function() {
+    $scope.modal.hide();
+  };
+  // Cleanup the modal when we're done with it!
+  $scope.$on('$destroy', function() {
+    $scope.modal.remove();
+  });
 
   var confirm = function(cb) {
     $scope.backupError = false;
@@ -149,7 +159,7 @@ angular.module('copayApp.controllers').controller('backupController',
         backupError(err);
       }
       $timeout(function() {
-          openPopup();
+              $scope.openModal();
               return;
             }, 1);
     });
@@ -158,7 +168,7 @@ angular.module('copayApp.controllers').controller('backupController',
   $scope.goToStep = function(n) {
     if (n == 1)
       $scope.initFlow();
-      if (n == 2){
+    if (n == 2) {
       $scope.step = 2;
       $scope.viewTitle = "Let's verify your backup phrase";
     }
@@ -196,4 +206,4 @@ angular.module('copayApp.controllers').controller('backupController',
       $scope.selectComplete = false;
   };
 
-  });
+});

src/sass/forms.scss

@@ -0,0 +1,3 @@
+.button-clear{
+  background: none !important;
+}

src/sass/main.scss

@@ -970,3 +970,4 @@ input[type=number] {
 @import 'views/onboarding/onboarding';
 @import "views/includes/walletActivity";
 @import "views/includes/wallets";
+@import "views/includes/modals/modals";

src/sass/views/includes/modals/backup-confirm-modal.scss

@@ -0,0 +1,3 @@
+#backup-confirm-modal{
+  
+}

src/sass/views/includes/modals/modals.scss

@@ -0,0 +1,47 @@
+.popup-modal {
+  background: #fff;
+  top: 20%;
+  position: absolute;
+  z-index: 10;
+  width: 90%;
+  left: 5%;
+  border-radius: .25rem;
+  &-header {
+    background: rgb(1, 209, 162);
+    padding: 1rem;
+    border-radius: .25rem .25rem 0 0;
+    min-height: 120px;
+    &-success {
+      background: url('../img/onboarding-success.svg') no-repeat center;
+      height: 6rem;
+      background-size: contain;
+      margin-top: .3rem;
+    }
+  }
+  &-content {
+    padding: .5rem .8rem;
+    h5,p{
+      margin:0 0 1rem;
+    }
+    h5 {
+      color: rgb(74, 74, 74);
+      font-weight: bold;
+      font-size: 1.3rem;
+      margin-top:1rem;
+    }
+    p{
+      font-weight: 200;
+    }
+  }
+  &-content-success{
+    button{
+      color:rgb(23, 174, 140) !important;
+    }
+  }
+}
+
+.modal-backdrop.active {
+  background: rgba(0, 0, 0, .5);
+}
+
+@import "backup-confirm-modal";

src/sass/views/wallet-backup-phrase.scss

@@ -15,7 +15,7 @@
     background: rgba(246, 246, 246, 0.87);
     padding: .5rem .5rem 1.7rem;
     border: 2px dashed rgb(206, 206, 206);
-    width: 80%;
+    width: 90%;
     margin: 2rem auto;
     color: rgb(43, 43, 43);
     text-align: center;