PLT-3182 - Improving switch channels modal and some minor UI improvements (#3238)

* PLT-3182 - Improving switch channels modal and some minor UI improvements

Enabling link previews

Adding compact layout to RHS

Improving timestamps

* Adding update code for RHS components

webapp/sass/layout/_webhooks.scss

@@ -36,113 +36,111 @@
     }
 }
 
-
-.attachment {
-    .attachment__content {
-        border-radius: 4px;
-        border-style: solid;
-        border-width: 1px;
-        margin: 0 0 5px 0;
-        padding: 2px 5px;
-    }
-
-    .attachment__thumb-pretext {
-        background: transparent;
-        border: none;
-        margin-left: 5px;
-    }
-
-    .attachment__container {
-        border-left-style: solid;
-        border-left-width: 4px;
-        padding: 10px;
-
-        &.attachment__container--good {
-            border-left-color: #00c100;
+.post {
+    .attachment {
+        .attachment__content {
+            border-radius: 4px;
+            border-style: solid;
+            border-width: 1px;
+            margin: 0 0 5px 0;
+            padding: 2px 5px;
         }
 
-        &.attachment__container--warning {
-            border-left-color: #dede01;
+        .attachment__thumb-pretext {
+            background: transparent;
+            border: none;
+            margin-left: 5px;
         }
 
-        &.attachment__container--danger {
-            border-left-color: #e40303;
+        .attachment__container {
+            border-left-style: solid;
+            border-left-width: 4px;
+            padding: 10px;
+
+            &.attachment__container--good {
+                border-left-color: #00c100;
+            }
+
+            &.attachment__container--warning {
+                border-left-color: #dede01;
+            }
+
+            &.attachment__container--danger {
+                border-left-color: #e40303;
+            }
         }
-    }
 
-    .attachment__body {
-        float: left;
-        overflow-x: auto;
-        overflow-y: hidden;
-        padding-right: 5px;
-        width: 80%;
+        .attachment__body {
+            float: left;
+            overflow-x: auto;
+            overflow-y: hidden;
+            padding-right: 5px;
+            width: 80%;
 
-        &.attachment__body--no_thumb {
-            width: 100%;
+            &.attachment__body--no_thumb {
+                width: 100%;
+            }
         }
-    }
 
-    .attachment__text p:last-of-type {
-        display: inline-block;
-    }
-
-    .attachment__image {
-        max-height: 300px;
-    }
-
-    .attachment__author-name {
-        @include opacity(.6);
-    }
-
-    .attachment__title {
-        font-size: 14px;
-        font-weight: 600;
-        height: 22px;
-        line-height: 18px;
-        margin: 5px 0;
-        padding: 0;
-    }
-
-    .attachment-link-more {
-        display: inline-block;
-        font-size: .9em;
-        margin: 5px 0;
-    }
-
-    .attachment__author-icon {
-        @include border-radius(50px);
-        height: 14px;
-        margin-right: 5px;
-        width: 14px;
-    }
-
-    .attachment__image {
-        margin-bottom: 1em;
-        max-width: 100%;
-    }
-
-    .attachment__thumb-container {
-        float: right;
-        text-align: right;
-        width: 80px;
-
-        img {
-            max-height: 75px;
-            max-width: 100%;
+        .attachment__text p:last-of-type {
+            display: inline-block;
         }
-    }
 
-    .attachment-fields {
-        width: 100%;
+        .attachment__image {
+            margin-bottom: 1em;
+            max-height: 300px;
+            max-width: 500px;
+        }
 
-        .attachment-field__caption {
+        .attachment__author-name {
+            @include opacity(.6);
+        }
+
+        .attachment__title {
+            font-size: 14px;
             font-weight: 600;
-            padding-top: .7em;
+            height: 22px;
+            line-height: 18px;
+            margin: 5px 0;
+            padding: 0;
         }
 
-        .attachment-field {
-            p {
-                margin: 0;
+        .attachment-link-more {
+            display: inline-block;
+            font-size: .9em;
+            margin: 5px 0;
+        }
+
+        .attachment__author-icon {
+            @include border-radius(50px);
+            height: 14px;
+            margin-right: 5px;
+            width: 14px;
+        }
+
+        .attachment__thumb-container {
+            float: right;
+            text-align: right;
+            width: 80px;
+
+            img {
+                max-height: 75px;
+                max-width: 100%;
+            }
+        }
+
+        .attachment-fields {
+            width: 100%;
+
+            .attachment-field__caption {
+                font-weight: 600;
+                padding-top: .7em;
+            }
+
+            .attachment-field {
+                p {
+                    margin: 0;
+                }
             }
         }
     }