Timeline: Spacing and message selection tweaks

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;

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<MessageStatusType>([
   'delivered',
@@ -2583,9 +2584,7 @@ export class Message extends React.PureComponent<Props, State> {
     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,

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.`
     );
   }