status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add offline indicator (#66)

This commit is contained in:
Maria Rushkova 2021-10-12 12:06:59 +02:00 committed by GitHub
parent f7916f283f
commit 2a38552281
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/react-chat/src/components/Members.tsx
View File

@ -105,7 +105,7 @@ export function Member({
style={{ style={{
backgroundImage: member.avatar ? `url(${member.avatar})` : "unset", backgroundImage: member.avatar ? `url(${member.avatar})` : "unset",
}} }}
className={isOnline ? "online" : ""} className={isOnline ? "online" : "offline"}
> >
{!member.avatar && <UserIcon memberView={true} />} {!member.avatar && <UserIcon memberView={true} />}
</MemberIcon> </MemberIcon>
@ -182,12 +182,26 @@ const MemberIcon = styled(Icon)`
background-position: center; background-position: center;
flex-shrink: 0; 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 { &.online {
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
right: -1px; right: -1px;
bottom: 1px; bottom: -2px;
width: 7px; width: 7px;
height: 7px; height: 7px;
border-radius: 50%; border-radius: 50%;