update quoted message to animate to have border-green instead of bg green

stylesheets/_quote.scss

@@ -274,16 +274,17 @@
 // animate when user is scrolling to a quoted message
 @keyframes blinker {
   0% {
-    background-color: subtle($session-color-green);
+    border-color: rgba($session-color-green, 1);
   }
-  50% {
+  80% {
-    background-color: subtle($session-color-green);
+    border-color: rgba($session-color-green, 1);
   }
   100% {
-    background-color: none;
+    border-color: transparent;
   }
 }
 
 .flash-green-once {
+  border-color: $session-color-green;
   animation: blinker 2s 1 normal forwards;
 }

stylesheets/_session.scss

@@ -331,6 +331,9 @@ pre {
   // To limit messages with things forcing them wider, like long attachment names
   max-width: calc(100vw - 380px - 100px);
   align-items: center;
+  border-style: solid;
+  border-color: transparent;
+  border-width: 3px;
 }
 label {
   user-select: none;

ts/components/conversation/message/message-content/MessageContent.tsx

@@ -8,6 +8,7 @@ import { MessageRenderingProps, QuoteClickOptions } from '../../../../models/mes
 import {
   getMessageContentSelectorProps,
   getMessageTextProps,
+  getQuotedMessageToAnimate,
 } from '../../../../state/selectors/conversations';
 import {
   canDisplayImage,
@@ -135,10 +136,13 @@ export const MessageContent = (props: Props) => {
   } = contentProps;
 
   const selectedMsg = useSelector(state => getMessageTextProps(state as any, props.messageId));
+  const quotedMessageToAnimate = useSelector(getQuotedMessageToAnimate);
+
   let isDeleted = false;
   if (selectedMsg && selectedMsg.isDeleted !== undefined) {
     isDeleted = selectedMsg.isDeleted;
   }
+  const isQuotedMessageToAnimate = quotedMessageToAnimate === props.messageId;
 
   const width = getWidth({ previews, attachments });
   const isShowingImage = getIsShowingImage({ attachments, imageBroken, previews, text });
@@ -162,7 +166,8 @@ export const MessageContent = (props: Props) => {
           : '',
         lastMessageOfSeries || props.isDetailView
           ? `module-message__container--${direction}--last-of-series`
-          : ''
+          : '',
+        isQuotedMessageToAnimate && 'flash-green-once'
       )}
       style={{
         width: isShowingImage ? width : undefined,

ts/components/conversation/message/message-item/GenericReadableMessage.tsx

@@ -115,7 +115,6 @@ export const GenericReadableMessage = (props: Props) => {
   };
   const { isExpired } = useIsExpired(expiringProps);
 
-  const quotedMessageToAnimate = useSelector(getQuotedMessageToAnimate);
   const isMessageSelected = useSelector(state =>
     getIsMessageSelected(state as any, props.messageId)
   );
@@ -156,7 +155,6 @@ export const GenericReadableMessage = (props: Props) => {
 
   const selected = isMessageSelected || false;
   const isGroup = conversationType === 'group';
-  const isQuotedMessageToAnimate = quotedMessageToAnimate === messageId;
   const isIncoming = direction === 'incoming';
 
   return (
@@ -166,7 +164,6 @@ export const GenericReadableMessage = (props: Props) => {
         'session-message-wrapper',
         selected && 'message-selected',
         isGroup && 'public-chat-message-wrapper',
-        isQuotedMessageToAnimate && 'flash-green-once',
         isIncoming ? 'session-message-wrapper-incoming' : 'session-message-wrapper-outgoing'
       )}
       onContextMenu={handleContextMenu}