Logout (#162)

* Add logout button

* Make logout

* Fix member list view

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;

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 (
+    <Icon
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M13.5371 6C16.1605 6 18.2871 8.12665 18.2871 10.75V12.75C18.2871 13.1642 17.9513 13.5 17.5371 13.5C17.1229 13.5 16.7871 13.1642 16.7871 12.75V10.75C16.7871 8.95507 15.332 7.5 13.5371 7.5L12.5372 7.5H11.7499L10.75 7.5C8.95507 7.5 7.5 8.95507 7.5 10.75V11.4999V12.75V18.75V19.4999V20.75C7.5 22.5449 8.95507 24 10.75 24H11.7499H12.5372H13.5371C15.332 24 16.7871 22.5449 16.7871 20.75V18.75C16.7871 18.3358 17.1229 18 17.5371 18C17.9513 18 18.2871 18.3358 18.2871 18.75V20.75C18.2871 23.3734 16.1605 25.5 13.5371 25.5H12.5372H11.7499H10.75C8.12665 25.5 6 23.3734 6 20.75V19.4999V18.75V12.75V11.4999V10.75C6 8.12665 8.12665 6 10.75 6H11.7499H12.5372H13.5371Z" />
+      <path d="M21.9822 16.75C22.4277 16.75 22.6508 17.2886 22.3358 17.6036L20.4697 19.4697C20.1768 19.7626 20.1768 20.2374 20.4697 20.5303C20.7626 20.8232 21.2374 20.8232 21.5303 20.5303L25.5303 16.5303C25.8232 16.2374 25.8232 15.7626 25.5303 15.4697L21.5303 11.4697C21.2374 11.1768 20.7626 11.1768 20.4697 11.4697C20.1768 11.7626 20.1768 12.2374 20.4697 12.5303L22.3358 14.3964C22.6508 14.7114 22.4277 15.25 21.9822 15.25L12 15.25C11.5858 15.25 11.25 15.5858 11.25 16C11.25 16.4142 11.5858 16.75 12 16.75L21.9822 16.75Z" />
+    </Icon>
+  );
+};
+
+const Icon = styled.svg`
+  fill: ${({ theme }) => theme.primary};
+`;

packages/react-chat/src/components/Members/Member.tsx

@@ -57,10 +57,12 @@ export function Member({
           ]}
         />
       </MemberIcon>
-      <MemberName>{contact?.customName ?? contact.trueName}</MemberName>
-      <UserAddress>
-        {contact.id.slice(0, 5)}...{contact.id.slice(-3)}
-      </UserAddress>
+      <Column>
+        <MemberName>{contact?.customName ?? contact.trueName}</MemberName>
+        <UserAddress>
+          {contact.id.slice(0, 5)}...{contact.id.slice(-3)}
+        </UserAddress>
+      </Column>
     </MemberData>
   );
 }
@@ -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;
+`;

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 (
     <MembersListWrap>
-      <MemberCategory>
-        <MemberCategoryName>You</MemberCategoryName>
-        <MemberData>
-          <MemberIcon>
-            <UserIcon memberView={true} />
-          </MemberIcon>
-          {identity && <MemberName>{nickname}</MemberName>}
-        </MemberData>
-      </MemberCategory>
+      {identity && (
+        <MemberCategory>
+          <MemberCategoryName>You</MemberCategoryName>
+          <MemberData className="you">
+            <Row>
+              <MemberIcon>
+                <UserIcon memberView={true} />
+              </MemberIcon>
+              <MemberName>{nickname}</MemberName>
+            </Row>
+            <TopBtn onClick={() => logout(undefined)}>
+              <LogoutIcon />
+            </TopBtn>
+          </MemberData>
+        </MemberCategory>
+      )}
       {onlineContacts.length > 0 && (
         <MemberCategory>
           <MemberCategoryName>Online</MemberCategoryName>
@@ -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;
+`;

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;

packages/react-chat/src/components/Messages/UiMessage.tsx

@@ -130,7 +130,7 @@ export function UiMessage({
             <MessageHeaderWrapper>
               <UserNameWrapper>
                 <UserName> {contact?.customName ?? contact.trueName}</UserName>
-                <UserAddress>
+                <UserAddress className="chat">
                   {message.sender.slice(0, 5)}...{message.sender.slice(-3)}
                 </UserAddress>
                 {contact.isUntrustworthy && <UntrustworthIcon />}