PLT-3418, PLT-2950, PLT-3375, PLT-3382, PLT-3446, PLT-3465: Multiple UI Improvements (#3449)

Improving help text margins

Updating changes for get link and create post files

Fixing icon for select team screen

Fixing styles for select team button

Adding improvements to posts UI

Adding improvement to post layout

Updating changes for post controls

Updating z-index for sidebar--right

Updating help text position

Fixing code for posts

Fixing css for post view

Pushing improvements for posts view

Updating changes for post view

Updating post layout

Fixing system time css

Updating header for system posts

Updating post css

Removing opacity and changing color for system messages

Simplifying root post and system post behaviour

Removing images from compact view

Updating help text for display

Updating embed preview text for advanced option

PLT-3490 - Fixing RHS issue on Edge

4 files changed, 180 insertions, 161 deletions

diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index cc9f0f713..56f7cd6e8 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -97,8 +97,10 @@
 
 .header-dropdown__icon {
     color: inherit;
-    font-size: 11px;
-    top: 3px;
+    font-size: 12px;
+    margin-left: 1px;
+    position: relative;
+    top: 1px;
 }
 
 .channel-header__info {
diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss
index 50d144b9c..751171412 100644
--- a/webapp/sass/layout/_navigation.scss
+++ b/webapp/sass/layout/_navigation.scss
@@ -46,8 +46,10 @@
                 width: 21px;
             }
 
-            .glyphicon-search {
-                top: -1px;
+            .icon-search {
+                font-size: 17px;
+                position: relative;
+                top: -2px;
             }
 
             .icon--white {
@@ -80,7 +82,8 @@
             }
 
             .header-dropdown__icon {
-                top: 1px;
+                margin-left: 0;
+                top: -1px;
             }
 
             .dropdown-toggle {
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index 1040a324e..f1fe0cac3 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -1,152 +1,156 @@
 @charset 'UTF-8';
 
-.post-right__container {
-    @include display-flex;
-    @include flex-direction(column);
-    height: 100%;
-
-    .post-right-root-message {
-        padding: 1em 1em 0;
-    }
+.app__body {
+    .post-right__container {
+        @include display-flex;
+        @include flex-direction(column);
+        height: 100%;
+
+        .post-right-root-message {
+            padding: 1em 1em 0;
+        }
 
-    .post-right-comments-container {
-        position: relative;
+        .post-right-comments-container {
+            position: relative;
 
-        .post {
-            &:first-child {
-                padding-top: 15px;
+            .post {
+                &:first-child {
+                    padding-top: 15px;
+                }
             }
         }
-    }
 
 
-    .help_format_text {
-        bottom: -63px;
-        right: auto;
-    }
+        .help_format_text {
+            bottom: -63px;
+            right: auto;
+        }
 
-    .post {
-        &.post--root {
-            border-bottom: 1px solid #ddd;
-            padding-bottom: 1em;
+        .post {
+            &.post--root {
+                border-bottom: 1px solid #ddd;
+                padding-bottom: 1em;
 
-            .post__body {
-                background: transparent !important;
+                .post__body {
+                    background: transparent !important;
+                }
             }
-        }
 
-        .post__header {
-            .col__reply {
-                text-align: right;
-                top: 0;
+            .post__header {
+                .col__reply {
+                    background: transparent !important;
+                    border: none !important;
+                    text-align: right;
+                    top: 0;
+                }
             }
-        }
 
-        .post__body {
-            width: 100%;
+            .post__body {
+                width: 100%;
+            }
         }
-    }
 
-    hr {
-        border: none;
-        margin-bottom: 0;
-    }
+        hr {
+            border: none;
+            margin-bottom: 0;
+        }
 
-    .post-create__container {
-        width: 100%;
+        .post-create__container {
+            width: 100%;
 
-        .textarea-wrapper {
-            min-height: 100px;
-        }
+            .textarea-wrapper {
+                min-height: 100px;
+            }
 
-        .btn {
-            margin-bottom: 10px;
-        }
+            .btn {
+                margin-bottom: 10px;
+            }
 
-        .custom-textarea {
-            min-height: 100px;
-        }
+            .custom-textarea {
+                min-height: 100px;
+            }
 
-        .msg-typing {
-            @include opacity(.7);
-            display: block;
-            float: left;
-            font-size: 13px;
-            height: 20px;
-            line-height: 20px;
-            margin-top: 3px;
-            max-width: 230px;
-            min-width: 1px;
-        }
+            .msg-typing {
+                @include opacity(.7);
+                display: block;
+                float: left;
+                font-size: 13px;
+                height: 20px;
+                line-height: 20px;
+                margin-top: 3px;
+                max-width: 230px;
+                min-width: 1px;
+            }
 
-        .post-create-footer {
-            padding: 5px 0 10px;
-            width: 100%;
-        }
+            .post-create-footer {
+                padding: 5px 0 10px;
+                width: 100%;
+            }
 
-        .post-right-comments-upload-in-progress {
-            color: #a8adb7;
-            margin-right: 10px;
-            padding: 6px 0;
+            .post-right-comments-upload-in-progress {
+                color: #a8adb7;
+                margin-right: 10px;
+                padding: 6px 0;
+            }
         }
     }
-}
 
-.post-right-header {
-    border-bottom: $border-gray;
-    color: #999;
-    font-size: 1em;
-    font-weight: 400;
-    height: 39px;
-    padding: 10px 10px 0 15px;
-    text-transform: uppercase;
-}
+    .post-right-header {
+        border-bottom: $border-gray;
+        color: #999;
+        font-size: 1em;
+        font-weight: 400;
+        height: 39px;
+        padding: 10px 10px 0 15px;
+        text-transform: uppercase;
+    }
 
-.post-right-root-container {
-    border-bottom: $border-gray;
-    padding: 5px 10px;
+    .post-right-root-container {
+        border-bottom: $border-gray;
+        padding: 5px 10px;
 
-    ul {
-        margin-bottom: 2px;
-        padding-left: 0;
+        ul {
+            margin-bottom: 2px;
+            padding-left: 0;
+        }
     }
-}
 
-.post-right-channel__name {
-    font-weight: 600;
-    margin: 0 0 15px;
-}
+    .post-right-channel__name {
+        font-weight: 600;
+        margin: 0 0 15px;
+    }
 
-.post-right-root-container li {
-    display: inline;
-    list-style-type: none;
-    padding-right: 3px;
-}
+    .post-right-root-container li {
+        display: inline;
+        list-style-type: none;
+        padding-right: 3px;
+    }
 
-.post-right-root-time {
-    color: #a8adb7;
-}
+    .post-right-root-time {
+        color: #a8adb7;
+    }
 
-.post-right-create-comment-container {
-    bottom: 0;
-    left: 0;
-    margin-bottom: 18px;
-    padding: 5px;
-    position: absolute;
-    width: 100%;
-}
+    .post-right-create-comment-container {
+        bottom: 0;
+        left: 0;
+        margin-bottom: 18px;
+        padding: 5px;
+        position: absolute;
+        width: 100%;
+    }
 
-.post-right__scroll {
-    @include flex(1 1 auto);
-    -webkit-overflow-scrolling: touch;
-    overflow: auto;
-    position: relative;
+    .post-right__scroll {
+        @include flex(1 1 auto);
+        -webkit-overflow-scrolling: touch;
+        overflow: auto;
+        position: relative;
 
-    .file-preview__container {
-        margin-top: 5px;
+        .file-preview__container {
+            margin-top: 5px;
+        }
     }
-}
 
-.post-right-comment-time {
-    color: #a8adb7;
+    .post-right-comment-time {
+        color: #a8adb7;
+    }
 }
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index baca9a127..ab7c851ea 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -86,8 +86,19 @@ body.ios {
 
     b,
     i,
+    span {
+        margin: 0 2px;
+        position: relative;
+        top: -1px;
+    }
+
+    b {
+        @include opacity(.9);
+    }
+
     code {
-        margin-right: 3px;
+        background: transparent;
+        padding: 0;
     }
 
     .textbox-preview-link {
@@ -402,6 +413,11 @@ body.ios {
             right: 0;
             top: 1px;
 
+            svg {
+                height: 18px;
+                width: 18px;
+            }
+
             &:hover,
             &:active {
                 @include opacity(.9);
@@ -452,7 +468,7 @@ body.ios {
 
         .dropdown-menu {
             &.bottom {
-                bottom: 25px;
+                bottom: 19px;
                 top: auto;
             }
         }
@@ -483,6 +499,14 @@ body.ios {
         background-color: beige;
     }
 
+    &.post--hide-controls {
+        .post__header {
+            .col__reply {
+                display: none;
+            }
+        }
+    }
+
     &.post--compact {
         &.post--thread {
             .post__header {
@@ -557,6 +581,16 @@ body.ios {
                 padding: 0;
                 width: 100%;
 
+                svg {
+                    display: inline-block;
+                    height: 13px;
+                    margin: 5px 4px 0 0;
+                    opacity: .5;
+                    position: relative;
+                    vertical-align: top;
+                    width: 13px;
+                }
+
                 > div {
                     display: none;
                 }
@@ -596,6 +630,10 @@ body.ios {
         }
     }
 
+    .post--fail {
+        position: relative;
+    }
+
     p {
         font-size: .97em;
         line-height: 1.6em;
@@ -634,33 +672,6 @@ body.ios {
         &.same--user {
             padding: 0 .5em 0 1em;
 
-            &.post--system {
-                padding: 8px .5em 0 1em;
-
-                .post__header {
-                    height: auto;
-                    margin-bottom: 2px;
-
-                    .col__name {
-                        display: inline-block;
-                    }
-
-                    .col__reply {
-
-                    }
-                }
-
-                .post__time {
-                    @include opacity(.6);
-                    font-size: .9em;
-                    left: inherit;
-                    line-height: inherit;
-                    position: inherit;
-                    text-rendering: inherit;
-                    top: inherit;
-                }
-            }
-
             &:hover {
                 .post__time {
                     @include opacity(.5);
@@ -682,7 +693,7 @@ body.ios {
                 }
 
                 .col__reply {
-                    top: 6px;
+                    top: -1px;
                 }
             }
         }
@@ -721,7 +732,7 @@ body.ios {
 
             .post__header {
                 .col__reply {
-                    top: 53px;
+                    top: -4px;
                 }
             }
         }
@@ -775,11 +786,14 @@ body.ios {
         }
 
         .col__reply {
+            border: 1px solid transparent;
+            border-radius: 2px;
+            min-width: 70px;
+            padding: 2px 5px;
             position: absolute;
             right: 0;
-            top: 30px;
+            top: -4px;
             white-space: nowrap;
-            width: 65px;
         }
 
         .permalink-popover {
@@ -841,6 +855,7 @@ body.ios {
             min-width: 130px;
             padding: 2px 0;
             right: 0;
+            top: 20px;
 
             li {
                 display: block;
@@ -864,15 +879,15 @@ body.ios {
         @include opacity(.5);
         color: inherit;
         display: inline-block;
+        float: right;
         font-family: 'Open Sans', sans-serif;
         font-size: 20px;
         font-weight: 600;
         height: 20px;
         line-height: 20px;
         position: relative;
-        right: 15px;
+        right: -10px;
         text-decoration: none;
-        top: -5px;
         vertical-align: top;
         visibility: hidden;
         width: 20px;
@@ -885,9 +900,8 @@ body.ios {
     .post__body {
         @include legacy-pie-clearfix;
         padding: .2em .5em;
-        width: calc(100% - 75px);
+        width: 100%;
         word-wrap: break-word;
-        position: relative;
 
         p {
             margin: 0 0 .4em;
@@ -1013,12 +1027,8 @@ body.ios {
     }
 
     .post__time {
-        font-size: .9em;
-    }
-
-    .post__time,
-    &.post--system .post__body {
         @include opacity(.6);
+        font-size: .9em;
     }
 
     .post-loading-gif {