Custom Emoji: Adjust sizes (again) (#2142)

src/components/common/hooks/useAnimatedEmoji.ts

@@ -8,10 +8,11 @@ import type { ActiveEmojiInteraction } from '../../../global/types';
 import safePlay from '../../../util/safePlay';
 import { selectLocalAnimatedEmojiEffectByName } from '../../../global/selectors';
 import buildStyle from '../../../util/buildStyle';
+import { REM } from '../helpers/mediaDimensions';
 
 import useMedia from '../../../hooks/useMedia';
 
-const SIZE = 104;
+const SIZE = 7 * REM;
 const INTERACTION_BUNCH_TIME = 1000;
 const MS_DIVIDER = 1000;
 const TIME_DEFAULT = 0;

src/components/middle/composer/helpers/customEmoji.ts

@@ -39,6 +39,7 @@ export function getCustomEmojiSize(maxEmojisInLine?: number): number | undefined
   if (!maxEmojisInLine) return undefined;
 
   // Should be the same as in _message-content.scss
-  if (maxEmojisInLine > EMOJI_SIZES) return REM * 2.25;
-  return (6 - (maxEmojisInLine * 0.5)) * REM;
+  if (maxEmojisInLine > EMOJI_SIZES) return 2.25 * REM;
+  if (maxEmojisInLine === 1) return 7 * REM;
+  return Math.min(7.5 - (maxEmojisInLine * 0.75), 4) * REM;
 }

src/components/middle/message/AnimatedCustomEmoji.tsx

@@ -23,7 +23,6 @@ type OwnProps = {
   customEmojiId: string;
   withEffects: boolean;
   isOwn?: boolean;
-  size?: 'large' | 'medium' | 'small';
   lastSyncTime?: number;
   forceLoadPreview?: boolean;
   messageId?: number;

src/components/middle/message/AnimatedEmoji.tsx

@@ -29,7 +29,6 @@ type OwnProps = {
   withEffects: boolean;
   isOwn?: boolean;
   observeIntersection?: ObserveFn;
-  size?: 'large' | 'medium' | 'small';
   lastSyncTime?: number;
   forceLoadPreview?: boolean;
   messageId?: number;

src/components/middle/message/_message-content.scss

@@ -738,12 +738,16 @@
 
   @for $i from 1 through 7 {
     &.emoji-only-#{$i} {
-      $size: 6 - ($i * 0.5) + rem;
+      $size: min(7.5 - ($i * 0.75), 4) + rem;
 
       --emoji-only-size: #{$size};
     }
   }
 
+  &.emoji-only-1 {
+    --emoji-only-size: 7rem;
+  }
+
   .Message:not(.own) & {
     --hover-color: var(--color-reply-hover);
     --active-color: var(--color-reply-active);