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

1 files changed, 50 insertions, 19 deletions

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;