From 2a38552281e67f8d7ca4db69baf20649dc7d6682 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Tue, 12 Oct 2021 12:06:59 +0200
Subject: [PATCH] Add offline indicator (#66)

---
 packages/react-chat/src/components/Members.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/react-chat/src/components/Members.tsx b/packages/react-chat/src/components/Members.tsx
index 94fcaa15..c0cdcdb9 100644
--- a/packages/react-chat/src/components/Members.tsx
+++ b/packages/react-chat/src/components/Members.tsx
@@ -105,7 +105,7 @@ export function Member({
         style={{
           backgroundImage: member.avatar ? `url(${member.avatar})` : "unset",
         }}
-        className={isOnline ? "online" : ""}
+        className={isOnline ? "online" : "offline"}
       >
         {!member.avatar && <UserIcon memberView={true} />}
       </MemberIcon>
@@ -182,12 +182,26 @@ const MemberIcon = styled(Icon)`
   background-position: center;
   flex-shrink: 0;
 
+  &.offline {
+    &::after {
+      content: "";
+      position: absolute;
+      right: -1px;
+      bottom: -2px;
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background-color: ${({ theme }) => theme.secondary};
+      border: 2px solid ${({ theme }) => theme.bodyBackgroundColor};
+    }
+  }
+
   &.online {
     &::after {
       content: "";
       position: absolute;
       right: -1px;
-      bottom: 1px;
+      bottom: -2px;
       width: 7px;
       height: 7px;
       border-radius: 50%;