From 49b8c2d6bed8b23c45399fc405e533030950863f Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Wed, 1 Jun 2016 15:25:45 -0400
Subject: [PATCH] DRY preview/title

---
 css/emoji-picker.css      |  2 --
 src/components/picker.js  |  2 +-
 src/components/preview.js | 23 +++++++++++++----------
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/css/emoji-picker.css b/css/emoji-picker.css
index 73f48ca..49a516d 100644
--- a/css/emoji-picker.css
+++ b/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;
 }
diff --git a/src/components/picker.js b/src/components/picker.js
index 9cb9583..67b7735 100644
--- a/src/components/picker.js
+++ b/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={{
diff --git a/src/components/preview.js b/src/components/preview.js
index 7f34621..f6c31f1 100644
--- a/src/components/preview.js
+++ b/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'>
-        <Emoji
-          {...emojiProps}
-          emoji='tophat'
-          size={46}
-        />
+      return <div className='emoji-picker-preview'>
+        <div className='emoji-picker-preview-emoji'>
+          <Emoji
+            emoji='tophat'
+            {...emojiProps}
+          />
+        </div>
 
-        <span className='emoji-picker-title-label'>
-          EmojiPicker
-        </span>
+        <div className='emoji-picker-preview-data'>
+          <span className='emoji-picker-title-label'>
+            EmojiPicker
+          </span>
+        </div>
       </div>
     }
   }