From e5c6e5a2d258a1d358081ccc151cc2f2d83ceff3 Mon Sep 17 00:00:00 2001
From: Andy Phillipson <andy@bitpay.com>
Date: Thu, 8 Jun 2017 17:43:06 -0400
Subject: [PATCH 1/4] Implement proper send search design.

---
 src/js/controllers/tab-send.js | 10 +++++++
 src/sass/views/tab-send.scss   | 54 +++++++++++++++++++++++++++++++++-
 www/views/tab-send.html        | 16 ++++++----
 3 files changed, 73 insertions(+), 7 deletions(-)

diff --git a/src/js/controllers/tab-send.js b/src/js/controllers/tab-send.js
index 96694847f..5c2f576ec 100644
--- a/src/js/controllers/tab-send.js
+++ b/src/js/controllers/tab-send.js
@@ -128,6 +128,16 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
     updateWalletsList();
   };
 
+  $scope.searchInFocus = function() {
+    $scope.searchFocus = true;
+  };
+
+  $scope.searchBlurred = function() {
+    if ($scope.formData.search == null) {
+      $scope.searchFocus = false;
+    }
+  };
+
   $scope.findContact = function(search) {
 
     if (incomingData.redir(search)) {
diff --git a/src/sass/views/tab-send.scss b/src/sass/views/tab-send.scss
index dbda43f2e..cf6da856a 100644
--- a/src/sass/views/tab-send.scss
+++ b/src/sass/views/tab-send.scss
@@ -35,8 +35,60 @@
   .send-heading {
     font-size: 14px;
     font-weight: bold;
-    padding-bottom: 0;
+    padding: 0 0 16px 0;
+    border: none;
   }
+
+
+
+  .send-header-wrapper {
+    padding: 10px;
+    background-color: white;
+    box-shadow: 0px 5px 10px 0px #cccccc;
+  }
+  .search-wrapper {
+    background-color: #f2f2f2;
+    border-radius: 3px;
+    border: none;
+    .svg#Bitcoin_Symbol {
+      width: 14px;
+      .st0 {
+        fill: #cccccc;
+      }
+    }
+    &.focus {
+      background: none;
+      .svg#Bitcoin_Symbol {
+        display: none;
+      }
+      .search-input {
+        padding-left: 0;
+        &:focus::-webkit-input-placeholder {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+
+  .abs-v-center {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+   }
+  .search-input {
+    background-color: transparent;
+    padding-left: 30px;
+  }
+  .separator-left {
+    border-left: 1px solid #d9d9df;
+    padding-left: 10px;
+    height: 70%;
+  }
+
+
+
+
   .bitcoin-address {
     border-top: none;
     padding-bottom: .5rem;
diff --git a/www/views/tab-send.html b/www/views/tab-send.html
index b64ed93ef..6cd42454c 100644
--- a/www/views/tab-send.html
+++ b/www/views/tab-send.html
@@ -1,15 +1,19 @@
-<ion-view id="tab-send">
+c<ion-view id="tab-send">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>{{'Send' | translate}}</ion-nav-title>
   </ion-nav-bar>
   <ion-content>
 
     <div ng-if="hasFunds">
-      <div class="item item-heading send-heading" translate>Recipient</div>
-      <div class="item item-icon-left item-icon-right input">
-        <i class="icon icon-svg left"><img src="img/icon-bitcoin-symbol.svg"></i>
-        <input type="text" placeholder="{{'Search or enter bitcoin address' | translate}}" ng-model="formData.search" ng-change="findContact(formData.search)" ng-model-onblur>
-        <i class="icon icon-svg qr" on-tap="openScanner()"><img src="img/scan-ico.svg"/></i>
+      <div class="send-header-wrapper">
+        <div class="item item-heading send-heading" translate><span>Recipient</span></div>
+        <div class="item input search-wrapper" ng-class="{'focus': searchFocus}">
+          <i class="icon icon-svg abs-v-center"><img class="svg" src="img/icon-bitcoin-symbol.svg"></i>
+          <div class="item-icon-right">
+            <input type="text" class="search-input" placeholder="{{'Search or enter bitcoin address' | translate}}" ng-model="formData.search" ng-change="findContact(formData.search)" ng-model-onblur ng-focus="searchInFocus()" ng-blur="searchBlurred()">
+            <i class="icon icon-svg qr abs-v-center separator-left" on-tap="openScanner()"><img src="img/scan-ico.svg"></i>
+          </div>
+        </div>
       </div>
     </div>
 

From c7c52f1426835c2e1df5d51e672087ba40734443 Mon Sep 17 00:00:00 2001
From: Andy Phillipson <andy@bitpay.com>
Date: Thu, 8 Jun 2017 17:44:52 -0400
Subject: [PATCH 2/4] Remove blank lines.

---
 src/sass/views/tab-send.scss | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/sass/views/tab-send.scss b/src/sass/views/tab-send.scss
index cf6da856a..8bba3cee6 100644
--- a/src/sass/views/tab-send.scss
+++ b/src/sass/views/tab-send.scss
@@ -38,9 +38,6 @@
     padding: 0 0 16px 0;
     border: none;
   }
-
-
-
   .send-header-wrapper {
     padding: 10px;
     background-color: white;
@@ -69,8 +66,6 @@
       }
     }
   }
-
-
   .abs-v-center {
     position: absolute;
     top: 50%;
@@ -85,10 +80,6 @@
     padding-left: 10px;
     height: 70%;
   }
-
-
-
-
   .bitcoin-address {
     border-top: none;
     padding-bottom: .5rem;

From ec51f8d888d5be50d39c3a32e3effcc006b3c496 Mon Sep 17 00:00:00 2001
From: Andy Phillipson <andy@bitpay.com>
Date: Thu, 8 Jun 2017 17:45:59 -0400
Subject: [PATCH 3/4] Remove typo.

---
 www/views/tab-send.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/views/tab-send.html b/www/views/tab-send.html
index 6cd42454c..d9fe9791a 100644
--- a/www/views/tab-send.html
+++ b/www/views/tab-send.html
@@ -1,4 +1,4 @@
-c<ion-view id="tab-send">
+<ion-view id="tab-send">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>{{'Send' | translate}}</ion-nav-title>
   </ion-nav-bar>

From fe12b3ae631ec530537c51adc42c6e2e23d94187 Mon Sep 17 00:00:00 2001
From: Andy Phillipson <andy@bitpay.com>
Date: Mon, 12 Jun 2017 13:01:06 -0400
Subject: [PATCH 4/4] Create tab-send.html

---
 www/views/tab-send.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/views/tab-send.html b/www/views/tab-send.html
index d9fe9791a..e217bacc2 100644
--- a/www/views/tab-send.html
+++ b/www/views/tab-send.html
@@ -6,7 +6,7 @@
 
     <div ng-if="hasFunds">
       <div class="send-header-wrapper">
-        <div class="item item-heading send-heading" translate><span>Recipient</span></div>
+        <div class="item item-heading send-heading"><span translate>Recipient</span></div>
         <div class="item input search-wrapper" ng-class="{'focus': searchFocus}">
           <i class="icon icon-svg abs-v-center"><img class="svg" src="img/icon-bitcoin-symbol.svg"></i>
           <div class="item-icon-right">