fix all form notification

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;

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>
+  </label>
-    <small translate class="has-error" ng-show="addressBookForm.newaddress.$invalid && newaddress">Not valid</small>
+  <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>
+
   <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"

views/send.html

@@ -14,6 +14,7 @@
     <h1 class="hide-for-large-up">{{$root.title}}</h1>
     <div class="row">
       <div class="large-6 columns">
+          <div class="panel">
           <form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
             <p class="text-warning size-16"
             ng-show="error">
@@ -22,7 +23,7 @@
             </p>
 
             <div class="row collapse">
-            <label for="address">
+              <label for="address" class="left">
                 <span translate>To</span> 
                 <i class="fi-info size-12" href="#"
                   data-options="disable_for_touch:true"
@@ -31,20 +32,22 @@
                   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">
+              <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="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>
-              <small class="icon-input" ng-show="!sendForm.address.$invalid && address"><i class="fi-check"></i></small>
+                <div ng-hide="showScanner || disableScanner">
-              <small class="icon-input" ng-show="sendForm.address.$invalid && address"><i class="fi-x"></i></small>
+                  <button class="postfix button black" ng-click="openScanner()"><i class="fi-camera size-24"></i></button>
                 </div>
-            <div class="small-2 columns" ng-hide="showScanner || disableScanner">
+                <div ng-show="showScanner">
-              <a class="postfix button black" ng-click="openScanner()"><i class="fi-camera"></i></a>
+                  <button translate class="postfix button warning" ng-click="cancelScanner()"><i class="fi-x size-18"></i></button>
                 </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">
@@ -68,31 +71,30 @@
             <div class="row">
               <div class="large-6 medium-6 columns">
                 <div class="row collapse">
-                <label for="amount"><span translate>Amount</span>
+                  <label for="amount" class="small-7 columns m5b"><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>
+                  <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">
-                  <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>
                   <div class="small-3 columns">
                     <span class="postfix">{{$root.wallet.settings.unitName}}</span>
                   </div>
@@ -172,7 +174,7 @@
               </div>
             </div>
           </form>
-
+        </div>
       </div>
     </div><!--  end of row -->
     <div class="row m20b" ng-show="$root.alternativeConversionRate > 0">