From a23e489adce3c1ad415008b8a3fab2927ebb5445 Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Tue, 4 Jan 2022 16:03:51 +0100 Subject: [PATCH] Logout modal (#170) * Fix mention in input * Extract buttons style * Add logout modal --- packages/react-chat-example/src/index.tsx | 2 +- .../src/components/Buttons/buttonStyle.ts | 21 +++- packages/react-chat/src/components/Chat.tsx | 2 + .../src/components/Chat/ChatInput.tsx | 2 +- .../src/components/Members/MembersList.tsx | 12 +-- .../src/components/Modals/LinkModal.tsx | 21 +--- .../src/components/Modals/LogoutModal.tsx | 98 +++++++++++++++++++ .../src/components/Modals/ProfileModal.tsx | 11 ++- 8 files changed, 136 insertions(+), 33 deletions(-) create mode 100644 packages/react-chat/src/components/Modals/LogoutModal.tsx diff --git a/packages/react-chat-example/src/index.tsx b/packages/react-chat-example/src/index.tsx index 880fc5f1..96885d23 100644 --- a/packages/react-chat-example/src/index.tsx +++ b/packages/react-chat-example/src/index.tsx @@ -76,7 +76,7 @@ function DragDiv() { diff --git a/packages/react-chat/src/components/Buttons/buttonStyle.ts b/packages/react-chat/src/components/Buttons/buttonStyle.ts index d531e9f7..fd29e47b 100644 --- a/packages/react-chat/src/components/Buttons/buttonStyle.ts +++ b/packages/react-chat/src/components/Buttons/buttonStyle.ts @@ -1,4 +1,4 @@ -import { css } from "styled-components"; +import styled, { css } from "styled-components"; export const buttonStyles = css` font-family: "Inter"; @@ -38,3 +38,22 @@ export const buttonTransparentStyles = css` background: ${({ theme }) => theme.buttonBg}; } `; + +export const ButtonNo = styled.button` + padding: 11px 24px; + margin-right: 16px; + + ${buttonStyles} + background: ${({ theme }) => theme.buttonNoBg}; + color: ${({ theme }) => theme.redColor}; + + &:hover { + background: ${({ theme }) => theme.buttonNoBgHover}; + } +`; + +export const ButtonYes = styled.button` + padding: 11px 24px; + + ${buttonStyles} +`; diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index 4f99c0fe..83707e35 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/packages/react-chat/src/components/Chat.tsx @@ -13,6 +13,7 @@ import { Members } from "./Members/Members"; import { CoinbaseModal } from "./Modals/CoinbaseModal"; import { CommunityModal } from "./Modals/CommunityModal"; import { EditModal } from "./Modals/EditModal"; +import { LogoutModal } from "./Modals/LogoutModal"; import { ProfileModal } from "./Modals/ProfileModal"; import { StatusModal } from "./Modals/StatusModal"; import { UserCreationModal } from "./Modals/UserCreationModal"; @@ -32,6 +33,7 @@ function Modals() { + ); } diff --git a/packages/react-chat/src/components/Chat/ChatInput.tsx b/packages/react-chat/src/components/Chat/ChatInput.tsx index f101fb7c..6db6ca09 100644 --- a/packages/react-chat/src/components/Chat/ChatInput.tsx +++ b/packages/react-chat/src/components/Chat/ChatInput.tsx @@ -375,7 +375,7 @@ const Input = styled.div` } & > span { - display: inline-block; + display: inline; color: ${({ theme }) => theme.mentionColor}; background: ${({ theme }) => theme.mentionBg}; border-radius: 4px; diff --git a/packages/react-chat/src/components/Members/MembersList.tsx b/packages/react-chat/src/components/Members/MembersList.tsx index b4756a04..06af8281 100644 --- a/packages/react-chat/src/components/Members/MembersList.tsx +++ b/packages/react-chat/src/components/Members/MembersList.tsx @@ -3,14 +3,12 @@ import { utils } from "status-communities/dist/cjs"; import { bufToHex } from "status-communities/dist/cjs/utils"; import styled from "styled-components"; -import { - useIdentity, - useNickname, - useSetIdentity, -} from "../../contexts/identityProvider"; +import { useIdentity, useNickname } from "../../contexts/identityProvider"; import { useMessengerContext } from "../../contexts/messengerProvider"; +import { useModal } from "../../contexts/modalProvider"; import { buttonStyles } from "../Buttons/buttonStyle"; import { LogoutIcon } from "../Icons/LogoutIcon"; +import { LogoutModalName } from "../Modals/LogoutModal"; import { Member } from "./Member"; @@ -21,8 +19,8 @@ interface MembersListProps { export function MembersList({ switchShowMembers }: MembersListProps) { const { contacts } = useMessengerContext(); const identity = useIdentity(); + const { setModal } = useModal(LogoutModalName); - const logout = useSetIdentity(); const nickname = useNickname(); const userContacts = useMemo(() => { @@ -58,7 +56,7 @@ export function MembersList({ switchShowMembers }: MembersListProps) { }} isYou={true} /> - logout(undefined)}> + setModal(true)}> diff --git a/packages/react-chat/src/components/Modals/LinkModal.tsx b/packages/react-chat/src/components/Modals/LinkModal.tsx index e288298c..6c260bc8 100644 --- a/packages/react-chat/src/components/Modals/LinkModal.tsx +++ b/packages/react-chat/src/components/Modals/LinkModal.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled from "styled-components"; import { useModal } from "../../contexts/modalProvider"; -import { buttonStyles } from "../Buttons/buttonStyle"; +import { ButtonNo, ButtonYes } from "../Buttons/buttonStyle"; import { textMediumStyles } from "../Text"; import { Modal } from "./Modal"; @@ -46,22 +46,3 @@ const Link = styled.a` ${textMediumStyles} `; - -const ButtonNo = styled.button` - padding: 11px 24px; - margin-right: 16px; - - ${buttonStyles} - background: ${({ theme }) => theme.buttonNoBg}; - color: ${({ theme }) => theme.redColor}; - - &:hover { - background: ${({ theme }) => theme.buttonNoBgHover}; - } -`; - -const ButtonYes = styled.button` - padding: 11px 24px; - - ${buttonStyles} -`; diff --git a/packages/react-chat/src/components/Modals/LogoutModal.tsx b/packages/react-chat/src/components/Modals/LogoutModal.tsx new file mode 100644 index 00000000..a720367b --- /dev/null +++ b/packages/react-chat/src/components/Modals/LogoutModal.tsx @@ -0,0 +1,98 @@ +import React from "react"; +import { utils } from "status-communities/dist/cjs"; +import styled from "styled-components"; + +import { + useIdentity, + useNickname, + useSetIdentity, +} from "../../contexts/identityProvider"; +import { useModal } from "../../contexts/modalProvider"; +import { ButtonNo, ButtonYes } from "../Buttons/buttonStyle"; +import { UserLogo } from "../Members/UserLogo"; + +import { Modal } from "./Modal"; +import { ButtonSection, Heading, Section, Text } from "./ModalStyle"; +import { + EmojiKey, + UserAddress, + UserAddressWrapper, + UserName, + UserNameWrapper, +} from "./ProfileModal"; + +export const LogoutModalName = "LogoutModal"; + +export const LogoutModal = () => { + const { setModal } = useModal(LogoutModalName); + const logout = useSetIdentity(); + const identity = useIdentity(); + const nickname = useNickname(); + + if (identity) { + return ( + +
+ Disconnect +
+
+ Do you want to disconnect your profile? + + + + {" "} + {nickname} + + + + + {" "} + Chatkey: {identity.privateKey.slice(0, 10)}... + {identity.privateKey.slice(-3)}{" "} + + + 🎩🍞πŸ₯‘πŸ¦πŸŒˆπŸ“‘πŸ’…πŸ»β™£οΈπŸ””β›ΈπŸ‘΅πŸ…± + +
+ + { + setModal(false); + logout(undefined); + }} + > + Disconnect + + { + setModal(false); + }} + > + Stay Connected + + + + ); + } + + return null; +}; + +const UserSection = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin: 8px 0; +`; diff --git a/packages/react-chat/src/components/Modals/ProfileModal.tsx b/packages/react-chat/src/components/Modals/ProfileModal.tsx index d0a5a312..a662e459 100644 --- a/packages/react-chat/src/components/Modals/ProfileModal.tsx +++ b/packages/react-chat/src/components/Modals/ProfileModal.tsx @@ -303,7 +303,7 @@ const ProfileIcon = styled.div` } `; -const UserNameWrapper = styled.div` +export const UserNameWrapper = styled.div` display: flex; justify-content: center; align-items: center; @@ -312,9 +312,13 @@ const UserNameWrapper = styled.div` & > svg { fill: ${({ theme }) => theme.tertiary}; } + + &.logout { + margin: 8px 0; + } `; -const UserName = styled.p` +export const UserName = styled.p` color: ${({ theme }) => theme.primary}; font-weight: bold; font-size: 22px; @@ -337,7 +341,7 @@ const UserTrueName = styled.p` margin-top: 8px; `; -const UserAddressWrapper = styled.div` +export const UserAddressWrapper = styled.div` display: flex; justify-content: center; align-items: center; @@ -370,6 +374,7 @@ export const EmojiKey = styled.div` letter-spacing: 0.2px; &.small { + width: 83px; ${textSmallStyles} } `;