UI Improvements to center channel (#2790)

Removing time from the center channel on sp (mobile)

Liking mention color to search highlight color aswell

Adjusting vertical spacing on mobile

Removing profile pic from mobile LHS header

Updating styles for the RHS

Fixing btn-danger

7 files changed, 102 insertions, 38 deletions

diff --git a/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss
index 326640148..ffe82c524 100644
--- a/webapp/sass/components/_buttons.scss
+++ b/webapp/sass/components/_buttons.scss
@@ -20,6 +20,12 @@
 
         .app__body & {
             color: $white;
+
+            &:hover,
+            &:focus,
+            &:active {
+                color: $white;
+            }
         }
 
         &:hover,
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index ae114a805..950588df5 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -67,9 +67,8 @@
 
 .channel-intro {
     border-bottom: 1px solid $light-gray;
-    margin: 0 auto 35px;
-    max-width: 1000px;
-    padding: 0 1em 5px;
+    margin: 0 30px 35px;
+    padding: 0 0 5px;
 
     .intro-links {
         display: inline-block;
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index 529f73995..93ad7af54 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -53,7 +53,6 @@
     }
 
     .post-create__container {
-        margin-top: 10px;
         width: 100%;
 
         .textarea-wrapper {
@@ -115,7 +114,7 @@
 
 .post-right-channel__name {
     font-weight: 600;
-    margin: 0 0 10px 0;
+    margin: 0 0 15px;
 }
 
 .post-right-root-container li {
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 592d486aa..374fa7324 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -520,6 +520,10 @@ body.ios {
         }
     }
 
+    .post__header--info {
+        padding: 0;
+    }
+
     span {
         p:last-child {
             margin-bottom: .5em;
@@ -554,16 +558,6 @@ body.ios {
                     top: 6px;
                 }
             }
-
-            .post__time {
-                @include opacity(0);
-                font-size: 11px;
-                left: -7px;
-                line-height: 37px;
-                position: absolute;
-                text-rendering: auto;
-                top: -2px;
-            }
         }
 
         &.post--comment {
@@ -610,10 +604,10 @@ body.ios {
     .post__content {
         display: table;
         margin: 0 auto;
+        padding: 0 15px;
         position: relative;
         table-layout: fixed;
         width: 100%;
-        padding: 0 15px;
 
         > div {
             display: table-cell;
@@ -649,7 +643,7 @@ body.ios {
 
         .col__reply {
             position: absolute;
-            right: 0;
+            right: 10px;
             top: 30px;
             white-space: nowrap;
             width: 65px;
diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss
index 062c3bde1..923e53d12 100644
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -16,6 +16,10 @@
     }
 
     .post {
+        .post__content {
+            padding: 0;
+        }
+
         .post__header {
             .col__name {
                 .user-popover {
@@ -25,6 +29,12 @@
         }
     }
 
+    .post-create__container {
+        form {
+            padding: .5em 15px 0;
+        }
+    }
+
     .help__format-text {
         display: none;
     }
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 3d30f6d96..6a9a134f2 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -15,6 +15,11 @@
         font-size: 1em;
     }
 
+    .sidebar--left .team__header .user__picture,
+    .sidebar--menu .team__header .user__picture {
+        display: none;
+    }
+
     .date-separator.hovered--before:after,
     .date-separator.hovered--after:before,
     .new-separator.hovered--after:before,
@@ -22,6 +27,10 @@
         background: none !important;
     }
 
+    .channel-intro {
+        margin: 0 15px 35px;
+    }
+
     .post {
         .post__dropdown {
             display: inline-block;
@@ -38,6 +47,27 @@
             }
         }
 
+        .post__content {
+            padding: 0 10px 0 0;
+        }
+
+        .post__header {
+            margin-bottom: 0;
+
+            .col__reply {
+                top: 0;
+                width: 65px;
+            }
+
+            .col__name {
+                pointer-events: none;
+
+                .user-popover {
+                    max-width: 130px;
+                }
+            }
+        }
+
         .comment-icon__container {
             display: none;
             visibility: visible;
@@ -63,7 +93,7 @@
         }
 
         .post__body {
-            width: calc(100% - 75px);
+            width: 100%;
         }
 
         .post__reply {
@@ -75,22 +105,18 @@
             }
         }
 
-        &.other--root .post__reply {
-            &.post__reply--hide {
-                visibility: hidden;
-            }
-        }
-
-        .post__header {
-            .col__reply {
-                width: 65px;
+        &.other--root {
+            &.post--comment {
+                .post__header {
+                    .col__reply {
+                        top: 0;
+                    }
+                }
             }
 
-            .col__name {
-                pointer-events: none;
-
-                .user-popover {
-                    max-width: 130px;
+            .post__reply {
+                &.post__reply--hide {
+                    visibility: hidden;
                 }
             }
         }
@@ -100,6 +126,15 @@
                 .post__time {
                     display: none;
                 }
+
+                .post__header {
+                    height: auto;
+                    margin-top: 5px;
+
+                    .col__name {
+                        display: inline-block;
+                    }
+                }
             }
         }
 
@@ -714,10 +749,6 @@
         width: 100%;
         z-index: 5;
 
-        &.move--left {
-            @include translate3d(0, 0, 0);
-        }
-
         .sidebar__collapse,
         .sidebar__search-icon {
             display: block;
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index cb5216dea..659100263 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -12,13 +12,18 @@
             }
         }
     }
+
     .sidebar--right {
         @include single-transition(all, .5s, ease);
         @include translateX(100%);
         z-index: 5;
 
         &.move--left {
-            @include translateX(0);
+            -webkit-transform: translateX(0) !important;
+            -moz-transform: translateX(0) !important;
+            -ms-transform: translateX(0) !important;
+            -o-transform: translateX(0) !important;
+            transform: translateX(0) !important;
 
             .search-bar__container {
                 padding-right: 8px;
@@ -44,8 +49,12 @@
     }
 
     .inner-wrap {
+        &:not(.move--left) {
+            margin-right: 0 !important;
+        }
+
         &.move--left {
-            margin-right: 0;
+            margin-right: 0 !important;
 
             .channel-header__links {
                 position: relative;
@@ -60,4 +69,20 @@
     .second-bar {
         display: none;
     }
+
+    .post {
+        &.same--root {
+            &.same--user {
+                .post__time {
+                    @include opacity(0);
+                    font-size: 11px;
+                    left: 8px;
+                    line-height: 37px;
+                    position: absolute;
+                    text-rendering: auto;
+                    top: -2px;
+                }
+            }
+        }
+    }
 }