the status color shape of chat item has been changed to circular shape

Author: mlelyakan

src/Avatar/Avatar.css

@@ -3,7 +3,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    overflow: hidden;
+    box-sizing: border-box;
+    position: relative;
 }
 
 .rce-avatar-container .rce-avatar {

src/ChatItem/ChatItem.css

@@ -3,6 +3,23 @@
     display: block;
     overflow: hidden;
     min-width: 240px;
+    position: relative;
+}
+
+.rce-container-citem::after {
+    content: "";
+    width: 85%;
+    height: 1px;
+    background: #f1f1f1;
+    margin: auto;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.rce-container-citem:last-of-type::after {
+    opacity: 0;
 }
 
 .rce-citem {
@@ -23,24 +40,26 @@
 }
 
 .rce-citem-avatar {
-    position: relative;
-    padding: 0 15px 0 13px;
+    padding: 0 13px 0 13px;
     justify-content: center;
     display: flex;
     align-items: center;
 }
 
 .rce-citem-status {
-    width: 20px;
-    height: 20px;
-    bottom: 10px;
-    right: 10px;
     position: absolute;
-    border-radius: 100%;
+    left:0;
+    right:0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    margin: auto;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: #ccc;
+    border-radius: 100%;
 }
 
 .rce-citem-avatar img {
@@ -64,7 +83,6 @@
     display: flex;
     justify-content: center;
     padding-right: 15px;
-    border-bottom: 1px solid rgba(0,0,0,.05);
     overflow: hidden;
 }
 

src/ChatItem/ChatItem.js

@@ -25,7 +25,7 @@ export class ChatItem extends Component {
                             size="large"
                             sideElement={
                                 this.props.statusColor &&
-                                <span className='rce-citem-status' style={{backgroundColor: this.props.statusColor}}>
+                                <span className='rce-citem-status' style={{boxShadow: `inset 0 0 0 2px ${this.props.statusColor}, inset 0 0 0 5px #FFFFFF`}}>
                                     {this.props.statusText}
                                 </span>
                             }