[PLT-1249] Add close button 'x' to the right of a link preview (#7017)

* add close button 'x' to the right of a link preview

* Updating webhook UI

* UI improvements for close button

* Adding hover state

* Making the close button visible on mobile

* previews are permanently disabled/closed for that link

* make post as required props

* fix JS error of undefined

* fix update issue both at center and RHS view

webapp/sass/layout/_webhooks.scss

@@ -38,6 +38,17 @@
 
 .post {
     .attachment {
+        margin-left: -20px;
+        position: relative;
+
+        &:hover {
+            .attachment__body__wrap {
+                .btn-close {
+                    visibility: visible;
+                }
+            }
+        }
+
         &.attachment--opengraph {
             max-width: 800px;
         }
@@ -46,7 +57,7 @@
             border-radius: 4px;
             border-style: solid;
             border-width: 1px;
-            margin: 5px 0;
+            margin: 5px 0 5px 20px;
             padding: 2px 5px;
         }
 
@@ -99,6 +110,42 @@
                 vertical-align: top;
                 width: 100%;
             }
+
+            .btn-close {
+                @include opacity(.4);
+                background: transparent;
+                border: none;
+                color: inherit;
+                font-size: 21px;
+                font-weight: 500;
+                height: 20px;
+                left: -7px;
+                line-height: 20px;
+                outline: none;
+                padding: 0;
+                position: absolute;
+                text-align: center;
+                text-decoration: none;
+                text-shadow: none;
+                visibility: hidden;
+                width: 20px;
+                z-index: 5;
+
+                span {
+                    font-family: 'Open Sans', sans-serif;
+                    line-height: 10px;
+                }
+
+                &:hover {
+                    @include opacity(.9);
+                }
+            }
+
+            &:hover {
+                .btn-close {
+                    visibility: visible;
+                }
+            }
         }
 
         .attachment__body {

webapp/sass/responsive/_mobile.scss

@@ -1349,6 +1349,16 @@
 
     .post {
         .attachment {
+            .attachment__body__wrap {
+                .btn-close {
+                    height: 30px;
+                    left: -15px;
+                    top: 7px;
+                    visibility: visible;
+                    width: 30px;
+                }
+            }
+
             .attachment__image {
                 &.attachment__image--openraph {
                     max-width: 200px;