Multiple UI improvements (#3317)

Removing break all

Replacing jquery selectors and some other UI improvements

Removing jquery selector

webapp/sass/layout/_headers.scss

@@ -2,6 +2,87 @@
 
 .channel-header {
     @include flex(0 0 56px);
+    border-left: none;
+    font-size: 14px;
+    line-height: 56px;
+    width: 100%;
+
+    .member-popover__trigger {
+        cursor: pointer;
+        padding-right: 10px;
+        text-align: right;
+        width: 60px;
+
+        .fa {
+            font-size: 16px;
+            margin-left: 4px;
+        }
+    }
+
+    &.alt {
+        margin: 0;
+
+        th {
+            font-weight: normal !important;
+        }
+
+        td {
+            border: none;
+        }
+    }
+
+    th {
+        text-align: center;
+
+        &:first-child {
+            border-left: none;
+            padding-left: 15px;
+            padding-right: 1em;
+            text-align: left !important;
+            width: 100%;
+        }
+
+        &:last-child {
+            width: 8.9%;
+        }
+    }
+
+    td {
+        font-size: 13px;
+        padding: 5px 25px 5px !important;
+        text-align: center !important;
+
+        &:first-child {
+            text-align: left !important;
+        }
+    }
+
+    .heading {
+        display: inline-block;
+        font-size: 1.3em;
+        font-weight: 600;
+        margin: 0 4px 0 0;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+    }
+
+    .caret {
+        margin-top: 3px;
+    }
+
+    .more {
+        color: #81848b;
+        display: inline-block;
+        font-size: 13px;
+        text-transform: capitalize;
+        vertical-align: top;
+    }
+
+    .disabled {
+        color: #999999;
+    }
 }
 
 .row {
@@ -256,90 +337,6 @@
     }
 }
 
-.channel-header {
-    border-left: none;
-    font-size: 14px;
-    line-height: 56px;
-    width: 100%;
-
-    #member_popover {
-        color: #999999;
-        cursor: pointer;
-        width: 50px;
-
-        .fa {
-            font-size: 16px;
-            margin-left: 4px;
-        }
-    }
-
-    &.alt {
-        margin: 0;
-
-        th {
-            font-weight: normal !important;
-        }
-
-        td {
-            border: none;
-        }
-    }
-
-    th {
-        text-align: center;
-
-        &:first-child {
-            border-left: none;
-            padding-left: 15px;
-            padding-right: 1em;
-            text-align: left !important;
-            width: 100%;
-        }
-
-        &:last-child {
-            width: 8.9%;
-        }
-    }
-
-    td {
-        font-size: 13px;
-        padding: 5px 25px 5px !important;
-        text-align: center !important;
-
-        &:first-child {
-            text-align: left !important;
-        }
-    }
-
-    .heading {
-        color: #555555;
-        display: inline-block;
-        font-size: 1.3em;
-        font-weight: 600;
-        margin: 0 4px 0 0;
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: middle;
-    }
-
-    .caret {
-        margin-top: 3px;
-    }
-
-    .more {
-        color: #81848b;
-        display: inline-block;
-        font-size: 13px;
-        text-transform: capitalize;
-        vertical-align: top;
-    }
-
-    .disabled {
-        color: #999999;
-    }
-}
-
 .channel-header__navbar {
     font-size: 16px;
 

webapp/sass/layout/_post.scss

@@ -486,7 +486,6 @@ body.ios {
     &.post--compact {
         &.post--thread {
             .post__header {
-                height: 22px;
                 padding-top: 3px;
             }
         }
@@ -510,6 +509,10 @@ body.ios {
             margin: 0 0 7px;
         }
 
+        .post__header {
+            height: 22px;
+        }
+
         .post__body {
             background: transparent !important;
             line-height: 1.6;
@@ -537,10 +540,6 @@ body.ios {
             }
         }
 
-        .post-image__columns {
-            clear: both;
-        }
-
         .post-image__column {
             @include border-radius(2px);
             font-size: .9em;
@@ -765,8 +764,15 @@ body.ios {
                 @include clearfix;
                 max-width: 200px;
                 text-overflow: ellipsis;
+                vertical-align: top;
                 white-space: nowrap;
             }
+
+            strong {
+                display: none;
+                font-weight: 900;
+                margin-left: 2px;
+            }
         }
 
         .col__reply {
@@ -1036,6 +1042,7 @@ body.ios {
         display: inline-block;
         margin-right: 6px;
         visibility: hidden;
+
         svg {
             fill: inherit;
             position: relative;

webapp/sass/layout/_sidebar-menu.scss

@@ -68,13 +68,18 @@
                 line-height: 40px;
                 padding: 0 15px;
 
-                .fa,
-                .glyphicon {
+                .icon {
+                    display: inline-block;
                     left: -5px;
                     position: relative;
                     text-align: center;
                     width: 25px;
                 }
+
+                .mentions {
+                    font-size: 17px;
+                    font-weight: bold;
+                }
             }
         }
     }