PLT-946 Add status icon to the left of the username in DM channel (#3258)

Add a StatusIcon component to be able to display a status icon from anywhere

webapp/sass/components/_status-icon.scss

@@ -0,0 +1,33 @@
+@charset 'UTF-8';
+
+.status {
+    display: inline-block;
+    margin-right: 6px;
+    position: relative;
+    top: 1px;
+    width: 12px;
+
+    svg {
+        max-height: 14px;
+    }
+
+    i,
+    path,
+    ellipse {
+        @include opacity(.5);
+
+        &.online--icon,
+        &.away--icon {
+            @include opacity(1);
+        }
+    }
+
+    .fa-lock {
+        margin-left: 1px;
+    }
+
+    .fa-globe {
+        position: relative;
+        top: -1px;
+    }
+}

webapp/sass/layout/_headers.scss

@@ -144,6 +144,8 @@
             white-space: normal;
         }
     }
+
+    @import "../components/status-icon";
 }
 
 .channel-intro {

webapp/sass/layout/_sidebar-left.scss

@@ -60,38 +60,6 @@
         top: 5px;
     }
 
-    .status {
-        display: inline-block;
-        margin-right: 6px;
-        position: relative;
-        top: 1px;
-        width: 12px;
-
-        svg {
-            max-height: 14px;
-        }
-
-        i,
-        path,
-        ellipse {
-            @include opacity(.5);
-
-            &.online--icon,
-            &.away--icon {
-                @include opacity(1);
-            }
-        }
-
-        .fa-lock {
-            margin-left: 1px;
-        }
-
-        .fa-globe {
-            position: relative;
-            top: -1px;
-        }
-    }
-
     .nav-pills__container {
         -webkit-overflow-scrolling: touch;
         height: calc(100% - 80px);
@@ -234,6 +202,8 @@
             color: #666666;
         }
     }
+
+    @import "../components/status-icon";
 }
 
 .channel-loading-gif {

webapp/sass/responsive/_mobile.scss

@@ -590,6 +590,8 @@
 
             .navbar-brand {
                 white-space: nowrap;
+
+                @import "../components/status-icon";
             }
         }
     }