Update “No Emoji Found” layout

missive · Apr 18, 2017 · f07c0c0 · f07c0c0
1 parent b1d5c70
commit f07c0c0
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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',