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

@@ -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 />
     </>
   );
 }

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 | Uint8Array>(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)}
               />
             )}
-            <Input
-              aria-disabled={disabled}
-              contentEditable={!disabled}
-              onInput={onInputChange}
-              onKeyDown={onInputKeyPress}
-              onKeyUp={handleCursorChange}
-              ref={inputRef}
-              onClick={handleCursorChange}
-              dangerouslySetInnerHTML={{
-                __html: disabled
-                  ? "You need to join this community to send messages"
-                  : clearComponent,
-              }}
-              className={`${disabled && "disabled"} `}
-            />
+            {narrow && !identity ? (
+              <JoinBtn onClick={() => setCreationStartModal(true)}>
+                Click here to join discussion
+              </JoinBtn>
+            ) : (
+              <Input
+                aria-disabled={disabled}
+                contentEditable={!disabled}
+                onInput={onInputChange}
+                onKeyDown={onInputKeyPress}
+                onKeyUp={handleCursorChange}
+                ref={inputRef}
+                onClick={handleCursorChange}
+                dangerouslySetInnerHTML={{
+                  __html: disabled
+                    ? "You need to join this community to send messages"
+                    : clearComponent,
+                }}
+                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};
+`;

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

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 (
-    <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>
-      )}
-    </Wrapper>
-  );
+  if (!narrow) {
+    return (
+      <Wrapper>
+        <ColorChatIcon />
+        <TitleWrapper>Want to jump into the discussion?</TitleWrapper>
+        <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}
-`;

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 (
+    <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}
+`;