From f07c0c063860ecf54ad4878c5ba4420ef512063f Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etiennelemay21@gmail.com>
Date: Tue, 18 Apr 2017 11:20:17 -0400
Subject: [PATCH] =?UTF-8?q?Update=20=E2=80=9CNo=20Emoji=20Found=E2=80=9D?=
 =?UTF-8?q?=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                  |  2 +-
 css/emoji-mart.css         | 14 ++++++++------
 src/components/category.js | 28 +++++++++++++++-------------
 src/components/picker.js   |  2 +-
 4 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index f47d2582b..170660e2f 100644
--- a/README.md
+++ b/README.md
@@ -41,7 +41,7 @@ import { Picker } from 'emoji-mart'
 #### I18n
 ```js
 search: 'Search',
-notfound: 'No emoji found',
+notfound: 'No Emoji Found',
 categories: {
   search: 'Search Results',
   recent: 'Frequently Used',
diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index 37fc3dc22..dd4960d8f 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -104,9 +104,6 @@
   background-color: #f4f4f4;
   border-radius: 100%;
 }
-.emoji-mart-no-results .emoji-mart-emoji:hover:before {
-  content: none;
-}
 
 .emoji-mart-category-label {
   z-index: 2;
@@ -137,9 +134,14 @@
   padding-top: 70px;
   color: #858585;
 }
-.emoji-mart-no-results span {
-  display: inline-block;
-  vertical-align: middle;
+.emoji-mart-no-results .emoji-mart-category-label {
+  display: none;
+}
+.emoji-mart-no-results .emoji-mart-no-results-label {
+  margin-top: .2em;
+}
+.emoji-mart-no-results .emoji-mart-emoji:hover:before {
+  content: none;
 }
 
 .emoji-mart-preview {
diff --git a/src/components/category.js b/src/components/category.js
index 94b8a998c..21255d7cf 100644
--- a/src/components/category.js
+++ b/src/components/category.js
@@ -118,7 +118,7 @@ export default class Category extends React.Component {
       }
     }
 
-    return <div ref='container' className='emoji-mart-category' style={containerStyles}>
+    return <div ref='container' className={`emoji-mart-category ${emojis && !emojis.length ? 'emoji-mart-no-results' : ''}`} style={containerStyles}>
       <div style={labelStyles} data-name={name} className='emoji-mart-category-label'>
         <span style={labelSpanStyles} ref='label'>{i18n.categories[name.toLowerCase()]}</span>
       </div>
@@ -132,19 +132,21 @@ export default class Category extends React.Component {
       )}
 
       {emojis && !emojis.length &&
-        <div className='emoji-mart-no-results'>
-          <Emoji
-            {...emojiProps}
-            size={22}
-            emoji='sleuth_or_spy'
-            onOver={null}
-            onLeave={null}
-            onClick={null}
-          />
-
-          <span className='emoji-mart-no-results-label'>
+        <div>
+          <div>
+            <Emoji
+              {...emojiProps}
+              size={38}
+              emoji='sleuth_or_spy'
+              onOver={null}
+              onLeave={null}
+              onClick={null}
+            />
+          </div>
+
+          <div className='emoji-mart-no-results-label'>
             {i18n.notfound}
-          </span>
+          </div>
         </div>
       }
     </div>
diff --git a/src/components/picker.js b/src/components/picker.js
index 4a1d6feb7..f6f03a36d 100644
--- a/src/components/picker.js
+++ b/src/components/picker.js
@@ -14,7 +14,7 @@ const SEARCH_CATEGORY = { name: 'Search', emojis: null, anchor: false }
 
 const I18N = {
   search: 'Search',
-  notfound: 'No emoji found',
+  notfound: 'No Emoji Found',
   categories: {
     search: 'Search Results',
     recent: 'Frequently Used',