Improve emoji picker look (#1493)

* Improve emoji picker look

* Add hover animation to emojis in picker

2 files changed, 58 insertions, 26 deletions

diff --git a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx
index fa577ce26..36e97df41 100644
--- a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx
+++ b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx
@@ -46,7 +46,7 @@ const EmojiPickerDropdown = React.createClass({
           <img draggable="false" className="emojione" alt="🙂" src="/emoji/1f602.svg" />
         </DropdownTrigger>
 
-        <DropdownContent className='dropdown__left'>
+        <DropdownContent className='dropdown__left light'>
           <EmojiPicker emojione={settings} onChange={this.handleChange} search={true} />
         </DropdownContent>
       </Dropdown>
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index d7473eddb..8e4a667e3 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -704,6 +704,12 @@ a.status__content__spoiler-link {
     left: 8px;
   }
 
+  &.light {
+    &:before {
+      border-color: transparent transparent $color5 transparent;
+    }
+  }
+
   & > ul {
     list-style: none;
     background: $color2;
@@ -721,7 +727,7 @@ a.status__content__spoiler-link {
     }
 
     & > .emoji-dialog {
-      left: -249px;
+      left: -210px;
     }
   }
 
@@ -1468,14 +1474,14 @@ button.icon-button.active i.fa-retweet {
 }
 
 .emoji-dialog {
-  width: 280px;
-  height: 220px;
-  background: darken($color3, 10%);
+  width: 245px;
+  height: 270px;
+  background: $color5;
   box-sizing: border-box;
-  border-radius: 2px;
+  border-radius: 4px;
   overflow: hidden;
   position: relative;
-  box-shadow: 0 0 15px rgba($color8, 0.4);
+  box-shadow: 0 0 8px rgba($color8, 0.2);
 
   .emojione {
     margin: 0;
@@ -1485,7 +1491,6 @@ button.icon-button.active i.fa-retweet {
 
   .emoji-dialog-header {
     padding: 0 10px;
-    background-color: $color3;
 
     ul {
       padding: 0;
@@ -1496,18 +1501,29 @@ button.icon-button.active i.fa-retweet {
     li {
       display: inline-block;
       box-sizing: border-box;
-      height: 42px;
-      padding: 9px 5px;
+      padding: 10px 5px;
       cursor: pointer;
+      border-bottom: 2px solid transparent;
+
+      .emoji {
+        width: 18px;
+        height: 18px;
+      }
 
       img, svg {
-        width: 22px;
-        height: 22px;
+        width: 18px;
+        height: 18px;
         filter: grayscale(100%);
       }
 
+      &:hover {
+        img, svg {
+          filter: grayscale(0);
+        }
+      }
+
       &.active {
-        background: lighten($color3, 6%);
+        border-bottom-color: $color4;
 
         img, svg {
           filter: grayscale(0);
@@ -1531,7 +1547,7 @@ button.icon-button.active i.fa-retweet {
   .emoji-category-header {
     box-sizing: border-box;
     overflow-y: hidden;
-    padding: 8px 16px 0;
+    padding: 10px 8px 10px 16px;
     display: table;
 
     > * {
@@ -1541,10 +1557,10 @@ button.icon-button.active i.fa-retweet {
   }
 
   .emoji-category-title {
-    font-size: 14px;
-    font-family: sans-serif;
-    font-weight: normal;
-    color: $color1;
+    font-size: 12px;
+    text-transform: uppercase;
+    font-weight: 500;
+    color: darken($color2, 18%);
     cursor: default;
   }
 
@@ -1584,7 +1600,7 @@ button.icon-button.active i.fa-retweet {
         width: 7px;
         height: 7px;
         border-radius: 10px;
-        border: 2px solid $color1;
+        border: 2px solid $color5;
         top: 2px;
         left: 2px;
       }
@@ -1592,14 +1608,20 @@ button.icon-button.active i.fa-retweet {
   }
 
   .emoji-search-wrapper {
-    padding: 6px 16px;
+    padding: 10px;
+    border-bottom: 1px solid lighten($color2, 4%);
   }
 
   .emoji-search {
-    font-size: 12px;
-    padding: 6px 4px;
+    font-size: 14px;
+    font-weight: 400;
+    padding: 7px 9px;
+    font-family: inherit;
+    display: block;
     width: 100%;
-    border: 1px solid #ddd;
+    background: rgba($color2, 0.3);
+    color: darken($color2, 18%);
+    border: 1px solid $color2;
     border-radius: 4px;
   }
 
@@ -1612,11 +1634,21 @@ button.icon-button.active i.fa-retweet {
   }
 
   .emoji-search-wrapper + .emoji-categories-wrapper {
-    top: 83px;
+    top: 93px;
   }
 
-  .emoji-row .emoji:hover {
-    background: lighten($color2, 3%);
+  .emoji-row .emoji {
+    img, svg {
+      transition: transform 60ms ease-in-out;
+    }
+
+    &:hover {
+      background: lighten($color2, 3%);
+
+      img, svg {
+        transform: translateZ(0) scale(1.2);
+      }
+    }
   }
 
   .emoji {