From 826d4c4301ba57bdab549f8309e539e9e39d7cf3 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Tue, 12 Apr 2016 18:00:33 -0700
Subject: [PATCH] Add magnifying glass to search field // Fixes #737

// FREEBIE
---
 background.html          |  1 +
 stylesheets/_index.scss  | 22 ++++++++++++++++++++--
 stylesheets/manifest.css | 22 +++++++++++++++++++---
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/background.html b/background.html
index 4fde50b8..0a4b3562 100644
--- a/background.html
+++ b/background.html
@@ -21,6 +21,7 @@
           <h1>Signal</h1>
           <div class='tool-bar clearfix'>
             <input type='search' class='search' placeholder='{{ searchForPeopleOrGroups }}'>
+            <span class='search-icon'></span>
           </div>
         </div>
         <div class='content'>
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index 3f7a5a2f..ca02380f 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -85,17 +85,35 @@
   border-color: rgba(0,0,0,0.05);
 }
 
+.tool-bar {
+  position: relative;
+  .search-icon {
+    content: '';
+    display: inline-block;
+    float: left;
+    width: 24px;
+    height: 100%;
+    -webkit-mask: url('/images/search.svg') no-repeat left center;
+    -webkit-mask-size: 100%;
+    background-color: #ccc;
+    position: absolute;
+    left: 20px;
+    top: 0;
+  }
+}
+
 input.search {
   border: none;
-  padding: 0;
+  padding: 0 10px 0 65px;
   margin: 0;
   outline: 0;
   height: $search-height;
+  line-height: $search-height;
   width: 100%;
-  padding: 10px;
   border: solid 1px $grey_l;
   outline-offset: -2px;
   font-size: inherit;
+  position: relative;
 
   &.active {
     outline: solid 1px $blue;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index bd641313..e4565351 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -561,17 +561,33 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
   color: #454545;
   border-color: rgba(0, 0, 0, 0.05); }
 
+.tool-bar {
+  position: relative; }
+  .tool-bar .search-icon {
+    content: '';
+    display: inline-block;
+    float: left;
+    width: 24px;
+    height: 100%;
+    -webkit-mask: url("/images/search.svg") no-repeat left center;
+    -webkit-mask-size: 100%;
+    background-color: #ccc;
+    position: absolute;
+    left: 20px;
+    top: 0; }
+
 input.search {
   border: none;
-  padding: 0;
+  padding: 0 10px 0 65px;
   margin: 0;
   outline: 0;
   height: 36px;
+  line-height: 36px;
   width: 100%;
-  padding: 10px;
   border: solid 1px #f3f3f3;
   outline-offset: -2px;
-  font-size: inherit; }
+  font-size: inherit;
+  position: relative; }
   input.search.active {
     outline: solid 1px #2090ea; }
   input.search::-webkit-search-cancel-button {