From e7096dced114574d54981a14f1d2168268267ad7 Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Fri, 14 Jan 2022 02:06:45 +0100 Subject: [PATCH] Narrow mode user creation (#188) * Extract UserCreationButtons * Add CreationStartModal Co-authored-by: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> --- packages/react-chat/src/components/Chat.tsx | 2 + .../src/components/Chat/ChatInput.tsx | 53 ++++++++---- .../Modals/UserCreationStartModal.tsx | 26 ++++++ .../components/UserCreation/UserCreation.tsx | 63 ++++---------- .../UserCreation/UserCreationButtons.tsx | 85 +++++++++++++++++++ 5 files changed, 167 insertions(+), 62 deletions(-) create mode 100644 packages/react-chat/src/components/Modals/UserCreationStartModal.tsx create mode 100644 packages/react-chat/src/components/UserCreation/UserCreationButtons.tsx diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index 99f212cd..5bfbf222 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/packages/react-chat/src/components/Chat.tsx @@ -18,6 +18,7 @@ import { ProfileFoundModal } from "./Modals/ProfileFoundModal"; import { ProfileModal } from "./Modals/ProfileModal"; import { StatusModal } from "./Modals/StatusModal"; import { UserCreationModal } from "./Modals/UserCreationModal"; +import { UserCreationStartModal } from "./Modals/UserCreationStartModal"; import { WalletConnectModal } from "./Modals/WalletConnectModal"; import { WalletModal } from "./Modals/WalletModal"; import { ToastMessageList } from "./ToastMessages/ToastMessageList"; @@ -36,6 +37,7 @@ function Modals() { + ); } diff --git a/packages/react-chat/src/components/Chat/ChatInput.tsx b/packages/react-chat/src/components/Chat/ChatInput.tsx index 7b5cb014..21ef3864 100644 --- a/packages/react-chat/src/components/Chat/ChatInput.tsx +++ b/packages/react-chat/src/components/Chat/ChatInput.tsx @@ -10,6 +10,7 @@ import styled from "styled-components"; import { useIdentity } from "../../contexts/identityProvider"; import { useMessengerContext } from "../../contexts/messengerProvider"; import { useModal } from "../../contexts/modalProvider"; +import { useNarrow } from "../../contexts/narrowProvider"; import { Reply } from "../../hooks/useReply"; import { uintToImgUrl } from "../../utils/uintToImgUrl"; import { ClearSvg } from "../Icons/ClearIcon"; @@ -20,6 +21,7 @@ import { ReplySvg } from "../Icons/ReplyIcon"; import { StickerIcon } from "../Icons/StickerIcon"; import "emoji-mart/css/emoji-mart.css"; import { SizeLimitModal, SizeLimitModalName } from "../Modals/SizeLimitModal"; +import { UserCreationStartModalName } from "../Modals/UserCreationStartModal"; import { SearchBlock } from "../SearchBlock"; import { textMediumStyles, textSmallStyles } from "../Text"; @@ -31,6 +33,7 @@ interface ChatInputProps { } export function ChatInput({ reply, setReply }: ChatInputProps) { + const narrow = useNarrow(); const identity = useIdentity(); const disabled = useMemo(() => !identity, [identity]); const { sendMessage, contacts } = useMessengerContext(); @@ -41,6 +44,9 @@ export function ChatInput({ reply, setReply }: ChatInputProps) { const [imageUint, setImageUint] = useState(undefined); const { setModal } = useModal(SizeLimitModalName); + const { setModal: setCreationStartModal } = useModal( + UserCreationStartModalName + ); const [query, setQuery] = useState(""); @@ -253,21 +259,27 @@ export function ChatInput({ reply, setReply }: ChatInputProps) { onClick={() => setImageUint(undefined)} /> )} - + {narrow && !identity ? ( + setCreationStartModal(true)}> + Click here to join discussion + + ) : ( + + )} {query && ( theme.secondary}; + background: ${({ theme }) => theme.inputColor}; + border: none; + outline: none; + padding: 0 10px; + text-align: start; + + ${textMediumStyles}; +`; diff --git a/packages/react-chat/src/components/Modals/UserCreationStartModal.tsx b/packages/react-chat/src/components/Modals/UserCreationStartModal.tsx new file mode 100644 index 00000000..404ba391 --- /dev/null +++ b/packages/react-chat/src/components/Modals/UserCreationStartModal.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import styled from "styled-components"; + +import { UserCreationButtons } from "../UserCreation/UserCreationButtons"; + +import { Modal } from "./Modal"; +import { Heading, Section } from "./ModalStyle"; + +export const UserCreationStartModalName = "UserCreationStartModal"; + +export const UserCreationStartModal = () => { + return ( + +
+ Jump into the discussion +
+ + + + + ); +}; + +const MiddleSection = styled(Section)` + padding: 48px 0; +`; diff --git a/packages/react-chat/src/components/UserCreation/UserCreation.tsx b/packages/react-chat/src/components/UserCreation/UserCreation.tsx index 7d4e7c5f..4207998e 100644 --- a/packages/react-chat/src/components/UserCreation/UserCreation.tsx +++ b/packages/react-chat/src/components/UserCreation/UserCreation.tsx @@ -1,49 +1,29 @@ -import React, { useMemo } from "react"; +import React from "react"; import styled from "styled-components"; -import { useModal } from "../../contexts/modalProvider"; -import { loadEncryptedIdentity } from "../../utils"; -import { buttonStyles, buttonTransparentStyles } from "../Buttons/buttonStyle"; +import { useNarrow } from "../../contexts/narrowProvider"; import { ColorChatIcon } from "../Icons/ColorChatIcon"; -import { ProfileFoundModalName } from "../Modals/ProfileFoundModal"; -import { StatusModalName } from "../Modals/StatusModal"; -import { UserCreationModalName } from "../Modals/UserCreationModal"; -import { WalletModalName } from "../Modals/WalletModal"; -import { textSmallStyles } from "../Text"; + +import { UserCreationButtons } from "./UserCreationButtons"; interface UserCreationProps { permission: boolean; } export function UserCreation({ permission }: UserCreationProps) { - const { setModal } = useModal(UserCreationModalName); - const { setModal: setStatusModal } = useModal(StatusModalName); - const { setModal: setWalletModal } = useModal(WalletModalName); - const { setModal: setProfileFoundModal } = useModal(ProfileFoundModalName); + const narrow = useNarrow(); - const encryptedIdentity = useMemo(() => loadEncryptedIdentity(), []); - - return ( - - - Want to jump into the discussion? - setStatusModal(true)}> - Sync with Status profile - - setWalletModal(true)}> - Connect Ethereum Wallet - - {permission && ( - - encryptedIdentity ? setProfileFoundModal(true) : setModal(true) - } - > - Use a throwaway account - - )} - - ); + if (!narrow) { + return ( + + + Want to jump into the discussion? + + + ); + } else { + return null; + } } const Wrapper = styled.div` @@ -63,14 +43,3 @@ const TitleWrapper = styled.div` margin: 24px 0; color: ${({ theme }) => theme.primary}; `; - -const LoginBtn = styled.button` - ${buttonStyles} - ${textSmallStyles} - padding: 10px 12px; - margin-bottom: 16px; -`; - -const ThrowAwayButton = styled.button` - ${buttonTransparentStyles} -`; diff --git a/packages/react-chat/src/components/UserCreation/UserCreationButtons.tsx b/packages/react-chat/src/components/UserCreation/UserCreationButtons.tsx new file mode 100644 index 00000000..643dd56a --- /dev/null +++ b/packages/react-chat/src/components/UserCreation/UserCreationButtons.tsx @@ -0,0 +1,85 @@ +import React, { useMemo } from "react"; +import styled from "styled-components"; + +import { useModal } from "../../contexts/modalProvider"; +import { useNarrow } from "../../contexts/narrowProvider"; +import { loadEncryptedIdentity } from "../../utils"; +import { buttonStyles, buttonTransparentStyles } from "../Buttons/buttonStyle"; +import { ProfileFoundModalName } from "../Modals/ProfileFoundModal"; +import { StatusModalName } from "../Modals/StatusModal"; +import { UserCreationModalName } from "../Modals/UserCreationModal"; +import { UserCreationStartModalName } from "../Modals/UserCreationStartModal"; +import { WalletModalName } from "../Modals/WalletModal"; +import { textSmallStyles } from "../Text"; + +interface UserCreationProps { + permission: boolean; +} + +export function UserCreationButtons({ permission }: UserCreationProps) { + const narrow = useNarrow(); + const { setModal } = useModal(UserCreationModalName); + const { setModal: setStatusModal } = useModal(StatusModalName); + const { setModal: setWalletModal } = useModal(WalletModalName); + const { setModal: setProfileFoundModal } = useModal(ProfileFoundModalName); + const { setModal: setCreationStartModal } = useModal( + UserCreationStartModalName + ); + + const encryptedIdentity = useMemo(() => loadEncryptedIdentity(), []); + + return ( + + { + setStatusModal(true); + setCreationStartModal(false); + }} + className={`${narrow && "narrow"}`} + > + Sync with Status profile + + { + setWalletModal(true); + setCreationStartModal(false); + }} + className={`${narrow && "narrow"}`} + > + Connect Ethereum Wallet + + {permission && ( + { + encryptedIdentity ? setProfileFoundModal(true) : setModal(true); + setCreationStartModal(false); + }} + > + Use a throwaway account + + )} + + ); +} + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +`; + +const LoginBtn = styled.button` + ${buttonStyles} + ${textSmallStyles} + padding: 10px 12px; + margin-bottom: 16px; + + &.narrow { + margin-bottom: 32px; + } +`; + +const ThrowAwayButton = styled.button` + ${buttonTransparentStyles} +`;