diff --git a/src/components/middle/message/ReactionAnimatedEmoji.module.scss b/src/components/middle/message/ReactionAnimatedEmoji.module.scss index f6bfaf5f9..2edacca57 100644 --- a/src/components/middle/message/ReactionAnimatedEmoji.module.scss +++ b/src/components/middle/message/ReactionAnimatedEmoji.module.scss @@ -6,9 +6,9 @@ align-items: center; justify-content: center; - width: 1.125rem; - height: 1.125rem; - margin-right: 0.25rem; + width: 1.75rem; + height: 1.75rem; + margin-right: 0.125rem; z-index: 1; diff --git a/src/components/middle/message/ReactionAnimatedEmoji.tsx b/src/components/middle/message/ReactionAnimatedEmoji.tsx index a0bca089c..0f7e19798 100644 --- a/src/components/middle/message/ReactionAnimatedEmoji.tsx +++ b/src/components/middle/message/ReactionAnimatedEmoji.tsx @@ -33,8 +33,8 @@ type OwnProps = { observeIntersection?: ObserveFn; }; -const CENTER_ICON_SIZE = 1.875 * REM; -const EFFECT_SIZE = 6.25 * REM; +const CENTER_ICON_SIZE = 2.5 * REM; +const EFFECT_SIZE = 6.5 * REM; const ReactionAnimatedEmoji: FC = ({ reaction, diff --git a/src/components/middle/message/Reactions.scss b/src/components/middle/message/Reactions.scss index e38b20b63..56680a117 100644 --- a/src/components/middle/message/Reactions.scss +++ b/src/components/middle/message/Reactions.scss @@ -10,11 +10,11 @@ --reaction-background: var(--color-reaction); display: flex; flex-direction: row; - height: 1.75rem; + height: 1.875rem; white-space: nowrap; width: auto; margin: 0.125rem; - padding: 0 0.5rem; + padding: 0 0.25rem; border: 2px solid transparent; background-color: var(--reaction-background) !important; border-radius: 1.75rem; @@ -23,7 +23,11 @@ text-transform: none; color: var(--accent-color); overflow: visible; - line-height: 1.25rem; + line-height: 1.75rem; + + .ReactionStaticEmoji { + width: 1.25rem; + } .avatars { display: flex; @@ -31,8 +35,8 @@ .Avatar { margin: 0 0 0 -0.25rem; border: 0.0625rem solid var(--reaction-background); - width: 1.25rem; - height: 1.25rem; + width: 1.5rem; + height: 1.5rem; &:first-child { margin: 0;