diff --git a/src/components/common/PremiumIcon.scss b/src/components/common/PremiumIcon.scss index 3a0ff4e87..2ae75e870 100644 --- a/src/components/common/PremiumIcon.scss +++ b/src/components/common/PremiumIcon.scss @@ -16,8 +16,9 @@ height: 100%; } - &:not(.gradient) { - transform: translateY(-2px); + &:not(.gradient) > svg { + position: relative; + top: -2px; } &.clickable { diff --git a/src/components/middle/message/Message.scss b/src/components/middle/message/Message.scss index 7ff3ff144..f04888640 100644 --- a/src/components/middle/message/Message.scss +++ b/src/components/middle/message/Message.scss @@ -47,7 +47,8 @@ } > .Avatar, - > .message-content-wrapper { + > .message-content-wrapper, + > .chat-avatar-premium { opacity: 1; transform: scale(1) translateX(0); transition: transform var(--select-transition); @@ -72,11 +73,15 @@ & > .chat-avatar-premium { position: absolute; - bottom: 0.1875rem; + bottom: -0.1875rem; left: 1.25rem; height: 0.75rem; z-index: 1; + & > svg { + position: absolute; + } + --color-fill: white; @media (max-width: 600px) { @@ -293,7 +298,8 @@ &:not(.own) { > .Avatar, - > .message-content-wrapper { + > .message-content-wrapper, + > .chat-avatar-premium { transform: translateX(2.5rem); } }