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

15 files changed, 289 insertions, 224 deletions

diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss
index f5795d862..f595e0ed9 100644
--- a/webapp/sass/base/_typography.scss
+++ b/webapp/sass/base/_typography.scss
@@ -25,3 +25,17 @@ body {
 .word-break--all {
     word-break: break-all;
 }
+
+.fa {
+    &.fa-margin--left {
+        margin-left: 2px;
+    }
+
+    &.fa-margin--right {
+        margin-right: 2px;
+    }
+}
+
+.font-weight--normal {
+    font-weight: normal;
+}
diff --git a/webapp/sass/components/_files.scss b/webapp/sass/components/_files.scss
index 854a5902b..9a65693da 100644
--- a/webapp/sass/components/_files.scss
+++ b/webapp/sass/components/_files.scss
@@ -71,6 +71,7 @@
     i {
         color: $white;
         cursor: pointer;
+        font-size: 16px;
         opacity: inherit;
         position: absolute;
         right: 5px;
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 6e41dff39..73651a320 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -140,7 +140,7 @@
             border: 1px solid $light-gray;
             color: $white;
             min-height: 56px;
-            padding: 15px 15px 11px;
+            padding: 14px 15px 11px;
 
             .modal-title {
                 color: $bg--gray;
diff --git a/webapp/sass/components/_save-button.scss b/webapp/sass/components/_save-button.scss
index 12f793aa1..dedef3255 100644
--- a/webapp/sass/components/_save-button.scss
+++ b/webapp/sass/components/_save-button.scss
@@ -1,7 +1,7 @@
 @charset 'UTF-8';
 
 .save-button {
-    .glyphicon {
+    .icon {
         margin-right: 10px;
     }
-}
\ No newline at end of file
+}
diff --git a/webapp/sass/components/_scrollbar.scss b/webapp/sass/components/_scrollbar.scss
index b868c0bf0..06ee37dc9 100644
--- a/webapp/sass/components/_scrollbar.scss
+++ b/webapp/sass/components/_scrollbar.scss
@@ -11,7 +11,7 @@
 
 ::-webkit-scrollbar-thumb {
     @include border-radius($border-rad * 2);
-    background: rgba(0, 0, 0, .4);
+    background: rgba(0, 0, 0, .2);
 }
 
 body {
diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss
index a7ca8d540..d259cfc20 100644
--- a/webapp/sass/components/_search.scss
+++ b/webapp/sass/components/_search.scss
@@ -11,7 +11,7 @@
     padding: 12px 8px 0 0;
 }
 
-.glyphicon-refresh-animate {
+.icon--rotate {
     @include animation(spin .7s infinite linear);
 }
 
@@ -88,7 +88,7 @@
         }
     }
 
-    .glyphicon-refresh-animate {
+    .icon--refresh {
         @include opacity(0.5);
         position: absolute;
         right: 27px;
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 {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index ba72a8119..9db962ec1 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -85,8 +85,9 @@
             margin-bottom: 0;
 
             .col__reply {
-                top: 0;
+                top: -3px;
                 width: 65px;
+                z-index: auto;
             }
 
             .col__name {
@@ -146,7 +147,7 @@
             &.post--comment {
                 .post__header {
                     .col__reply {
-                        top: 0;
+                        top: -3px;
                     }
                 }
             }
@@ -158,6 +159,12 @@
             }
         }
 
+        &.current--user {
+            .post__link {
+                margin: 0 0 8px;
+            }
+        }
+
         &.same--root {
             &.same--user {
                 .post__header {
@@ -355,9 +362,10 @@
                     margin-top: 10px;
                 }
 
-                button.close {
+                .close {
                     font-size: 27px;
                     font-weight: normal;
+                    margin-top: -2px;
                 }
 
                 .modal-title {
@@ -453,8 +461,8 @@
                         }
 
                         &.minimize-settings {
-                            padding: 0;
                             display: none;
+                            padding: 0;
 
                             .user-settings {
                                 padding: 70px 20px 30px;
@@ -469,13 +477,12 @@
                     .nav {
                         > li {
                             > a {
-                                border-top: 1px solid #dddddd;
+                                border-top: 1px solid transparent;
                                 font-size: 1.1em;
                                 line-height: 2.7;
-                                color: #555555;
 
-                                .glyphicon {
-                                    margin-left: 7px;
+                                .icon {
+                                    margin: 0 7px;
                                 }
                             }
                         }
@@ -667,7 +674,8 @@
             padding: 7px 20px 0 49px;
             position: relative;
 
-            .glyphicon-refresh-animate {
+            .icon--refresh {
+                @include opacity(.6);
                 color: $black;
                 right: 33px;
                 top: 15px;
@@ -793,7 +801,6 @@
         @include translate3d(100%, 0, 0);
         right: 0;
         width: 100%;
-        z-index: 5;
 
         .sidebar__collapse,
         .sidebar__search-icon {
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 69443aafc..d58e99969 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -16,7 +16,6 @@
     .sidebar--right {
         @include single-transition(all, .5s, ease);
         @include translateX(100%);
-        z-index: 5;
 
         &.move--left {
             -webkit-transform: translateX(0) !important;
@@ -113,22 +112,25 @@
 
     .post {
         &.post--compact {
-            &:not(.post--thread) {
-                padding: 5px .5em 0 70px;
-
-                .post__link {
-                    margin: 4px 0 7px;
-                    vertical-align: bottom;
-                }
 
+            .channel__wrap & {
                 .post__time {
                     font-size: .85em;
                     left: -70px;
                     position: absolute;
                     text-align: right;
-                    top: 4px;
+                    top: 6px;
                     width: 60px;
                 }
+            }
+
+            &:not(.post--thread) {
+                padding: 5px .5em 0 70px;
+
+                .post__link {
+                    margin: 4px 0 7px;
+                    vertical-align: bottom;
+                }
 
                 span {
                     p {
@@ -156,7 +158,7 @@
                     }
 
                     .col__reply {
-                        top: 2px;
+                        top: -1px;
                     }
                 }
 
@@ -176,7 +178,7 @@
                     &.post--comment {
                         .post__header {
                             .col__reply {
-                                top: 0;
+                                top: -1px;
                             }
                         }
                     }
@@ -191,7 +193,7 @@
                 }
 
                 .post__content {
-                    padding-right: 85px;
+                    padding-right: 45px;
                 }
             }
 
@@ -202,7 +204,7 @@
 
                     .post__header {
                         .col__reply {
-                            top: 4px;
+                            top: -1px;
                         }
                     }
 
@@ -211,6 +213,18 @@
                             display: none;
                         }
                     }
+
+                    &.post--root {
+                        .post__img {
+                            img {
+                                display: block;
+                            }
+                        }
+
+                        .post__time {
+                            @include opacity(.6);
+                        }
+                    }
                 }
 
                 &.post--comment {
@@ -241,26 +255,16 @@
             &.same--user {
                 .post__time {
                     @include opacity(0);
-                    font-size: 11px;
-                    left: -4px;
-                    line-height: 37px;
-                    position: absolute;
-                    text-rendering: auto;
-                    top: -2px;
                 }
 
-                &.post--compact {
-                    &.post--system {
-                        .post__time {
-                            position: absolute;
-                            top: 3px;
-                        }
-                    }
-
+                &:not(.post--compact) {
                     .post__time {
-                        font-size: .85em;
-                        left: -70px;
-                        top: -5px;
+                        font-size: 11px;
+                        left: -4px;
+                        line-height: 37px;
+                        position: absolute;
+                        text-rendering: auto;
+                        top: -2px;
                     }
                 }
             }
diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss
index 2a10fc486..4dba1558c 100644
--- a/webapp/sass/routes/_admin-console.scss
+++ b/webapp/sass/routes/_admin-console.scss
@@ -283,9 +283,22 @@
             padding: 10px;
 
             .category-icon {
+                font-size: 15px;
+                margin-right: 7px;
+                overflow: hidden;
                 right: 12px;
+                text-align: center;
                 top: 6px;
-                width: 17px;
+                vertical-align: bottom;
+                width: 16px;
+
+                &.fa-user {
+                    font-size: 14px;
+                }
+
+                &.fa-bar-chart {
+                    font-size: 16px;
+                }
             }
         }
 
diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss
index 5b8c36c5c..f67d1b49b 100644
--- a/webapp/sass/routes/_settings.scss
+++ b/webapp/sass/routes/_settings.scss
@@ -342,13 +342,16 @@
 
             a {
                 border-radius: 0;
-                color: #777;
+                color: $gray;
                 padding: 8px 5px 8px 15px;
             }
 
-            .glyphicon {
+            .icon {
+                font-size: 15px;
+                margin-right: 10px;
+                text-align: center;
                 top: 2px;
-                width: 25px;
+                width: 14px;
             }
 
             &:hover {
diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss
index d3fe0363f..4dc0dce42 100644
--- a/webapp/sass/routes/_signup.scss
+++ b/webapp/sass/routes/_signup.scss
@@ -291,21 +291,23 @@
             color: #444444;
         }
 
-        .glyphicon {
-            &.glyphicon-ok,
-            &.glyphicon-refresh {
+        .fa {
+            position: relative;
+
+            &.fa-check,
+            &.fa-refresh {
                 font-size: .9em;
                 left: -2px;
                 margin-right: .5em;
             }
 
-            &.glyphicon-chevron-right {
+            &.fa-chevron-right {
                 font-size: .8em;
-                right: -2px;
-                top: 0px;
+                right: -5px;
+                top: 0;
             }
 
-            &.glyphicon-chevron-left {
+            &.fa-chevron-left {
                 font-size: .8em;
                 left: -2px;
                 top: 0px;
@@ -443,19 +445,21 @@
     }
 
     .signup-team-dir__arrow {
-        color: #999999;
+        color: $dark-gray;
         float: right;
-        font-size: .9em;
-        line-height: 3.5em;
+        font-size: 1.5em;
+        line-height: 25px;
+        position: relative;
+        top: .66em;
     }
 }
 
 
 .authorize-box {
+    border: 1px solid $black;
+    height: 280px;
     margin: 100px auto;
     width: 500px;
-    height: 280px;
-    border: 1px solid black;
 }
 
 .authorize-inner {
@@ -467,6 +471,6 @@
 }
 
 .verify_panel {
-    margin: 60px auto auto auto;
+    margin: 60px auto auto;
     max-width: 380px;
 }