PLT-5122 - Switching to circular status icons (#5049)

* PLT-5122 - Switching to circular status icons

* Adding profile pic crop for status indicators

* Updating status indicators in LHS

* Updating else statements

3 files changed, 34 insertions, 40 deletions

diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss
index 82555cfb6..4ae27aed4 100644
--- a/webapp/sass/components/_emoticons.scss
+++ b/webapp/sass/components/_emoticons.scss
@@ -1,13 +1,13 @@
 @charset 'UTF-8';
 
 .emoticon {
-    background-repeat: no-repeat;
     background-position: 50% 50%;
+    background-repeat: no-repeat;
     background-size: contain;
     display: inline-block;
-    height: 1.3em;
+    height: 20px;
     vertical-align: text-top;
-    width: 1.3em;
+    width: 20px;
 }
 
 .emoticon-suggestion {
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 83f2ef907..0078ddec4 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -514,30 +514,6 @@
 
 }
 
-
-.status-wrapper {
-    display: inline-block;
-    height: 32px;
-    position: relative;
-
-    &:after {
-        border-radius: 100%;
-        bottom: -2px;
-        content: '';
-        display: block;
-        height: 8px;
-        position: absolute;
-        right: 0;
-        width: 8px;
-    }
-
-    &.status-offline {
-        &:after {
-            background: #D3D3D3;
-        }
-    }
-}
-
 .more-modal__list {
     display: flex;
     flex-direction: column;
@@ -556,12 +532,6 @@
 
         .more-modal__row {
             padding: 5px 10px;
-
-            .status-wrapper {
-                &:after {
-                    bottom: 0;
-                }
-            }
         }
 
         .more-modal__name {
@@ -575,12 +545,6 @@
         flex-shrink: 0;
         margin-top: 2px;
         max-width: none;
-
-        .status-wrapper {
-            &:after {
-                bottom: 3px;
-            }
-        }
     }
 
     .more-modal__details {
diff --git a/webapp/sass/components/_status-icon.scss b/webapp/sass/components/_status-icon.scss
index 32ce07164..5bd68f362 100644
--- a/webapp/sass/components/_status-icon.scss
+++ b/webapp/sass/components/_status-icon.scss
@@ -1,5 +1,34 @@
 @charset 'UTF-8';
 
+.status-wrapper {
+    display: inline-block;
+    height: 32px;
+    position: relative;
+
+    .status {
+        border-radius: 100px;
+        bottom: -4px;
+        height: 15px;
+        line-height: 0;
+        margin: 0;
+        position: absolute;
+        right: -3px;
+        top: auto;
+        width: 15px;
+
+        .modal & {
+            bottom: -6px;
+        }
+
+
+        svg {
+            max-height: 11px;
+            position: relative;
+            top: 2px;
+        }
+    }
+}
+
 .status {
     display: inline-block;
     margin-right: 6px;
@@ -30,4 +59,5 @@
         position: relative;
         top: -1px;
     }
-}
\ No newline at end of file
+}
+