add animation on click on quoted message just like on mobile

stylesheets/_quote.scss

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

ts/components/conversation/Message.tsx

@@ -99,6 +99,7 @@ export interface Props {
   multiSelectMode: boolean;
   firstMessageOfSeries: boolean;
   isUnread: boolean;
+  isQuotedMessageToAnimate?: boolean;
 
   onClickAttachment?: (attachment: AttachmentType) => void;
   onClickLinkPreview?: (url: string) => void;
@@ -1035,6 +1036,10 @@ export class Message extends React.PureComponent<Props, State> {
       divClasses.push('public-chat-message-wrapper');
     }
 
+    if (this.props.isQuotedMessageToAnimate) {
+      divClasses.push('flash-green-once');
+    }
+
     const onVisible = (inView: boolean) => {
       if (inView && shouldMarkReadWhenVisible) {
         // mark the message as read.

ts/components/session/conversation/SessionMessagesList.tsx

@@ -19,6 +19,7 @@ import { ToastUtils } from '../../../session/utils';
 
 interface State {
   showScrollButton: boolean;
+  animateQuotedMessageId?: string;
 }
 
 interface Props {
@@ -315,6 +316,9 @@ export class SessionMessagesList extends React.Component<Props, State> {
       this.props.onDownloadAttachment({ attachment });
     };
 
+    messageProps.isQuotedMessageToAnimate =
+      messageProps.id === this.state.animateQuotedMessageId;
+
     if (messageProps.quote) {
       messageProps.quote.onClick = (options: {
         quoteAuthor: string;
@@ -324,6 +328,7 @@ export class SessionMessagesList extends React.Component<Props, State> {
         void this.scrollToQuoteMessage(options);
       };
     }
+
     return <Message {...messageProps} key={messageProps.id} />;
   }
 
@@ -449,6 +454,11 @@ export class SessionMessagesList extends React.Component<Props, State> {
       block: 'center',
     });
 
+    // we consider that a `smooth` set to true, means it's a quoted message, so highlight this message on the UI
+    if (smooth) {
+      this.setState({ animateQuotedMessageId: messageId });
+    }
+
     const messageContainer = this.messageContainerRef.current;
     if (!messageContainer) {
       return;