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

webapp/components/post_info.jsx

@@ -212,7 +212,7 @@ export default class PostInfo extends React.Component {
         var dropdown = this.createDropdown();
 
         return (
-            <ul className='post__header post__header--info'>
+            <ul className='post__header--info'>
                 <li className='col'>
                     <TimeSince
                         eventTime={post.create_at}

webapp/sass/components/_buttons.scss

@@ -20,6 +20,12 @@
 
         .app__body & {
             color: $white;
+
+            &:hover,
+            &:focus,
+            &:active {
+                color: $white;
+            }
         }
 
         &:hover,

webapp/sass/layout/_headers.scss

@@ -67,9 +67,8 @@
 
 .channel-intro {
     border-bottom: 1px solid $light-gray;
-    margin: 0 auto 35px;
+    margin: 0 30px 35px;
-    max-width: 1000px;
+    padding: 0 0 5px;
-    padding: 0 1em 5px;
 
     .intro-links {
         display: inline-block;

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 {

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;

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;
     }

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 {
+        &.other--root {
-            &.post__reply--hide {
+            &.post--comment {
-                visibility: hidden;
-            }
-        }
-
                 .post__header {
                     .col__reply {
-                width: 65px;
+                        top: 0;
+                    }
+                }
             }
 
-            .col__name {
+            .post__reply {
-                pointer-events: none;
+                &.post__reply--hide {
-
+                    visibility: hidden;
-                .user-popover {
-                    max-width: 130px;
                 }
             }
         }
@@ -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;

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;
+                }
+            }
+        }
+    }
 }

webapp/utils/utils.jsx

@@ -761,7 +761,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.mentionHighlightLink) {
-        changeCss('.app__body .mention--highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1);
+        changeCss('.app__body .mention--highlight .mention-link, .app__body .mention--highlight, .app__body .search-highlight', 'color:' + theme.mentionHighlightLink, 1);
     }
 
     if (!theme.codeTheme) {