From 7c3bb65e09f19025defd595b97ec4bc12f5438de Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Wed, 22 Dec 2021 17:03:37 +0100 Subject: [PATCH] Logout (#162) * Add logout button * Make logout * Fix member list view --- .../src/components/Chat/ChatTopbar.tsx | 2 +- .../src/components/Icons/LogoutIcon.tsx | 21 ++++++++++ .../src/components/Members/Member.tsx | 22 +++++++--- .../src/components/Members/MembersList.tsx | 41 ++++++++++++++----- .../src/components/Messages/Styles.tsx | 2 +- .../src/components/Messages/UiMessage.tsx | 2 +- 6 files changed, 71 insertions(+), 19 deletions(-) create mode 100644 packages/react-chat/src/components/Icons/LogoutIcon.tsx 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 && }