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

7 files changed, 198 insertions, 159 deletions

diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 3d3a11de0..30b5d29cd 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -29,6 +29,21 @@
         }
     }
 
+    .modal__hint {
+        @include opacity(.8);
+        display: block;
+        font-size: .9em;
+        margin: 0 0 10px;
+    }
+
+    .modal__error {
+        color: $red;
+        float: left;
+        font-size: .95em;
+        font-weight: normal;
+        margin-top: 6px;
+    }
+
     .more-table {
         margin: 0;
         table-layout: fixed;
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index 93ad7af54..1040a324e 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -28,7 +28,7 @@
     .post {
         &.post--root {
             border-bottom: 1px solid #ddd;
-            padding-bottom: 1.2em;
+            padding-bottom: 1em;
 
             .post__body {
                 background: transparent !important;
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 08074c59a..938f4bde6 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -488,6 +488,13 @@ body.ios {
     }
 
     &.post--compact {
+        &.post--thread {
+            .post__header {
+                height: 22px;
+                padding-top: 3px;
+            }
+        }
+
         blockquote {
             display: inline-block;
             font-size: 1em;
@@ -509,10 +516,19 @@ body.ios {
 
         .post__body {
             background: transparent !important;
-            line-height: 1.2;
+            line-height: 1.6;
             margin-top: -1px;
             padding: 3px 0;
 
+            .img-div {
+                max-height: 150px;
+                max-width: 150px;
+            }
+
+            p {
+                line-height: inherit;
+            }
+
             p + p {
                 margin-top: 1em;
             }
@@ -520,6 +536,7 @@ body.ios {
             ol,
             ul {
                 display: inline-block;
+                margin-top: 1px;
                 padding-left: 30px;
             }
         }
@@ -758,7 +775,7 @@ body.ios {
 
         .col__reply {
             position: absolute;
-            right: 10px;
+            right: 0;
             top: 30px;
             white-space: nowrap;
             width: 65px;
diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss
index 923e53d12..00e183254 100644
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -17,7 +17,7 @@
 
     .post {
         .post__content {
-            padding: 0;
+            padding: 0 10px 0 0;
         }
 
         .post__header {
diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss
index 976b8361b..99a82f00e 100644
--- a/webapp/sass/layout/_webhooks.scss
+++ b/webapp/sass/layout/_webhooks.scss
@@ -36,113 +36,111 @@
     }
 }
 
+.post {
+    .attachment {
+        .attachment__content {
+            border-radius: 4px;
+            border-style: solid;
+            border-width: 1px;
+            margin: 0 0 5px 0;
+            padding: 2px 5px;
+        }
 
-.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__thumb-pretext {
+            background: transparent;
+            border: none;
+            margin-left: 5px;
+        }
 
-    .attachment__container {
-        border-left-style: solid;
-        border-left-width: 4px;
-        padding: 10px;
+        .attachment__container {
+            border-left-style: solid;
+            border-left-width: 4px;
+            padding: 10px;
 
-        &.attachment__container--good {
-            border-left-color: #00c100;
-        }
+            &.attachment__container--good {
+                border-left-color: #00c100;
+            }
 
-        &.attachment__container--warning {
-            border-left-color: #dede01;
-        }
+            &.attachment__container--warning {
+                border-left-color: #dede01;
+            }
 
-        &.attachment__container--danger {
-            border-left-color: #e40303;
+            &.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__text p:last-of-type {
+            display: inline-block;
+        }
 
-    .attachment__author-name {
-        @include opacity(.6);
-    }
+        .attachment__image {
+            margin-bottom: 1em;
+            max-height: 300px;
+            max-width: 500px;
+        }
 
-    .attachment__title {
-        font-size: 14px;
-        font-weight: 600;
-        height: 22px;
-        line-height: 18px;
-        margin: 5px 0;
-        padding: 0;
-    }
+        .attachment__author-name {
+            @include opacity(.6);
+        }
 
-    .attachment-link-more {
-        display: inline-block;
-        font-size: .9em;
-        margin: 5px 0;
-    }
+        .attachment__title {
+            font-size: 14px;
+            font-weight: 600;
+            height: 22px;
+            line-height: 18px;
+            margin: 5px 0;
+            padding: 0;
+        }
 
-    .attachment__author-icon {
-        @include border-radius(50px);
-        height: 14px;
-        margin-right: 5px;
-        width: 14px;
-    }
+        .attachment-link-more {
+            display: inline-block;
+            font-size: .9em;
+            margin: 5px 0;
+        }
 
-    .attachment__image {
-        margin-bottom: 1em;
-        max-width: 100%;
-    }
+        .attachment__author-icon {
+            @include border-radius(50px);
+            height: 14px;
+            margin-right: 5px;
+            width: 14px;
+        }
 
-    .attachment__thumb-container {
-        float: right;
-        text-align: right;
-        width: 80px;
+        .attachment__thumb-container {
+            float: right;
+            text-align: right;
+            width: 80px;
 
-        img {
-            max-height: 75px;
-            max-width: 100%;
+            img {
+                max-height: 75px;
+                max-width: 100%;
+            }
         }
-    }
 
-    .attachment-fields {
-        width: 100%;
+        .attachment-fields {
+            width: 100%;
 
-        .attachment-field__caption {
-            font-weight: 600;
-            padding-top: .7em;
-        }
+            .attachment-field__caption {
+                font-weight: 600;
+                padding-top: .7em;
+            }
 
-        .attachment-field {
-            p {
-                margin: 0;
+            .attachment-field {
+                p {
+                    margin: 0;
+                }
             }
         }
     }
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 049e12055..d4c7242b4 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -26,6 +26,10 @@
         }
     }
 
+    .member-select__container {
+        margin-top: 10px;
+    }
+
     .user-popover {
         pointer-events: none;
     }
@@ -51,11 +55,6 @@
     }
 
     .post {
-        &.post--compact {
-
-
-        }
-
         .post__dropdown {
             display: inline-block;
             height: 20px;
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 0a62c0f79..9e09c3f42 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -85,85 +85,103 @@
 
     .post {
         &.post--compact {
-            padding: 5px .5em 0 80px;
+            &:not(.post--thread) {
+                padding: 5px .5em 0 70px;
 
-            .post__link {
-                margin: 4px 0 7px;
-            }
+                .post__link {
+                    margin: 4px 0 7px;
+                }
 
-            .post__time {
-                font-size: .85em;
-                left: -70px;
-                position: absolute;
-                top: 2px;
-            }
+                .post__time {
+                    font-size: .85em;
+                    left: -70px;
+                    position: absolute;
+                    text-align: right;
+                    top: 4px;
+                    width: 60px;
+                }
 
-            span {
-                p {
-                    &:last-child {
-                        margin-bottom: .3em;
+                span {
+                    p {
+                        &:last-child {
+                            margin-bottom: .3em;
+                        }
                     }
                 }
-            }
 
-            .post__header {
-                float: left;
-                height: 18px;
-                padding-top: 3px;
-
-                .col__name {
-                    font-weight: bold;
-                    margin-right: 2px;
-                    padding-right: 10px;
-                    position: relative;
-                    z-index: 1;
-
-                    &:after {
-                        content: ':';
-                        display: inline-block;
-                        font-family: FontAwesome;
-                        font-size: 19px;
-                        position: absolute;
-                        right: 3px;
-                        text-rendering: auto;
-                        top: -5px;
+                .post__header {
+                    float: left;
+                    height: 21px;
+                    padding-top: 3px;
+
+                    .col__name {
+                        font-weight: bold;
+                        margin-right: 2px;
+                        padding-right: 10px;
+                        position: relative;
+                        z-index: 1;
+
+                        &:after {
+                            content: ':';
+                            display: inline-block;
+                            font-family: FontAwesome;
+                            font-size: 19px;
+                            position: absolute;
+                            right: 3px;
+                            text-rendering: auto;
+                            top: -5px;
+                        }
                     }
-                }
 
-                .col__reply {
-                    top: 2px;
+                    .col__reply {
+                        top: 2px;
+                    }
                 }
-            }
 
-            &.other--root {
-                .post__body {
-                    > div {
-                        &:first-child {
-                            min-height: 21px;
+                &.other--root {
+                    .post__body {
+                        > div {
+                            &:first-child {
+                                min-height: 21px;
+                            }
+                        }
+                    }
+
+                    .post__link + .post__body {
+                        clear: both;
+                    }
+
+                    &.post--comment {
+                        .post__header {
+                            .col__reply {
+                                top: 0;
+                            }
                         }
                     }
                 }
 
-                .post__link + .post__body {
+                .post-code {
                     clear: both;
                 }
 
-                &.post--comment {
-                    .post__header {
-                        .col__reply {
-                            top: 0;
-                        }
-                    }
+                .post__body {
+                    width: 100%;
                 }
-            }
 
-            .post-code {
-                clear: both;
+                .post__content {
+                    padding-right: 85px;
+                }
             }
 
             &.same--root {
                 &.same--user {
-                    padding-left: 80px;
+                    padding-left: 70px;
+
+                    .post__header {
+                        .col__reply {
+                            top: 4px;
+                        }
+                    }
 
                     .post__img {
                         img {
@@ -194,14 +212,6 @@
                     }
                 }
             }
-
-            .post__body {
-                width: 100%;
-            }
-
-            .post__content {
-                padding-right: 85px;
-            }
         }
 
         &.same--root {