diff --git a/packages/react-chat/src/components/Chat/ChatTopbar.tsx b/packages/react-chat/src/components/Chat/ChatTopbar.tsx
index c1992749..11cfee4d 100644
--- a/packages/react-chat/src/components/Chat/ChatTopbar.tsx
+++ b/packages/react-chat/src/components/Chat/ChatTopbar.tsx
@@ -184,7 +184,7 @@ const ActivityWrapper = styled.div`
}
`;
-const TopBtn = styled.button`
+export const TopBtn = styled.button`
width: 32px;
height: 32px;
border-radius: 8px;
diff --git a/packages/react-chat/src/components/Icons/LogoutIcon.tsx b/packages/react-chat/src/components/Icons/LogoutIcon.tsx
new file mode 100644
index 00000000..1efe7dac
--- /dev/null
+++ b/packages/react-chat/src/components/Icons/LogoutIcon.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import styled from "styled-components";
+
+export const LogoutIcon = () => {
+ return (
+
+
+
+
+ );
+};
+
+const Icon = styled.svg`
+ fill: ${({ theme }) => theme.primary};
+`;
diff --git a/packages/react-chat/src/components/Members/Member.tsx b/packages/react-chat/src/components/Members/Member.tsx
index f2c22f69..1d1a7a48 100644
--- a/packages/react-chat/src/components/Members/Member.tsx
+++ b/packages/react-chat/src/components/Members/Member.tsx
@@ -57,10 +57,12 @@ export function Member({
]}
/>
- {contact?.customName ?? contact.trueName}
-
- {contact.id.slice(0, 5)}...{contact.id.slice(-3)}
-
+
+ {contact?.customName ?? contact.trueName}
+
+ {contact.id.slice(0, 5)}...{contact.id.slice(-3)}
+
+
);
}
@@ -70,6 +72,10 @@ export const MemberData = styled.div`
align-items: center;
margin-bottom: 16px;
cursor: pointer;
+
+ &.you {
+ justify-content: space-between;
+ }
`;
export const MemberName = styled.p`
@@ -78,11 +84,9 @@ export const MemberName = styled.p`
line-height: 22px;
color: ${({ theme }) => theme.primary};
opacity: 0.7;
- margin-left: 8px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
- margin-right: 4px;
`;
export const MemberIcon = styled(Icon)`
@@ -121,3 +125,9 @@ export const MemberIcon = styled(Icon)`
}
}
`;
+
+const Column = styled.div`
+ display: flex;
+ flex-direction: column;
+ margin-left: 8px;
+`;
diff --git a/packages/react-chat/src/components/Members/MembersList.tsx b/packages/react-chat/src/components/Members/MembersList.tsx
index e3befa52..2f2c6001 100644
--- a/packages/react-chat/src/components/Members/MembersList.tsx
+++ b/packages/react-chat/src/components/Members/MembersList.tsx
@@ -2,8 +2,14 @@ import React, { useMemo } from "react";
import { bufToHex } from "status-communities/dist/cjs/utils";
import styled from "styled-components";
-import { useIdentity, useNickname } from "../../contexts/identityProvider";
+import {
+ useIdentity,
+ useNickname,
+ useSetIdentity,
+} from "../../contexts/identityProvider";
import { useMessengerContext } from "../../contexts/messengerProvider";
+import { TopBtn } from "../Chat/ChatTopbar";
+import { LogoutIcon } from "../Icons/LogoutIcon";
import { UserIcon } from "../Icons/UserIcon";
import { Member, MemberData, MemberIcon } from "./Member";
@@ -16,6 +22,7 @@ export function MembersList({ switchShowMembers }: MembersListProps) {
const { contacts } = useMessengerContext();
const identity = useIdentity();
const nickname = useNickname();
+ const logout = useSetIdentity();
const userContacts = useMemo(() => {
if (identity) {
return Object.values(contacts).filter(
@@ -36,15 +43,22 @@ export function MembersList({ switchShowMembers }: MembersListProps) {
return (
-
- You
-
-
-
-
- {identity && {nickname}}
-
-
+ {identity && (
+
+ You
+
+
+
+
+
+ {nickname}
+
+ logout(undefined)}>
+
+
+
+
+ )}
{onlineContacts.length > 0 && (
Online
@@ -110,3 +124,10 @@ const MemberName = styled.p`
overflow: hidden;
white-space: nowrap;
`;
+
+const Row = styled.div`
+ display: flex;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+`;
diff --git a/packages/react-chat/src/components/Messages/Styles.tsx b/packages/react-chat/src/components/Messages/Styles.tsx
index f2d24b9a..2eb19a8b 100644
--- a/packages/react-chat/src/components/Messages/Styles.tsx
+++ b/packages/react-chat/src/components/Messages/Styles.tsx
@@ -87,7 +87,7 @@ export const UserAddress = styled.p`
position: relative;
padding-right: 8px;
- &:after {
+ &.chat:after {
content: "";
position: absolute;
right: 0;
diff --git a/packages/react-chat/src/components/Messages/UiMessage.tsx b/packages/react-chat/src/components/Messages/UiMessage.tsx
index 60ee025f..f1610103 100644
--- a/packages/react-chat/src/components/Messages/UiMessage.tsx
+++ b/packages/react-chat/src/components/Messages/UiMessage.tsx
@@ -130,7 +130,7 @@ export function UiMessage({
{contact?.customName ?? contact.trueName}
-
+
{message.sender.slice(0, 5)}...{message.sender.slice(-3)}
{contact.isUntrustworthy && }