Narrow mode user creation (#188)

* Extract UserCreationButtons

* Add CreationStartModal

Co-authored-by: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
This commit is contained in:
Maria Rushkova 2022-01-14 02:06:45 +01:00 committed by GitHub
parent 15f64df575
commit e7096dced1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 167 additions and 62 deletions

View File

@ -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() {
<LogoutModal />
<AgreementModal />
<ProfileFoundModal />
<UserCreationStartModal />
</>
);
}

View File

@ -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 | Uint8Array>(undefined);
const { setModal } = useModal(SizeLimitModalName);
const { setModal: setCreationStartModal } = useModal(
UserCreationStartModalName
);
const [query, setQuery] = useState("");
@ -253,6 +259,11 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
onClick={() => setImageUint(undefined)}
/>
)}
{narrow && !identity ? (
<JoinBtn onClick={() => setCreationStartModal(true)}>
Click here to join discussion
</JoinBtn>
) : (
<Input
aria-disabled={disabled}
contentEditable={!disabled}
@ -268,6 +279,7 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
}}
className={`${disabled && "disabled"} `}
/>
)}
{query && (
<SearchBlock
query={query}
@ -470,3 +482,14 @@ export const ReplyOn = styled.div`
text-overflow: ellipsis;
${textSmallStyles};
`;
const JoinBtn = styled.button`
color: ${({ theme }) => theme.secondary};
background: ${({ theme }) => theme.inputColor};
border: none;
outline: none;
padding: 0 10px;
text-align: start;
${textMediumStyles};
`;

View File

@ -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 (
<Modal name={UserCreationStartModalName}>
<Section>
<Heading>Jump into the discussion</Heading>
</Section>
<MiddleSection>
<UserCreationButtons permission={true} />
</MiddleSection>
</Modal>
);
};
const MiddleSection = styled(Section)`
padding: 48px 0;
`;

View File

@ -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 encryptedIdentity = useMemo(() => loadEncryptedIdentity(), []);
const narrow = useNarrow();
if (!narrow) {
return (
<Wrapper>
<ColorChatIcon />
<TitleWrapper>Want to jump into the discussion?</TitleWrapper>
<LoginBtn onClick={() => setStatusModal(true)}>
Sync with Status profile
</LoginBtn>
<LoginBtn onClick={() => setWalletModal(true)}>
Connect Ethereum Wallet
</LoginBtn>
{permission && (
<ThrowAwayButton
onClick={() =>
encryptedIdentity ? setProfileFoundModal(true) : setModal(true)
}
>
Use a throwaway account
</ThrowAwayButton>
)}
<UserCreationButtons permission={permission} />
</Wrapper>
);
} 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}
`;

View File

@ -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 (
<Wrapper>
<LoginBtn
onClick={() => {
setStatusModal(true);
setCreationStartModal(false);
}}
className={`${narrow && "narrow"}`}
>
Sync with Status profile
</LoginBtn>
<LoginBtn
onClick={() => {
setWalletModal(true);
setCreationStartModal(false);
}}
className={`${narrow && "narrow"}`}
>
Connect Ethereum Wallet
</LoginBtn>
{permission && (
<ThrowAwayButton
onClick={() => {
encryptedIdentity ? setProfileFoundModal(true) : setModal(true);
setCreationStartModal(false);
}}
>
Use a throwaway account
</ThrowAwayButton>
)}
</Wrapper>
);
}
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}
`;