[MM-27420] Add enlarged emojis to tooltips for custom statuses (#27478)

webapp/channels/src/components/custom_status/custom_status.scss

@@ -270,8 +270,9 @@
         display: inline-block;
 
         &-expiry {
+            color: rgba(255, 255, 255, 0.72);
+            font-size: 11px;
             font-weight: 400;
-            opacity: 0.7;
         }
     }
 }

webapp/channels/src/components/custom_status/custom_status_emoji.tsx

@@ -1,20 +1,17 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useMemo, memo} from 'react';
+import React, {memo, useEffect, useMemo, useRef, useState} from 'react';
 import {useSelector} from 'react-redux';
 
 import {CustomStatusDuration} from '@mattermost/types/users';
 
 import {getCurrentTimezone} from 'mattermost-redux/selectors/entities/timezone';
 
-import {makeGetCustomStatus, isCustomStatusEnabled, isCustomStatusExpired} from 'selectors/views/custom_status';
+import {isCustomStatusEnabled, isCustomStatusExpired, makeGetCustomStatus} from 'selectors/views/custom_status';
 
 import RenderEmoji from 'components/emoji/render_emoji';
-import OverlayTrigger from 'components/overlay_trigger';
+import WithTooltip from 'components/with_tooltip';
-import Tooltip from 'components/tooltip';
-
-import Constants from 'utils/constants';
 
 import type {GlobalState} from 'types/store';
 
@@ -33,10 +30,10 @@ interface Props {
 function CustomStatusEmoji({
     emojiSize = 16,
     showTooltip = false,
-    tooltipDirection = 'top',
     spanStyle = {},
     emojiStyle = {
         marginLeft: 4,
+        marginTop: -1,
     },
     userID = '',
     onClick,
@@ -48,6 +45,37 @@ function CustomStatusEmoji({
 
     const customStatusExpired = useSelector((state: GlobalState) => isCustomStatusExpired(state, customStatus));
     const customStatusEnabled = useSelector(isCustomStatusEnabled);
+
+    const [placement, setPlacement] = useState('bottom');
+    const emojiRef = useRef<HTMLSpanElement>(null);
+
+    useEffect(() => {
+        function handleMouseEnter() {
+            if (emojiRef.current) {
+                const boundingRect = emojiRef.current.getBoundingClientRect();
+                const windowHeight = window.innerHeight;
+                const threshold = windowHeight * 0.8;
+
+                if (boundingRect.bottom >= threshold) {
+                    setPlacement('top');
+                } else {
+                    setPlacement('bottom');
+                }
+            }
+        }
+
+        const emojiElement = emojiRef.current;
+        if (emojiElement) {
+            emojiElement.addEventListener('mouseenter', handleMouseEnter);
+        }
+
+        return () => {
+            if (emojiElement) {
+                emojiElement.removeEventListener('mouseenter', handleMouseEnter);
+            }
+        };
+    }, []);
+
     if (!customStatusEnabled || !customStatus?.emoji || customStatusExpired) {
         return null;
     }
@@ -66,29 +94,21 @@ function CustomStatusEmoji({
     }
 
     return (
-        <OverlayTrigger
+        <WithTooltip
-            delayShow={Constants.OVERLAY_TIME_DELAY}
+            id='custom-status-tooltip'
-            placement={tooltipDirection}
+            title={
-            overlay={
+                <>
-                <Tooltip id='custom-status-tooltip'>
                     <div className='custom-status'>
-                        <RenderEmoji
+                        {customStatus.text && (
-                            emojiName={customStatus.emoji}
-                            size={14}
-                            emojiStyle={{
-                                marginTop: -1,
-                            }}
-                        />
-                        {customStatus.text &&
                             <span
                                 className='custom-status-text'
                                 style={{marginLeft: 5}}
                             >
                                 {customStatus.text}
                             </span>
-                        }
+                        )}
                     </div>
-                    {customStatus.expires_at && customStatus.duration !== CustomStatusDuration.DONT_CLEAR &&
+                    {customStatus.expires_at && customStatus.duration !== CustomStatusDuration.DONT_CLEAR && (
                         <div>
                             <ExpiryTime
                                 time={customStatus.expires_at}
@@ -96,14 +116,20 @@ function CustomStatusEmoji({
                                 className='custom-status-expiry'
                             />
                         </div>
-                    }
+                    )}
-                </Tooltip>
+                </>
             }
+            emoji={customStatus.emoji}
+            emojiStyle='large'
+            placement={placement}
         >
-            <span style={spanStyle}>
+            <span
+                ref={emojiRef}
+                style={spanStyle}
+            >
                 {statusEmoji}
             </span>
-        </OverlayTrigger>
+        </WithTooltip>
     );
 }