From 69a52cca83eee25af971cb6f5d837dabd93f60e6 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 19 Jul 2017 20:20:52 +0200
Subject: [PATCH] improve emoji picker filter style

---
 .../templates/emoji-picker.raw.hbs.erb        |  1 +
 app/assets/stylesheets/common/base/emoji.scss | 21 ++++++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb b/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb
index 990f94b4762..e5f8a72139e 100644
--- a/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb
+++ b/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb
@@ -24,6 +24,7 @@
 
 <div class='main-column'>
   <div class='filter'>
+    {{fa-icon 'search'}}
     <input type='text' name="filter" placeholder="{{i18n 'emoji_picker.filter_placeholder'}}" autocomplete="off" autofocus/>
     <button class='clear-filter'>
       {{fa-icon 'times'}}
diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss
index ce7454d6c0c..453c1afbb62 100644
--- a/app/assets/stylesheets/common/base/emoji.scss
+++ b/app/assets/stylesheets/common/base/emoji.scss
@@ -163,19 +163,34 @@ body img.emoji {
 }
 
 .emoji-picker .filter {
-  background-color: #e9e9e9;
+  background-color: none;
   border-bottom: 1px solid #e9e9e9;
   padding: 5px;
   display: flex;
   position: relative;
+  align-items: center;
+}
+
+.emoji-picker .filter .fa.fa-search {
+  color: $primary;
+  font-size: 16px;
+  margin-left: 5px;
+  margin-right: 5px;
 }
 
 .emoji-picker .filter input {
   height: 24px;
   margin: 0;
   flex: 1;
-  border: 1px solid #e9e9e9;
+  border: none;
+  box-shadow: none;
   padding-right: 24px;
+  outline: none;
+
+  &:focus {
+    border: none;
+    box-shadow: none;
+  }
 }
 
 .emoji-picker .filter input::-ms-clear {
@@ -197,7 +212,7 @@ body img.emoji {
 
 .emoji-picker .filter .clear-filter {
   position: absolute;
-  right: 10px;
+  right: 5px;
   top: 12px;
   border: 0;
   background: none;