diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index c40253ac6c..4e6b0f571c 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -84,6 +84,21 @@ } } +@keyframes module-message__highlight { + 0% { + filter: none; + } + 33% { + filter: brightness(50%); + } + 66% { + filter: brightness(50%); + } + 100% { + filter: none; + } +} + .module-message--outgoing { flex-direction: row-reverse; } @@ -143,7 +158,7 @@ .module-message--selected & { @include mouse-mode { - background-color: $color-ultramarine; + background-color: $color-gray-60; } @include dark-mouse-mode { background-color: $color-white; @@ -152,7 +167,7 @@ .module-message:focus & { @include keyboard-mode { - background-color: $color-ultramarine; + background-color: $color-gray-60; } @include dark-keyboard-mode { background-color: $color-white; @@ -298,12 +313,9 @@ } } -.module-message--selected { +.module-message__container--selected { @include mouse-mode { - background: $color-selected-message-background-light; - } - @include dark-mouse-mode { - background: $color-selected-message-background-dark; + animation: module-message__highlight 1.2s linear; } } @@ -317,7 +329,7 @@ } .module-message__container--emoji { - padding-top: 0; + padding-top: 4px; .module-message__text--outgoing { text-align: right; diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index d70fa21289..abcc823e82 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -110,7 +110,8 @@ const EXPIRED_DELAY = 600; const GROUP_AVATAR_SIZE = AvatarSize.TWENTY_EIGHT; const STICKER_SIZE = 200; const GIF_SIZE = 300; -const SELECTED_TIMEOUT = 1000; +// Note: this needs to match the animation time +const SELECTED_TIMEOUT = 1200; const THREE_HOURS = 3 * 60 * 60 * 1000; const SENT_STATUSES = new Set([ 'delivered', @@ -2583,9 +2584,7 @@ export class Message extends React.PureComponent { const containerClassnames = classNames( 'module-message__container', isGIF(attachments) ? 'module-message__container--gif' : null, - isSelected && !isStickerLike - ? 'module-message__container--selected' - : null, + isSelected ? 'module-message__container--selected' : null, !isStickerLike ? `module-message__container--${direction}` : null, isEmojiOnly ? 'module-message__container--emoji' : null, isTapToView ? 'module-message__container--with-tap-to-view' : null, diff --git a/ts/jobs/helpers/sendGroupUpdate.ts b/ts/jobs/helpers/sendGroupUpdate.ts index ee973267d1..982324e670 100644 --- a/ts/jobs/helpers/sendGroupUpdate.ts +++ b/ts/jobs/helpers/sendGroupUpdate.ts @@ -60,7 +60,7 @@ export async function sendGroupUpdate( untrustedConversationIds, }); throw new Error( - `Delete for everyone blocked because ${untrustedConversationIds.length} conversation(s) were untrusted. Failing this attempt.` + `Group update blocked because ${untrustedConversationIds.length} conversation(s) were untrusted. Failing this attempt.` ); }