fix: link preview rendering

stylesheets/_modules.scss

@@ -147,15 +147,26 @@
 
 .module-message__link-preview {
   cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  background: white;
+  color: black;
+  border-radius: var(--border-radius-message-box);
+  margin: var(--padding-link-preview);
+
+  .module-image {
+    margin: -1px;
+  }
 }
 
 .module-message__link-preview__content {
-  padding: 0 0 5px 0;
+  padding: 0 0 var(--margins-xs) 0;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   flex-grow: 1;
-  border: 1px solid $color-black-015;
+  margin-left: var(--margins-sm);
 }
 
 .module-message__link-preview__image_container {

stylesheets/_quote.scss

@@ -281,26 +281,4 @@
   }
 }
 
-$session-highlight-message-shadow: 0px 0px 10px 1px $session-color-green;
 
-@keyframes remove-box-shadow {
-  0% {
-    box-shadow: none;
-  }
-  10% {
-    box-shadow: $session-highlight-message-shadow;
-  }
-  75% {
-    box-shadow: $session-highlight-message-shadow;
-  }
-  100% {
-    box-shadow: none;
-  }
-}
-
-.flash-green-once {
-  animation-name: remove-box-shadow;
-  animation-timing-function: linear;
-  animation-duration: 2s;
-  box-shadow: $session-highlight-message-shadow;
-}

ts/components/conversation/SessionMessagesListContainer.tsx

@@ -186,7 +186,7 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
     if (messageId !== undefined) {
       this.timeoutResetQuotedScroll = global.setTimeout(() => {
         window.inboxStore?.dispatch(quotedMessageToAnimate(undefined));
-      }, 2000); // should match .flash-green-once
+      }, 1000); // should match StyledMessageOpaqueContent
     }
   }
 

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

@@ -16,7 +16,7 @@ import { MessageLinkPreview } from './MessageLinkPreview';
 import { MessageQuote } from './MessageQuote';
 import { MessageText } from './MessageText';
 import { ScrollToLoadedMessageContext } from '../../SessionMessagesListContainer';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export type MessageContentSelectorProps = Pick<
   MessageRenderingProps,
@@ -42,7 +42,10 @@ function onClickOnMessageInnerContainer(event: React.MouseEvent<HTMLDivElement>)
   }
 }
 
-const StyledMessageOpaqueContent = styled.div<{ messageDirection: MessageModelType }>`
+const StyledMessageOpaqueContent = styled.div<{
+  messageDirection: MessageModelType;
+  highlight: boolean;
+}>`
   background: ${props =>
     props.messageDirection === 'incoming'
       ? 'var(--color-received-message-background)'
@@ -51,6 +54,36 @@ const StyledMessageOpaqueContent = styled.div<{ messageDirection: MessageModelTy
 
   padding: var(--padding-message-content);
   border-radius: var(--border-radius-message-box);
+
+  @keyframes highlight {
+  0% {
+    opacity: 1;
+  }
+  25% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+  ${props => {
+    return props.highlight
+      ? css`
+          animation-name: highlight;
+          animation-timing-function: linear;
+          animation-duration: 1s;
+          border-radius: 'var(--border-radius-message-box)';
+        `
+      : '';
+  }}
+}
 `;
 
 export const IsMessageVisibleContext = createContext(false);
@@ -128,11 +161,7 @@ export const MessageContent = (props: Props) => {
 
   return (
     <div
-      className={classNames(
+      className={classNames('module-message__container', `module-message__container--${direction}`)}
-        'module-message__container',
-        `module-message__container--${direction}`,
-        flashGreen && 'flash-green-once'
-      )}
       role="button"
       onClick={onClickOnMessageInnerContainer}
       title={toolTipTitle}
@@ -151,7 +180,7 @@ export const MessageContent = (props: Props) => {
       >
         <IsMessageVisibleContext.Provider value={isMessageVisible}>
           {hasContentAfterAttachmentAndQuote && (
-            <StyledMessageOpaqueContent messageDirection={direction}>
+            <StyledMessageOpaqueContent messageDirection={direction} highlight={flashGreen}>
               {!isDeleted && (
                 <>
                   <MessageQuote messageId={props.messageId} />

ts/components/leftpane/MessageRequestsBanner.tsx

@@ -48,7 +48,7 @@ const StyledUnreadCounter = styled.div`
   font-weight: bold;
   border-radius: var(--margins-sm);
   background-color: var(--color-request-banner-unread-background);
-  margin-left: 10px;
+  margin-left: var(--margins-sm);
   min-width: 20px;
   height: 20px;
   line-height: 25px;

ts/state/ducks/SessionTheme.tsx

@@ -332,7 +332,9 @@ export const SessionGlobalStyles = createGlobalStyle`
     --margins-lg:  20px;
 
     /* PADDING */
+     // TODO Theming
     --padding-message-content: 7px 13px;
+    --padding-link-preview: -7px -13px 7px -13px; // bottom has positive value because a link preview has always a body below
     --border-radius-message-box: 16px;
 
     /* SIZES */