From 4c40d861cf229b86d976c0fec6fb08db740c0e95 Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Thu, 7 Jan 2021 13:32:12 -0600
Subject: [PATCH] Update link preview styles to better match designs

---
 stylesheets/_modules.scss              | 28 ++++++--------------------
 ts/components/conversation/Message.tsx |  9 +--------
 2 files changed, 7 insertions(+), 30 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 36faa2550a4..0f8bb372ae3 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -1,4 +1,4 @@
-// Copyright 2018-2020 Signal Messenger, LLC
+// Copyright 2018-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 // Using BEM syntax explained here: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
@@ -307,6 +307,7 @@
   padding-top: 10px;
   padding-bottom: 10px;
   min-width: 0px;
+  overflow: hidden;
 
   @include light-theme {
     border: 1px solid $color-white;
@@ -854,8 +855,6 @@
 
   margin-top: -10px;
   margin-bottom: 5px;
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
   overflow: hidden;
 
   @include keyboard-mode {
@@ -867,37 +866,22 @@
 
 .module-message__link-preview--with-content-above {
   margin-top: 4px;
-  border-top-left-radius: 0px;
-  border-top-right-radius: 0px;
 }
 
 .module-message__link-preview__content {
-  padding: 8px;
-  border: 1px solid transparent; /* Color overwritten below. */
-  border-bottom: 0;
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
-  background-color: $color-white;
+  padding: 8px 12px;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
 
   @include light-theme {
-    border-color: $color-black-alpha-20;
+    background-color: $color-gray-02;
   }
   @include dark-theme {
-    background-color: $color-gray-95;
-    border-color: $color-gray-60;
+    background-color: $color-gray-80;
   }
 }
 
-.module-message__link-preview__content--with-content-above {
-  border-top: none;
-  border-bottom: none;
-  border-top-left-radius: 0px;
-  border-top-right-radius: 0px;
-}
-
 .module-message__link-preview__icon_container {
   margin: -2px;
   margin-right: 8px;
@@ -946,7 +930,7 @@
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  margin-top: 4px;
+  margin-top: 2px;
 
   @include light-theme {
     color: $color-gray-60;
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 75b6f5deb84..84f60507790 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -879,14 +879,7 @@ export class Message extends React.PureComponent<Props, State> {
             i18n={i18n}
           />
         ) : null}
-        <div
-          className={classNames(
-            'module-message__link-preview__content',
-            withContentAbove || isFullSizeImage
-              ? 'module-message__link-preview__content--with-content-above'
-              : null
-          )}
-        >
+        <div className="module-message__link-preview__content">
           {first.image && previewHasImage && !isFullSizeImage ? (
             <div className="module-message__link-preview__icon_container">
               <Image