PLT-1831 Add statuses to centre channel profile pictures (#3826)

* Created profile picture componenet and added statuses to pictures in center channel

* PLT-3899 - Updating UI for status indicators (#3823)

* PLT-3899 - Updating UI for status indicators

* Updating position of timestamps for compact layout

1 files changed, 29 insertions, 19 deletions

diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index dd62fc20c..a12856c63 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -483,6 +483,30 @@
 
 }
 
+
+.status-wrapper {
+    display: inline-block;
+    margin-right: 3px;
+    position: relative;
+
+    &:after {
+        border-radius: 100%;
+        bottom: 4px;
+        content: '';
+        display: block;
+        height: 8px;
+        position: absolute;
+        right: 0;
+        width: 8px;
+    }
+
+    &.status-offline {
+        &:after {
+            background: #D3D3D3;
+        }
+    }
+}
+
 .more-modal__list {
     display: flex;
     flex-direction: column;
@@ -504,26 +528,12 @@
         @include border-radius(60px);
         flex-grow: 0;
         flex-shrink: 0;
-	  	max-width: none;
-
-        &-wrapper {
-            position: relative;
-            display: inline-block;
-            margin-right: 8px;
+        margin-top: 2px;
+        max-width: none;
 
+        .status-wrapper {
             &:after {
-                content: "";
-                right: 0;
-                bottom: 0;
-                width: 25%;
-                height: 25%;
-                display: block;
-                position: absolute;
-                border-radius: 100%;
-            }
-
-            &.status-offline:after {
-                background: #D3D3D3;
+                bottom: 3px;
             }
         }
     }
@@ -586,4 +596,4 @@
         flex-grow: 1;
         flex-shrink: 1;
     }
-}
\ No newline at end of file
+}