improve design on payment protocol view

src/js/controllers/confirm.js

@@ -37,6 +37,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     $scope.toEmail = data.stateParams.toEmail;
     $scope.description = data.stateParams.description;
     $scope.paypro = data.stateParams.paypro;
+    console.log($scope.paypro);
     $scope.insufficientFunds = false;
     $scope.noMatchingWallet = false;
     $scope.paymentExpired = {
@@ -433,6 +434,10 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     });
   };
 
+  $scope.cancel = function() {
+    $scope.payproModal.hide();
+  };
+
   $scope.approve = function(onSendStatusChange) {
 
     var wallet = $scope.wallet;

src/js/controllers/modals/paypro.js

@@ -1,9 +0,0 @@
-'use strict';
-
-angular.module('copayApp.controllers').controller('payproController', function($scope) {
-  var self = $scope.self;
-
-  $scope.cancel = function() {
-    $scope.payproModal.hide();
-  };
-});

src/sass/views/includes/txp-details.scss

@@ -86,6 +86,11 @@
           flex-grow: 1;
         }
       }
+      &.double-line {
+        .item-note {
+          width: 100%;
+        }
+      }
     }
     .item-divider {
       padding-top: 1.2rem;

www/views/modals/paypro.html

@@ -1,37 +1,37 @@
-<ion-modal-view ng-controller="payproController">
+<ion-modal-view id="view-confirm">
-  <ion-header-bar align-title="center" class="bar-royal" ng-style="{'background-color': color, 'border-color': color}">
+  <ion-header-bar align-title="center" class="bar-royal">
-    <button class="button button-clear" ng-click="cancel()">
+    <button class="button button-back button-clear" ng-click="cancel()">
       {{'Close' | translate}}
     </button>
-    <div class="title" translate>
+    <h1 class="title" translate>Payment request</h1>
-      Payment request
-    </div>
   </ion-header-bar>
-
   <ion-content>
-    <div class="header-modal text-center size-42">
-      {{amountStr}}
-    </div>
-
     <div class="list">
-      <div class="item item-divider" translate>
+      <div class="item head">
-        Details
+        <div class="amount-label">
+          <div class="amount">{{displayAmount || '...'}} <span class="unit">{{displayUnit}}</span></div>
+          <div class="alternative">{{alternativeAmountStr || '...'}}</div>
         </div>
-      <div class="item">
-        {{'Pay To'|translate}}
-        <span class="item-note">{{paypro.domain}}</span>
       </div>
-      <div class="item" ng-if="paypro.toAddress">
+      <div class="info">
-        {{'Address'|translate}}
+        <div class="item single-line" ng-if="paypro.domain">
-        <span class="item-note">{{paypro.toAddress}}</span>
+          <span class="label">{{'Pay To'|translate}}</span>
-      </div>
-      <div class="item">
-        {{'Certified by'|translate}}
           <span class="item-note">
+            {{paypro.domain}}
+          </span>
+        </div>
+        <div class="item single-line" ng-if="paypro.toAddress">
+          <span class="label">{{'Address'|translate}}</span>
+          <span class="item-note m10l ellipsis">
+            {{paypro.toAddress}}
+          </span>
+        </div>
+        <div class="item">
+          <span class="label">{{'Certified by'|translate}}</span>
+          <span class="item-note w100p">
             <span ng-show="paypro.caTrusted">
               <i class="ion-locked" style="color:green"></i>
-            {{paypro.caName}}<br>
+              {{paypro.caName}} {{'(Trusted)' | translate}}</span>
-            <span translate>(Trusted)</span>
             </span>
             <span ng-show="!paypro.caTrusted">
               <span ng-show="paypro.selfSigned">
@@ -45,12 +45,17 @@
           </span>
         </div>
         <div class="item" ng-if="paypro.memo">
-        {{'Memo'|translate}}
+          <span class="label">{{'Memo'|translate}}</span>
-        <span class="item-note wrapword">{{paypro.memo}}</span>
+          <span class="item-note w100p">
+            {{paypro.memo}}
+          </span>
+        </div>
+        <div class="item single-line" ng-if="paypro.expires">
+          <span class="label">{{'Expires'|translate}}</span>
+          <span class="item-note">
+            {{paypro.expires * 1000 | amTimeAgo }}
+          </span>
         </div>
-      <div class="item" ng-if="paypro.expires">
-        {{'Expires'|translate}}
-        <span class="item-note">{{paypro.expires * 1000 | amTimeAgo }}</span>
       </div>
     </div>
   </ion-content>