From d95bd47438c5dae409fe057cd2d88d8e06e8cf8d Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Thu, 6 Oct 2022 14:11:27 +1100
Subject: [PATCH] fix: link previews styling correction

---
 stylesheets/_modules.scss                             | 11 ++++++++---
 .../message/message-content/MessageLinkPreview.tsx    |  5 +++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 0937c3118..579d17c3a 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -163,14 +163,19 @@
 
 .module-message__link-preview {
   cursor: pointer;
-  // TODO Theming - Fix after clearnet fix is made
   display: flex;
   align-items: center;
   border-radius: var(--border-radius-message-box);
+  border-bottom-right-radius: 0;
   margin: var(--padding-link-preview);
+  background-color: var(--message-link-preview-background-color);
 
   .module-image {
-    margin: -1px;
+    margin-top: -1px;
+    margin-left: -1px;
+    margin-bottom: 0;
+    border-radius: 0;
+    border-top-left-radius: var(--border-radius-message-box);
   }
 
   &__text {
@@ -184,7 +189,7 @@
   flex-direction: row;
   align-items: center;
   flex-grow: 1;
-  margin-left: var(--margins-sm);
+  margin: 0 var(--margins-sm);
 }
 
 .module-message__link-preview__image_container {
diff --git a/ts/components/conversation/message/message-content/MessageLinkPreview.tsx b/ts/components/conversation/message/message-content/MessageLinkPreview.tsx
index 70460e5a2..7667ddd09 100644
--- a/ts/components/conversation/message/message-content/MessageLinkPreview.tsx
+++ b/ts/components/conversation/message/message-content/MessageLinkPreview.tsx
@@ -56,7 +56,9 @@ export const MessageLinkPreview = (props: Props) => {
   return (
     <div
       role="button"
-      className={classNames(`module-message__link-preview--${direction}`)}
+      className={classNames(
+        `module-message__link-preview module-message__link-preview--${direction}`
+      )}
       onClick={openLinkFromPreview}
     >
       {first.image && previewHasImage && isFullSizeImage ? (
@@ -84,7 +86,6 @@ export const MessageLinkPreview = (props: Props) => {
             </div>
           </div>
         ) : null}
-        {/* TODO Theming Confirm all this works */}
         <div className={classNames('module-message__link-preview__text')}>
           <div className="module-message__link-preview__title">{first.title}</div>
           <div className="module-message__link-preview__location">{first.domain}</div>