PLT-5897: Respect intrinsic ratio of img in emoji picker (#5987)

Changed style of img emoji picker, also fixed preview of emoji.

4 files changed, 46 insertions, 23 deletions

diff --git a/webapp/components/emoji_picker/components/emoji_picker_item.jsx b/webapp/components/emoji_picker/components/emoji_picker_item.jsx
index c7981c952..dee08e638 100644
--- a/webapp/components/emoji_picker/components/emoji_picker_item.jsx
+++ b/webapp/components/emoji_picker/components/emoji_picker_item.jsx
@@ -44,12 +44,14 @@ export default class EmojiPickerItem extends React.Component {
 
         if (this.props.category === 'recent' || this.props.category === 'custom') {
             item =
-                (<span>
+                (<span
+                    onMouseOver={this.handleMouseOver}
+                    onMouseOut={this.handleMouseOut}
+                    onClick={this.handleClick}
+                    className='emoji-picker__item-wrapper'
+                 >
                     <img
                         className='emoji-picker__item emoticon'
-                        onMouseOver={this.handleMouseOver}
-                        onMouseOut={this.handleMouseOut}
-                        onClick={this.handleClick}
                         src={EmojiStore.getEmojiImageUrl(this.props.emoji)}
                     />
                 </span>);
diff --git a/webapp/components/emoji_picker/components/emoji_picker_preview.jsx b/webapp/components/emoji_picker/components/emoji_picker_preview.jsx
index 24acf9668..79ec91441 100644
--- a/webapp/components/emoji_picker/components/emoji_picker_preview.jsx
+++ b/webapp/components/emoji_picker/components/emoji_picker_preview.jsx
@@ -44,7 +44,7 @@ export default class EmojiPickerPreview extends React.Component {
                     <div className='emoji-picker__preview-image-box'>
                         {previewImage}
                     </div>
-                    <div className='emoji-picker__preview-detail-box'>
+                    <div className='emoji-picker__preview-image-label-box'>
                         <span className='emoji-picker__preview-name'>{name}</span>
                         <span
                             className='emoji-picker__preview-aliases'
diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss
index df4bbc158..ebbd222d9 100644
--- a/webapp/sass/components/_emoticons.scss
+++ b/webapp/sass/components/_emoticons.scss
@@ -230,15 +230,26 @@
             width: 21px;
             padding: 0px;
             border: 0px;
+            text-align: center;
+            border-radius: 6px;
+            overflow: hidden;
+            cursor: pointer;
         }
     }
 
     .emoji-picker__item {
-        border-radius: 6px;
-        cursor: pointer;
         font-size: 18px;
         margin: 3px;
     }
+    .emoticon {
+        max-height: 21px;
+        max-width: 21px;
+        min-height: 0;
+        min-width: 0;
+        width: auto;
+        height: auto;
+        margin: 0 auto;
+    }
 }
 
 .emojisprite-wrapper {
@@ -247,7 +258,11 @@
 
 .emoji-picker__preview {
     border-top: 1px solid;
-    display: table-cell;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    vertical-align: middle;
     flex-grow: 0;
     flex-shrink: 0;
     height: 45px;
@@ -264,9 +279,29 @@
         vertical-align: middle;
     }
 
+    .emoji-picker__preview-image-label-box {
+        margin-left: 3px;
+        .emoji-picker__preview-name {
+            font-size: 13px;
+            font-weight: bold;
+        }
+
+        .emoji-picker__preview-aliases {
+            display: block;
+            font-size: 12px;
+
+            font-weight: bold;
+        }
+    }
     .emoji-picker__preview-image-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         height: 36px;
+        max-height: 36px;
         width: 42px;
+        max-width: 42px;
+        text-align: center;
 
         .sprite-preview {
             border: none;
@@ -281,20 +316,6 @@
     .emoji-picker__preview-image {
         max-height: 36px;
         max-width: 42px;
-        padding: 0 10px 0 0;
-
     }
 
-    .emoji-picker__preview-name {
-
-        font-size: 13px;
-        font-weight: bold;
-    }
-
-    .emoji-picker__preview-aliases {
-        display: block;
-        font-size: 12px;
-
-        font-weight: bold;
-    }
 }
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 9a4f5c21f..a252ea646 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -682,7 +682,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .emoji-picker__preview', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .emoji-picker__category, .app__body .emoji-picker__category:focus, .app__body .emoji-picker__category:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.3));
         changeCss('.app__body .emoji-picker__category--selected, .app__body .emoji-picker__category--selected:focus, .app__body .emoji-picker__category--selected:hover', 'color:' + theme.centerChannelColor);
-        changeCss('.app__body .emoji-picker__item:hover', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.8));
+        changeCss('.app__body .emoji-picker__item-wrapper:hover', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.8));
         changeCss('.app__body .emojisprite:hover', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.8));
         changeCss('.app__body .icon__postcontent_picker:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
     }