Update “No Emoji Found” layout

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',

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 {
+.emoji-mart-no-results .emoji-mart-category-label {
-  display: inline-block;
+  display: none;
-  vertical-align: middle;
+}
+.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 {

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'>
+        <div>
-          <Emoji
+          <div>
-            {...emojiProps}
+            <Emoji
-            size={22}
+              {...emojiProps}
-            emoji='sleuth_or_spy'
+              size={38}
-            onOver={null}
+              emoji='sleuth_or_spy'
-            onLeave={null}
+              onOver={null}
-            onClick={null}
+              onLeave={null}
-          />
+              onClick={null}
+            />
+          </div>
 
-          <span className='emoji-mart-no-results-label'>
+          <div className='emoji-mart-no-results-label'>
             {i18n.notfound}
-          </span>
+          </div>
         </div>
       }
     </div>

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',