diff --git a/src/components/common/hooks/useAnimatedEmoji.ts b/src/components/common/hooks/useAnimatedEmoji.ts index e8a84cd80..be46e3581 100644 --- a/src/components/common/hooks/useAnimatedEmoji.ts +++ b/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; diff --git a/src/components/middle/composer/helpers/customEmoji.ts b/src/components/middle/composer/helpers/customEmoji.ts index e67303579..9cacd0e1f 100644 --- a/src/components/middle/composer/helpers/customEmoji.ts +++ b/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; } diff --git a/src/components/middle/message/AnimatedCustomEmoji.tsx b/src/components/middle/message/AnimatedCustomEmoji.tsx index e4280fafc..8f361f9de 100644 --- a/src/components/middle/message/AnimatedCustomEmoji.tsx +++ b/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; diff --git a/src/components/middle/message/AnimatedEmoji.tsx b/src/components/middle/message/AnimatedEmoji.tsx index a65bfac84..c37d6283a 100644 --- a/src/components/middle/message/AnimatedEmoji.tsx +++ b/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; diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index 5b5c392ae..c4e0acf8b 100644 --- a/src/components/middle/message/_message-content.scss +++ b/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);