Merge pull request #6209 from ajp8164/feat/send-search-design

Feat/send search design

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)) {

src/sass/views/tab-send.scss

@@ -35,7 +35,50 @@
   .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;