DRY preview/title

css/emoji-picker.css

@@ -14,7 +14,6 @@
 
 .emoji-picker-bar {
   background-color: #f4f4f4;
-  padding: 12px;
 }
 .emoji-picker-bar:first-child {
   border-top-left-radius: 5px;
@@ -126,5 +125,4 @@
 .emoji-picker-title-label {
   font-size: 26px;
   font-weight: 500;
-  margin-left: .4em;
 }

src/components/picker.js

@@ -100,7 +100,7 @@ export default class Picker extends React.Component {
         })}
       </div>
 
-      <div className='emoji-picker-bar emoji-picker-preview'>
+      <div className='emoji-picker-bar'>
         <Preview
           ref='preview'
           emojiProps={{

src/components/preview.js

@@ -12,7 +12,7 @@ export default class Preview extends React.Component {
         { emojiProps } = this.props
 
     if (emoji) {
-      return <div>
+      return <div className='emoji-picker-preview'>
         <div className='emoji-picker-preview-emoji'>
           <Emoji
             key={emoji.short_name || emoji}
@@ -31,16 +31,19 @@ export default class Preview extends React.Component {
         </div>
       </div>
     } else {
-      return <div className='emoji-picker-title'>
+      return <div className='emoji-picker-preview'>
-        <Emoji
+        <div className='emoji-picker-preview-emoji'>
-          {...emojiProps}
+          <Emoji
-          emoji='tophat'
+            emoji='tophat'
-          size={46}
+            {...emojiProps}
-        />
+          />
+        </div>
 
-        <span className='emoji-picker-title-label'>
+        <div className='emoji-picker-preview-data'>
-          EmojiPicker
+          <span className='emoji-picker-title-label'>
-        </span>
+            EmojiPicker
+          </span>
+        </div>
       </div>
     }
   }