diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 4e6b0f571c..6f0a0e2ecd 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -99,6 +99,21 @@ } } +@keyframes module-message__highlight-lighter { + 0% { + filter: none; + } + 33% { + filter: brightness(76%); + } + 66% { + filter: brightness(76%); + } + 100% { + filter: none; + } +} + .module-message--outgoing { flex-direction: row-reverse; } @@ -315,7 +330,13 @@ .module-message__container--selected { @include mouse-mode { - animation: module-message__highlight 1.2s linear; + animation: module-message__highlight 1.2s cubic-bezier(0.17, 0.17, 0, 1); + } +} +.module-message__container--selected-lighter { + @include mouse-mode { + animation: module-message__highlight-lighter 1.2s + cubic-bezier(0.17, 0.17, 0, 1); } } diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 56608eb437..e4c7027b7c 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -2571,6 +2571,7 @@ export class Message extends React.PureComponent { isTapToView, isTapToViewExpired, isTapToViewError, + text, } = this.props; const { isSelected } = this.state; @@ -2582,10 +2583,18 @@ export class Message extends React.PureComponent { const isEmojiOnly = this.canRenderStickerLikeEmoji(); const isStickerLike = isSticker || isEmojiOnly; + // If it's a mostly-normal gray incoming text box, we don't want to darken it as much + const lighterSelect = + isSelected && + direction === 'incoming' && + !isStickerLike && + (text || (!isVideo(attachments) && !isImage(attachments))); + const containerClassnames = classNames( 'module-message__container', isGIF(attachments) ? 'module-message__container--gif' : null, isSelected ? 'module-message__container--selected' : null, + lighterSelect ? 'module-message__container--selected-lighter' : null, !isStickerLike ? `module-message__container--${direction}` : null, isEmojiOnly ? 'module-message__container--emoji' : null, isTapToView ? 'module-message__container--with-tap-to-view' : null,