[MM-55293 & MM-36719] Updating emoji icon on hover and on popover (#25440)

webapp/channels/src/components/post_view/post_recent_reactions/post_recent_reactions.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import type {Emoji} from '@mattermost/types/emojis';
 
 import Permissions from 'mattermost-redux/constants/permissions';
+import {getEmojiImageUrl} from 'mattermost-redux/utils/emoji_utils';
 
 import OverlayTrigger from 'components/overlay_trigger';
 import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
@@ -100,6 +101,13 @@ export default class PostRecentReactions extends React.PureComponent<Props, Stat
                             id='post_info.emoji.tooltip'
                             className='hidden-xs'
                         >
+                            <div>
+                                <img
+                                    className='Reaction__emoji Reaction__emoji--large'
+                                    src={getEmojiImageUrl(emoji)}
+                                    width={48}
+                                />
+                            </div>
                             {this.emojiName(emoji, this.props.locale)}
                         </Tooltip>
                     }

webapp/channels/src/components/post_view/reaction/__snapshots__/reaction.test.tsx.snap

@@ -13,6 +13,12 @@ exports[`components/post_view/Reaction should apply read-only class if user does
         canAddReactions={false}
         canRemoveReactions={true}
         currentUserReacted={false}
+        emojiIcon={
+          <img
+            className="Reaction__emoji emoticon"
+            src="emoji_image_url"
+          />
+        }
         emojiName="smile"
         reactions={
           Array [
@@ -97,6 +103,12 @@ exports[`components/post_view/Reaction should apply read-only class if user does
         canAddReactions={true}
         canRemoveReactions={false}
         currentUserReacted={true}
+        emojiIcon={
+          <img
+            className="Reaction__emoji emoticon"
+            src="emoji_image_url"
+          />
+        }
         emojiName="smile"
         reactions={
           Array [
@@ -181,6 +193,12 @@ exports[`components/post_view/Reaction should match snapshot 1`] = `
         canAddReactions={true}
         canRemoveReactions={true}
         currentUserReacted={false}
+        emojiIcon={
+          <img
+            className="Reaction__emoji emoticon"
+            src="emoji_image_url"
+          />
+        }
         emojiName="smile"
         reactions={
           Array [
@@ -265,6 +283,12 @@ exports[`components/post_view/Reaction should match snapshot when a current user
         canAddReactions={true}
         canRemoveReactions={true}
         currentUserReacted={true}
+        emojiIcon={
+          <img
+            className="Reaction__emoji emoticon"
+            src="emoji_image_url"
+          />
+        }
         emojiName="smile"
         reactions={
           Array [

webapp/channels/src/components/post_view/reaction/reaction.scss

@@ -1,6 +1,14 @@
 @import 'sass/utils/mixins';
 @import 'sass/utils/functions';
 
+.reaction-emoji--large img {
+    width: 48px;
+    max-width: none;
+    height: 48px;
+    max-height: none;
+    margin: 4px 0;
+}
+
 .Reaction {
     @include button-style--none;
 
@@ -63,6 +71,14 @@
         margin: 0 2px 0 0;
         object-fit: contain;
         vertical-align: middle;
+
+        &--large {
+            width: 48px;
+            max-width: none;
+            height: 48px;
+            max-height: none;
+            margin: 4px 0;
+        }
     }
 
     &__emoji--post-menu {

webapp/channels/src/components/post_view/reaction/reaction.tsx

@@ -210,6 +210,13 @@ export default class Reaction extends React.PureComponent<Props, State> {
             ariaLabelEmoji = `${Utils.localizeMessage('reaction.removeReact.ariaLabel', 'remove reaction')} ${emojiNameWithSpaces}`;
         }
 
+        const emojiIcon = (
+            <img
+                className='Reaction__emoji emoticon'
+                src={this.props.emojiImageUrl}
+            />
+        );
+
         return (
             <OverlayTrigger
                 delayShow={500}
@@ -222,6 +229,7 @@ export default class Reaction extends React.PureComponent<Props, State> {
                             canRemoveReactions={canRemoveReactions}
                             currentUserReacted={currentUserReacted}
                             emojiName={emojiName}
+                            emojiIcon={emojiIcon}
                             reactions={reactions}
                         />
                     </Tooltip>
@@ -236,10 +244,7 @@ export default class Reaction extends React.PureComponent<Props, State> {
                     ref={this.reactionButtonRef}
                 >
                     <span className='d-flex align-items-center'>
-                        <img
+                        {emojiIcon}
-                            className='Reaction__emoji emoticon'
-                            src={this.props.emojiImageUrl}
-                        />
                         <span
                             ref={this.reactionCountRef}
                             className='Reaction__count'

webapp/channels/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx

@@ -11,6 +11,7 @@ type Props = {
     canRemoveReactions: boolean;
     currentUserReacted: boolean;
     emojiName: string;
+    emojiIcon: React.ReactNode;
     reactions: ReactionType[];
     users: string[];
 };
@@ -20,6 +21,7 @@ const ReactionTooltip: React.FC<Props> = (props: Props) => {
         canAddReactions,
         canRemoveReactions,
         currentUserReacted,
+        emojiIcon,
         emojiName,
         reactions,
         users,
@@ -130,6 +132,7 @@ const ReactionTooltip: React.FC<Props> = (props: Props) => {
 
     return (
         <>
+            <div className='reaction-emoji--large'>{emojiIcon}</div>
             {tooltip}
             <br/>
             {clickTooltip}

webapp/channels/src/sass/components/_emoticons.scss

@@ -544,6 +544,10 @@ $emoji-footer-height:  $emoji-footer-border-width + $emoji-half-height + $emoji-
     &.selected,
     &:hover {
         background-color: rgba(var(--center-channel-color-rgb), 0.16);
+
+        img {
+            transform: scale(1.35);
+        }
     }
 
     &:active {
@@ -556,6 +560,8 @@ $emoji-footer-height:  $emoji-footer-border-width + $emoji-half-height + $emoji-
 
     img {
         position: relative;
+        transform: scale(1);
+        transition: transform 0.2s ease-in-out;
 
         &.emoji-category--custom {
             top: auto;

webapp/channels/src/sass/components/_tooltip.scss

@@ -6,6 +6,10 @@
     pointer-events: none;
     word-wrap: break-word;
 
+    &.in {
+        opacity: 1;
+    }
+
     &#announcement-bar__tooltip {
         width: 50%;
         max-width: 100%;
@@ -15,6 +19,7 @@
     .tooltip-inner {
         max-width: 100%;
         padding: 4px 8px;
+        background: rgba(0, 0, 0, 0.9);
         box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
         font-size: 12px;
         font-weight: 600;
@@ -23,6 +28,18 @@
         word-break: break-word;
     }
 
+    &.top {
+        .tooltip-arrow {
+            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
+        }
+    }
+
+    &.bottom {
+        .tooltip-arrow {
+            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
+        }
+    }
+
     &.text-nowrap {
         .tooltip-inner {
             white-space: nowrap;