From 88cbfe7f1df5a0ef89d8b2ccf1261cb897c19366 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmoodspin@users.noreply.github.com>
Date: Mon, 25 Apr 2016 20:52:32 +0500
Subject: [PATCH] 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        |  2 +-
 webapp/sass/components/_buttons.scss   |  6 +++
 webapp/sass/layout/_headers.scss       |  5 +-
 webapp/sass/layout/_post-right.scss    |  3 +-
 webapp/sass/layout/_post.scss          | 18 +++----
 webapp/sass/layout/_sidebar-right.scss | 10 ++++
 webapp/sass/responsive/_mobile.scss    | 69 +++++++++++++++++++-------
 webapp/sass/responsive/_tablet.scss    | 29 ++++++++++-
 webapp/utils/utils.jsx                 |  2 +-
 9 files changed, 104 insertions(+), 40 deletions(-)

diff --git a/webapp/components/post_info.jsx b/webapp/components/post_info.jsx
index 2d41b0e540..3f81672e19 100644
--- a/webapp/components/post_info.jsx
+++ b/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}
diff --git a/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss
index 326640148b..ffe82c5247 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 ae114a8050..950588df52 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 529f739954..93ad7af543 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 592d486aaf..374fa73244 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 062c3bde13..923e53d12d 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 3d30f6d96a..6a9a134f2e 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 cb5216deac..6591002637 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;
+                }
+            }
+        }
+    }
 }
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index a1e16928b0..8255b10f3a 100644
--- a/webapp/utils/utils.jsx
+++ b/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) {