From ee2f2ffb824995e96e311d8cdc8f0bfa94b8cebc Mon Sep 17 00:00:00 2001
From: bechi <bechilandia@gmail.com>
Date: Thu, 13 Nov 2014 17:42:41 -0300
Subject: [PATCH 1/4] notification & form-erro on setting

---
 css/src/main.css    | 37 +++++++++++++++++++++++++++++++------
 views/settings.html | 23 ++++++++++++++++++-----
 2 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/css/src/main.css b/css/src/main.css
index 08dcc6312..929906d84 100644
--- a/css/src/main.css
+++ b/css/src/main.css
@@ -324,6 +324,7 @@ a:hover {
 }
 
 .box-setup {
+  margin-bottom: 7rem;
   padding: 1.3rem; 
   border-radius: 2px;
   background: #FFFFFF;
@@ -338,6 +339,29 @@ a:hover {
   font-size: 12px;
 }
 
+.box-notification {
+  height: 41px;
+  position: relative;
+  font-size: 12px;
+  width: 70%;
+  padding: 0.9rem 0.7rem 0.7rem 3rem;
+  border-radius: 4px;
+  background: #F2F5F8;
+  margin: 0 auto;
+}
+
+.box-notification .box-icon {
+  margin-right: 77px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: white;
+  background-color: #1ABC9C;
+  padding: 0.5rem;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
 .last-transactions {
   margin-bottom: 2rem;
   background-color: #E8EAEF;
@@ -1211,21 +1235,22 @@ a:hover .photo-container  {
 }
 
 .icon-input {
-  position: absolute;
-  top: 11px;
-  right: 20px;
-  font-size: 16px;
+  font-size: 9px;
   color: #fff;
+  vertical-align: middle;
+  margin-right: 3px;
 }
 
 .icon-input .fi-check {
+  padding: .1rem .3rem;
   background-color: #1ABC9C;
-  padding: 0.2rem 0.4rem;
+  border-radius: 100%;
 }
 
 .icon-input .fi-x {
+  padding: .1rem .3rem;
   background-color: #C0392A;
-  padding: 0.2rem 0.4rem;
+  border-radius: 100%;
 }
 
 .box-status {
diff --git a/views/settings.html b/views/settings.html
index e5a82163f..4e0d2008f 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -7,7 +7,14 @@
     <div class="box-setup">
       <h1>{{title|translate}}</h1>
       <form name="settingsForm">
-
+        <div class="box-notification" ng-show="message">
+          <div class="box-icon">
+            <i class="fi-check size-24"></i>
+          </div> 
+          <span class="text-primary size-14">
+            {{message|translate}}
+          </span>
+        </div>
         <fieldset>
           <legend translate>Language</legend>
           <select class="form-control" ng-model="selectedLanguage" ng-options="o.name for o in availableLanguages" required>
@@ -15,12 +22,18 @@
         </fieldset>
         <fieldset>
           <legend translate>Insight API server</legend>
-          <label for="insightLivenet">Livenet</label>
-          <small translate class="has-error" ng-show="settingsForm.insightLivenet.$invalid">not valid</small>
+          <label class="left" for="insightLivenet">Livenet</label>
+            <div translate class="has-error right size-12" ng-show="settingsForm.insightLivenet.$invalid">
+              <span class="icon-input"><i class="fi-x"></i></span>
+              Not valid
+            </div>
           <input type="text" ng-model="insightLivenet" class="form-control" name="insightLivenet" valid-url required>
 
-          <label for="insightTestnet">Testnet</label>
-          <small translate class="has-error" ng-show="settingsForm.insightTestnet.$invalid">not valid</small>
+          <label class="left" for="insightTestnet">Testnet</label>
+          <div translate class="has-error right size-12" ng-show="settingsForm.insightTestnet.$invalid">
+            <span class="icon-input"><i class="fi-x"></i></span>
+            Not valid
+          </div>
           <input type="text" ng-model="insightTestnet" class="form-control" name="insightTestnet" valid-url required>
 
           <div translate class="small">

From c594885e3f0c3c47e3e9a59d5cdf98024e289d12 Mon Sep 17 00:00:00 2001
From: bechi <bechilandia@gmail.com>
Date: Thu, 13 Nov 2014 17:47:19 -0300
Subject: [PATCH 2/4] fix color

---
 views/settings.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/views/settings.html b/views/settings.html
index 4e0d2008f..bdbe204c4 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -36,7 +36,7 @@
           </div>
           <input type="text" ng-model="insightTestnet" class="form-control" name="insightTestnet" valid-url required>
 
-          <div translate class="small">
+          <div translate class="small text-gray">
           Insight API server is open-source software. You can run your own instances, check <a href="http://insight.is" target="_blank">Insight API Homepage</a>
           </div>
         </fieldset>
@@ -45,7 +45,7 @@
           <label for="insightTestnet">Store wallet and profiles on</label>
           <select class="form-control" ng-model="selectedStorage" ng-options="o.name for o in availableStorages" required>
           </select>
-          <div translate class="small">
+          <div translate class="small text-gray">
           Wallets and profiles are stored encrypted using your password as a key. You can store the encrypted data locally, on your platform, or remotely on the Insight Server. <a target="_blank" href="https://github.com/bitpay/copay/tree/master/js/plugins">More pluggins are welcomed!</a>
           </div>
         </fieldset>
@@ -53,7 +53,7 @@
           <legend translate>Log level</legend>
           <select class="form-control" ng-model="selectedLogLevel" ng-options="o.name for o in availableLogLevels" required>
           </select>
-          <div translate class="small">
+          <div translate class="small text-gray">
           Log level shows information on the console. This is usefull to find bugs and help users. 'debug' is the most verbose level while 'fatal' only shows unexcpected errors</a>
           </div>
         </fieldset>

From 1b8c001aa449588050585ccfa7a492485d8cb492 Mon Sep 17 00:00:00 2001
From: bechi <bechilandia@gmail.com>
Date: Fri, 14 Nov 2014 14:58:04 -0300
Subject: [PATCH 3/4] fix new profile

---
 css/src/main.css         | 34 +++++++++++++++++++++++----
 views/createProfile.html | 50 ++++++++++++++++++++++------------------
 2 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/css/src/main.css b/css/src/main.css
index 929906d84..a05723473 100644
--- a/css/src/main.css
+++ b/css/src/main.css
@@ -77,6 +77,16 @@ header .alt-currency {
   background: #16A085;
 }
 
+.panel h3, .box-setup h3 {
+  font-weight: 700;
+  font-size: 16px;
+  color: #2C3E50;
+  text-transform: uppercase;
+  border-bottom: 1px solid #E5E7EA;
+  margin-bottom: 1.5rem;
+  padding: 0 0 0.8rem;
+}
+
 .alt-currency {
   background: #2C3E50;
   padding: 0.05rem 0.2rem;
@@ -348,6 +358,7 @@ a:hover {
   border-radius: 4px;
   background: #F2F5F8;
   margin: 0 auto;
+  margin-bottom: 1.6rem;
 }
 
 .box-notification .box-icon {
@@ -362,6 +373,11 @@ a:hover {
   border-bottom-left-radius: 4px;
 }
 
+.box-notification .box-icon.error {
+  background-color: #C0392A;
+}
+
+
 .last-transactions {
   margin-bottom: 2rem;
   background-color: #E8EAEF;
@@ -848,6 +864,14 @@ input {
   border: 0;
 }
 
+label {
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 11px;
+  color: #34495E;
+  padding: 0 0.2rem 0.3rem;
+}
+
 button.radius, .button.radius {
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -908,6 +932,12 @@ input[type='submit']
     appearance: none;
 }
 
+
+input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea {
+  color: #7A8C9E;
+  margin-bottom: 1.3rem;
+}
+
 button.secondary, 
 .button.secondary { 
   color: #fff;
@@ -1327,10 +1357,6 @@ a.text-warning:hover {color: #FD7262;}
   border: 0;
 }
 
-.box-setup h3 {
-  color: #fff;
-}
-
 .box-setup h1 {
   font-size: 16px;
   text-transform: uppercase;
diff --git a/views/createProfile.html b/views/createProfile.html
index dabf355f1..acef90c98 100644
--- a/views/createProfile.html
+++ b/views/createProfile.html
@@ -10,45 +10,49 @@
       <div ng-include="'views/includes/version.html'"></div>
     </div> 
     <div class="box-setup">
-      <h1 translate>Create Profile</h1>
+      <h3 class="text-center" translate>Create Profile</h3>
+      <div class="box-notification" ng-show="error">
+        <div class="box-icon error">
+          <i class="fi-x size-24"></i>
+        </div> 
+        <span class="text-warning size-14">
+          {{error|translate}}
+        </span>
+      </div>
       <form name="profileForm" ng-submit="createProfile(profileForm)" novalidate>
         <div class="row collapse">
           <div class="small-12 columns">
+            <label class="left" for="insightLivenet">Email</label>
+            <span translate class="has-error right size-12" ng-show="profileForm.email.$invalid &&
+              !profileForm.email.$pristine || error">
+              <span class="icon-input"><i class="fi-x"></i></span>
+              Not valid
+            </span>
+            <span class="icon-input right" ng-show="!profileForm.email.$invalid &&
+              !profileForm.email.$pristine || error"><i class="fi-check"></i></span>
             <input type="email" ng-model="email" class="form-control fi-email"
             name="email" placeholder="Email" required>
-            <small class="icon-input" ng-show="!profileForm.email.$invalid &&
-              !profileForm.email.$pristine && !error"><i class="fi-check"></i></small>
-            <small class="icon-input" ng-show="profileForm.email.$invalid &&
-              !profileForm.email.$pristine || error"><i class="fi-x"></i></small>
           </div>
-          <p class="text-warning size-12"
-          ng-show="error">
-          <i class="fi-x"></i> 
-          {{error|translate}}
-          </p>
  
         </div>
+        <label class="left" for="insightLivenet">Password</label>
         <input id="password" type="password" ng-model="$parent.password"
         class="form-control" name="password" placeholder="{{'Choose a password'|translate}}" check-strength="passwordStrength" 
         tooltip-html-unsafe="Password strength: <i>{{passwordStrength}}</i><br/><span class='size-12'>Tip: Use lower and uppercase, numbers and symbols</span>" tooltip-trigger="focus" required tooltip-placement="right">
 
         <div class="pr">
+          <label class="left" for="insightLivenet">Confirm Password</label>
+          <span translate class="has-error right size-12" ng-show="profileForm.repeatpassword.$dirty &&
+            profileForm.repeatpassword.$invalid">
+            <span class="icon-input"><i class="fi-x"></i></span>
+            {{'Passwords must match'|translate}}
+          </span>
+          <span class="icon-input right" ng-show="profileForm.repeatpassword.$dirty &&
+            !profileForm.repeatpassword.$invalid"><i class="fi-check"></i></span>
           <input type="password" ng-model="repeatpassword"
           class="form-control" name="repeatpassword" 
           placeholder="{{'Repeat password'|translate}}"
-          match="password" required >
-          <small class="icon-input"
-            ng-show="profileForm.repeatpassword.$dirty &&
-            !profileForm.repeatpassword.$invalid"><i class="fi-check"></i></small>
-          <small class="icon-input"
-            ng-show="profileForm.repeatpassword.$dirty &&
-            profileForm.repeatpassword.$invalid"><i class="fi-x"></i></small>
-          <p class="text-warning size-12"
-          ng-show="profileForm.repeatpassword.$dirty &&
-          profileForm.repeatpassword.$invalid">
-          <i class="fi-x"></i> 
-          {{'Passwords must match'|translate}}
-          </p>
+          match="password" required >  
         </div>
         <button translate type="submit" class="button primary radius expand m0"
           ng-disabled="profileForm.$invalid || loading">

From 04d2d7b5360e90eb94d89221eeff849eea0149a1 Mon Sep 17 00:00:00 2001
From: bechi <bechilandia@gmail.com>
Date: Tue, 18 Nov 2014 17:01:43 -0300
Subject: [PATCH 4/4] fix all form notification

---
 css/src/main.css               |  28 +++
 views/modals/address-book.html |  15 +-
 views/send.html                | 310 +++++++++++++++++----------------
 3 files changed, 194 insertions(+), 159 deletions(-)

diff --git a/css/src/main.css b/css/src/main.css
index a05723473..fbb8e1211 100644
--- a/css/src/main.css
+++ b/css/src/main.css
@@ -936,6 +936,12 @@ input[type='submit']
 input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea {
   color: #7A8C9E;
   margin-bottom: 1.3rem;
+  height: 40px;
+  border-radius: 2px;
+  background: #F2F5F8;
+  -moz-box-shadow:    inset 1px 1px 0px 0px rgba(0,0,0,0.05);
+  box-shadow:         inset 1px 1px 0px 0px rgba(0,0,0,0.05);
+  border: none;
 }
 
 button.secondary, 
@@ -1170,6 +1176,28 @@ button.gray:focus,
   color: #CA5649;
 }
 
+.postfix.button, .prefix.button {
+  position: absolute;
+  width: 38px;
+  height: 28px;
+  right: 7px;
+  top: 29px;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  line-height: 1.7rem;
+  border-radius: 2px;
+}
+
+label.postfix, span.postfix {
+  height: 40px;
+  border: none;
+  background-color: #DFE5EB;
+  font-weight: 700;
+  font-size: 10px;
+  color: #7A8C9E;
+  text-transform: uppercase;
+}
+
 .photo-container {
   margin-right: 3px;
   display: inline-block;
diff --git a/views/modals/address-book.html b/views/modals/address-book.html
index 06dafe4d1..f490ec877 100644
--- a/views/modals/address-book.html
+++ b/views/modals/address-book.html
@@ -1,12 +1,17 @@
 <h2 translate>Address Book</h2>
 <form class="m0" name="addressBookForm" ng-submit="submitAddressBook(addressBookForm)" novalidate>
-  <label for="newaddress"><span translate>Address</span>
+  <label for="newaddress" class="left"><span translate>Address</span>
     <small translate ng-hide="!addressBookForm.newaddress.$pristine || newaddress">Required</small>
-    <small translate class="is-valid" ng-show="!addressBookForm.newaddress.$invalid && newaddress">Valid</small>
-    <small translate class="has-error" ng-show="addressBookForm.newaddress.$invalid && newaddress">Not valid</small>
-    <input type="text" id="newaddress" name="newaddress" ng-disabled="loading"
-    placeholder="{{'Address'|translate}}" ng-model="newaddress" valid-address required>
   </label>
+  <span translate class="has-error right size-12" ng-show="addressBookForm.newaddress.$invalid && newaddress">
+    <span class="icon-input"><i class="fi-x"></i></span>
+    Not valid
+  </span>
+  <small class="icon-input right" ng-show="!addressBookForm.newaddress.$invalid && newaddress"><i class="fi-check"></i></small>
+
+  <input type="text" id="newaddress" name="newaddress" ng-disabled="loading"
+    placeholder="{{'Address'|translate}}" ng-model="newaddress" valid-address required>
+
   <label for="newlabel"><span translate>Label</span>
     <small translate ng-hide="!addressBookForm.newlabel.$pristine || newlabel">Required</small>
     <input type="text" id="newlabel" name="newlabel" ng-disabled="loading"
diff --git a/views/send.html b/views/send.html
index 9f94fea42..e17f8a0a9 100644
--- a/views/send.html
+++ b/views/send.html
@@ -14,165 +14,167 @@
     <h1 class="hide-for-large-up">{{$root.title}}</h1>
     <div class="row">
       <div class="large-6 columns">
-        <form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
-          <p class="text-warning size-16"
-          ng-show="error">
-          <i class="fi-alert"></i> 
-          {{error|translate}}
-          </p>
+          <div class="panel">
+          <form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
+            <p class="text-warning size-16"
+            ng-show="error">
+            <i class="fi-alert"></i> 
+            {{error|translate}}
+            </p>
 
-          <div class="row collapse">
-            <label for="address">
-              <span translate>To</span> 
-              <i class="fi-info size-12" href="#"
-                data-options="disable_for_touch:true"
-                tooltip-popup-delay='500'
-                tooltip="{{'Enter a valid Bitcoin address. Payment Protocol URLs are also supported'|translate}}"
-                tooltip-trigger="mouseenter"
-                tooltip-placement="right"></i>
-              <small translate ng-hide="!sendForm.address.$pristine || address">required</small>
-              <small translate class="is-valid" ng-show="!sendForm.address.$invalid && address">valid!</small>
-              <small translate class="has-error" ng-show="sendForm.address.$invalid && address">not valid</small>
-            </label>
-            <div class="small-10 columns">
-              <input type="text" id="address" name="address" ng-disabled="loading || !!$root.merchant"
-              placeholder="{{'Bitcoin address'|translate}}" ng-model="address" ng-change="onChanged()" valid-address required>
-              <small class="icon-input" ng-show="!sendForm.address.$invalid && address"><i class="fi-check"></i></small>
-              <small class="icon-input" ng-show="sendForm.address.$invalid && address"><i class="fi-x"></i></small>
-            </div>
-            <div class="small-2 columns" ng-hide="showScanner || disableScanner">
-              <a class="postfix button black" ng-click="openScanner()"><i class="fi-camera"></i></a>
-            </div>
-            <div class="small-2 columns" ng-show="showScanner">
-              <a translate class="postfix button warning" ng-click="cancelScanner()">Cancel</a>
-            </div>
-          </div>
-          <div id="scanner" ng-if="showScanner">
-            <div class="text-centered">
-              <canvas id="qr-canvas" width="200" height="150"></canvas>
-              <div ng-show="isMobile">
-                <div id="file-input-wrapper" class="btn btn-primary">
-                  <span class="pull-left text-centered">
-                    <i class="glyphicon glyphicon-refresh icon-rotate"></i>
-                    <span translate>Get QR code</span>
-                  </span>
-                  <input id="qrcode-camera" type="file" capture="camera" accept="image/*">
-                </div>
-              </div>
-              <div ng-hide="isMobile">
-                <video id="qrcode-scanner-video" width="300" height="225" ng-hide="isMobile"></video>
-              </div>
-            </div>
-          </div>
-
-          <div class="row">
-            <div class="large-6 medium-6 columns">
-              <div class="row collapse">
-                <label for="amount"><span translate>Amount</span>
-                  <small translate ng-hide="!sendForm.amount.$pristine">required</small>
-                  <small translate class="is-valid"
-                    ng-show="!sendForm.amount.$invalid &&
-                    !sendForm.amount.$pristine">valid!</small>
-                  <small translate class="has-error"
-                    ng-show="(sendForm.amount.$invalid || notValidAmount) &&
-                    !sendForm.amount.$pristine">not valid
-                  </small>
-                </label>
-                <div class="small-9 columns">
-                  <input type="number" id="amount"
-                  ng-disabled="loading || ($root.merchant && +$root.merchant.total > 0)"
-                  name="amount" placeholder="{{'Amount'|translate}}" ng-model="amount"
-                  min="0.00000001" max="10000000000" valid-amount required
-                  autocomplete="off">
-                  <small class="icon-input" ng-show="!sendForm.amount.$invalid && amount"><i class="fi-check"></i></small>
-                  <small class="icon-input" ng-show="sendForm.amount.$invalid &&
-                    !sendForm.amount.$pristine && !notValidAmount"><i class="fi-x"></i></small>
-                  <a class="small input-note" title="{{'Send all funds'|translate}}"
-                    ng-show="topAmount && (!$root.merchant || +$root.merchant.total === 0)"
-                    ng-click="setTopAmount(sendForm)">
-                    <span translate>Use all funds</span> {{$root.wallet.settings.unitName}}
-                  </a>
-                </div>
-                <div class="small-3 columns">
-                  <span class="postfix">{{$root.wallet.settings.unitName}}</span>
-                </div>
-              </div>
-            </div>
-            <div class="large-6 medium-6 columns">
-              <div class="row collapse">
-                <label for="alternative"><span translate>Amount in</span> {{ alternativeName }} </label>
-                <div class="small-9 columns">
-                  <input type="number" id="alternative_amount"
-                  ng-disabled="loading || !isRateAvailable || ($root.merchant && +$root.merchant.total > 0)"
-                  name="alternative" placeholder="{{'Amount'|translate}}" ng-model="alternative"
-                  required
-                  autocomplete="off"
-                  >
-                </div>
-                <div class="small-3 columns">
-                  <span class="postfix">{{alternativeIsoCode}}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="row">
-            <div class="large-12 columns" ng-show="!!$root.merchant">
-              <h3>This is a payment protocol transaction</h3>
-              <div class="send-note">
-                <p>
-                <b translate>Send to</b>: 
-                {{$root.merchant.domain}}
-                </p>
-                <p>
-                <b translate>Total amount for this transaction</b>: 
-                <i>{{amount + defaultFee |noFractionNumber}} {{$root.wallet.settings.unitName}}</i>
-                <small ng-if="isRateAvailable">
-                  {{ rateService.toFiat((amount + defaultFee) * unitToSatoshi, alternativeIsoCode) | noFractionNumber: 2 }} {{ alternativeIsoCode }}
-                </small>
-                <small>
-                  (<span translate>Including fee of</span>
-                  {{defaultFee|noFractionNumber}}
-                  {{$root.wallet.settings.unitName}})
-                </small>
-                </p>
-                <p>
-                <b translate>Server Says</b>: 
-                {{$root.merchant.pr.pd.memo}}
-                </p>
-                <p>
-                <b translate>Certificate</b>: 
-                <span ng-show="!!$root.merchant.pr.ca">{{$root.merchant.pr.ca}}</span>
-                <span ng-show="!$root.merchant.pr.ca" style="color:red;weight:bold;">Untrusted</span>
-                </p>
-                <p>
-                <b translate>Payment Expiration</b>: 
-                {{$root.merchant.expiration}}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div class="row">
-            <div class="large-12 columns">
-              <label for="comment"><span translate>Note</span>
-                <small translate ng-hide="!sendForm.comment.$pristine">optional</small>
-                <small translate class="has-error" ng-show="sendForm.comment.$invalid && !sendForm.comment.$pristine">too long!</small>
+            <div class="row collapse">
+              <label for="address" class="left">
+                <span translate>To</span> 
+                <i class="fi-info size-12" href="#"
+                  data-options="disable_for_touch:true"
+                  tooltip-popup-delay='500'
+                  tooltip="{{'Enter a valid Bitcoin address. Payment Protocol URLs are also supported'|translate}}"
+                  tooltip-trigger="mouseenter"
+                  tooltip-placement="right"></i>
+                <small translate ng-hide="!sendForm.address.$pristine || address">required</small>
               </label>
-              <textarea id="comment" ng-disabled="loading"
-                name="comment" placeholder="{{(wallet.isShared() ? 'Leave a private message to your copayers' : 'Add a private comment to identify the transaction') |translate}}" ng-model="commentText" ng-maxlength="100"></textarea>
-            </div>
-          </div>
+              <span translate class="has-error right size-12" ng-show="sendForm.address.$invalid && address">
+                <span class="icon-input"><i class="fi-x"></i></span>
+                Not valid
+              </span>
+              <small class="icon-input right" ng-show="!sendForm.address.$invalid && address"><i class="fi-check"></i></small>
 
-          <div class="row">
-            <div class="large-12 columns text-right">
-              <button type="submit" class="button primary m0" ng-disabled="sendForm.$invalid || loading">
-                Send
-              </button>
+              <div class="pr">
+                <input type="text" id="address" name="address" ng-disabled="loading || !!$root.merchant"
+                placeholder="{{'Bitcoin address'|translate}}" ng-model="address" ng-change="onChanged()" valid-address required>
+                <div ng-hide="showScanner || disableScanner">
+                  <button class="postfix button black" ng-click="openScanner()"><i class="fi-camera size-24"></i></button>
+                </div>
+                <div ng-show="showScanner">
+                  <button translate class="postfix button warning" ng-click="cancelScanner()"><i class="fi-x size-18"></i></button>
+                </div>
+              </div>
+            </div>
+            <div id="scanner" ng-if="showScanner">
+              <div class="text-centered">
+                <canvas id="qr-canvas" width="200" height="150"></canvas>
+                <div ng-show="isMobile">
+                  <div id="file-input-wrapper" class="btn btn-primary">
+                    <span class="pull-left text-centered">
+                      <i class="glyphicon glyphicon-refresh icon-rotate"></i>
+                      <span translate>Get QR code</span>
+                    </span>
+                    <input id="qrcode-camera" type="file" capture="camera" accept="image/*">
+                  </div>
+                </div>
+                <div ng-hide="isMobile">
+                  <video id="qrcode-scanner-video" width="300" height="225" ng-hide="isMobile"></video>
+                </div>
+              </div>
             </div>
-          </div>
-        </form>
 
+            <div class="row">
+              <div class="large-6 medium-6 columns">
+                <div class="row collapse">
+                  <label for="amount" class="small-7 columns m5b"><span translate>Amount</span>
+                    <small translate ng-hide="!sendForm.amount.$pristine">required</small>
+                  </label>
+                  <span translate class="has-error right size-12" ng-show="(sendForm.amount.$invalid || notValidAmount) && !sendForm.amount.$pristine">
+                    <span class="icon-input"><i class="fi-x"></i></span>
+                    Not valid
+                  </span>
+                  <small class="icon-input right" ng-show="!sendForm.amount.$invalid &&
+                    !sendForm.amount.$pristine"><i class="fi-check"></i></small>
+                  
+                  <div class="pr">
+                  <div class="small-9 columns">
+                    <input type="number" id="amount"
+                    ng-disabled="loading || ($root.merchant && +$root.merchant.total > 0)"
+                    name="amount" placeholder="{{'Amount'|translate}}" ng-model="amount"
+                    min="0.00000001" max="10000000000" valid-amount required
+                    autocomplete="off">
+                    <a class="small input-note" title="{{'Send all funds'|translate}}"
+                      ng-show="topAmount && (!$root.merchant || +$root.merchant.total === 0)"
+                      ng-click="setTopAmount(sendForm)">
+                      <span translate>Use all funds</span> {{$root.wallet.settings.unitName}}
+                    </a>
+                  </div>
+                  </div>
+                  <div class="small-3 columns">
+                    <span class="postfix">{{$root.wallet.settings.unitName}}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="large-6 medium-6 columns">
+                <div class="row collapse">
+                  <label for="alternative"><span translate>Amount in</span> {{ alternativeName }} </label>
+                  <div class="small-9 columns">
+                    <input type="number" id="alternative_amount"
+                    ng-disabled="loading || !isRateAvailable || ($root.merchant && +$root.merchant.total > 0)"
+                    name="alternative" placeholder="{{'Amount'|translate}}" ng-model="alternative"
+                    required
+                    autocomplete="off"
+                    >
+                  </div>
+                  <div class="small-3 columns">
+                    <span class="postfix">{{alternativeIsoCode}}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="large-12 columns" ng-show="!!$root.merchant">
+                <h3>This is a payment protocol transaction</h3>
+                <div class="send-note">
+                  <p>
+                  <b translate>Send to</b>: 
+                  {{$root.merchant.domain}}
+                  </p>
+                  <p>
+                  <b translate>Total amount for this transaction</b>: 
+                  <i>{{amount + defaultFee |noFractionNumber}} {{$root.wallet.settings.unitName}}</i>
+                  <small ng-if="isRateAvailable">
+                    {{ rateService.toFiat((amount + defaultFee) * unitToSatoshi, alternativeIsoCode) | noFractionNumber: 2 }} {{ alternativeIsoCode }}
+                  </small>
+                  <small>
+                    (<span translate>Including fee of</span>
+                    {{defaultFee|noFractionNumber}}
+                    {{$root.wallet.settings.unitName}})
+                  </small>
+                  </p>
+                  <p>
+                  <b translate>Server Says</b>: 
+                  {{$root.merchant.pr.pd.memo}}
+                  </p>
+                  <p>
+                  <b translate>Certificate</b>: 
+                  <span ng-show="!!$root.merchant.pr.ca">{{$root.merchant.pr.ca}}</span>
+                  <span ng-show="!$root.merchant.pr.ca" style="color:red;weight:bold;">Untrusted</span>
+                  </p>
+                  <p>
+                  <b translate>Payment Expiration</b>: 
+                  {{$root.merchant.expiration}}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="large-12 columns">
+                <label for="comment"><span translate>Note</span>
+                  <small translate ng-hide="!sendForm.comment.$pristine">optional</small>
+                  <small translate class="has-error" ng-show="sendForm.comment.$invalid && !sendForm.comment.$pristine">too long!</small>
+                </label>
+                <textarea id="comment" ng-disabled="loading"
+                  name="comment" placeholder="{{(wallet.isShared() ? 'Leave a private message to your copayers' : 'Add a private comment to identify the transaction') |translate}}" ng-model="commentText" ng-maxlength="100"></textarea>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="large-12 columns text-right">
+                <button type="submit" class="button primary m0" ng-disabled="sendForm.$invalid || loading">
+                  Send
+                </button>
+              </div>
+            </div>
+          </form>
+        </div>
       </div>
     </div><!--  end of row -->
     <div class="row m20b" ng-show="$root.alternativeConversionRate > 0">