From 094976642aca5b5cb1554b318481cf04c82b03fc Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Tue, 28 Dec 2021 12:34:54 +0100 Subject: [PATCH] Login flow (#163) * Add button styles * Fix UserCreation styles * Extract addWrapper * Fix UserCreationModal styles * Add next step modal * Change UserLogo styles * Add colorWheel to You user * Add qrcode.react package * Fix profile icon * Add icons * Add Status modal for mobile * Extract input styles * Add Status modal for desktop * Change paste function * Extract login instructions --- ....react-npm-1.0.2-f8cabf6225-be256f0192.zip | Bin 0 -> 3389 bytes .../qr.js-npm-0.0.0-eea89f459b-5ac6c39396.zip | Bin 0 -> 12406 bytes ....react-npm-1.0.1-ddb3a7650e-154a9557d1.zip | Bin 0 -> 9865 bytes packages/react-chat/package.json | 2 + .../src/components/ActivityCenter.tsx | 16 +- .../src/components/Buttons/DownloadButton.tsx | 4 - .../src/components/Buttons/buttonStyle.ts | 40 +++++ .../src/components/Buttons/buttonStyle.tsx | 12 -- packages/react-chat/src/components/Chat.tsx | 2 + .../src/components/Form/CopyInput.tsx | 58 +------ .../src/components/Form/LoginInstructions.tsx | 93 +++++++++++ .../src/components/Form/PasteInput.tsx | 43 +++++ .../src/components/Form/inputStyles.ts | 73 ++++++++ .../src/components/Icons/ChainIcon.tsx | 30 ++++ .../src/components/Icons/MobileIcon.tsx | 25 +++ .../src/components/Icons/ProfileIcon.tsx | 12 +- .../src/components/Icons/ScanIcon.tsx | 40 +++++ .../src/components/Members/Member.tsx | 13 +- .../src/components/Members/MembersList.tsx | 45 +++-- .../src/components/Members/UserLogo.tsx | 35 ++-- .../src/components/Modals/EditModal.tsx | 17 +- .../src/components/Modals/LinkModal.tsx | 4 - .../src/components/Modals/ModalStyle.tsx | 28 ++-- .../src/components/Modals/ProfileModal.tsx | 17 +- .../src/components/Modals/StatusModal.tsx | 92 ++++++++++ .../components/Modals/UserCreationModal.tsx | 157 +++++++++++++----- .../components/UserCreation/UserCreation.tsx | 69 ++++---- packages/react-chat/src/models/Contact.ts | 6 +- packages/react-chat/src/styles/Inputs.ts | 10 -- packages/react-chat/src/utils/paste.ts | 9 + yarn.lock | 31 ++++ 31 files changed, 704 insertions(+), 279 deletions(-) create mode 100644 .yarn/cache/@types-qrcode.react-npm-1.0.2-f8cabf6225-be256f0192.zip create mode 100644 .yarn/cache/qr.js-npm-0.0.0-eea89f459b-5ac6c39396.zip create mode 100644 .yarn/cache/qrcode.react-npm-1.0.1-ddb3a7650e-154a9557d1.zip create mode 100644 packages/react-chat/src/components/Buttons/buttonStyle.ts delete mode 100644 packages/react-chat/src/components/Buttons/buttonStyle.tsx create mode 100644 packages/react-chat/src/components/Form/LoginInstructions.tsx create mode 100644 packages/react-chat/src/components/Form/PasteInput.tsx create mode 100644 packages/react-chat/src/components/Form/inputStyles.ts create mode 100644 packages/react-chat/src/components/Icons/ChainIcon.tsx create mode 100644 packages/react-chat/src/components/Icons/MobileIcon.tsx create mode 100644 packages/react-chat/src/components/Icons/ScanIcon.tsx create mode 100644 packages/react-chat/src/components/Modals/StatusModal.tsx delete mode 100644 packages/react-chat/src/styles/Inputs.ts create mode 100644 packages/react-chat/src/utils/paste.ts diff --git a/.yarn/cache/@types-qrcode.react-npm-1.0.2-f8cabf6225-be256f0192.zip b/.yarn/cache/@types-qrcode.react-npm-1.0.2-f8cabf6225-be256f0192.zip new file mode 100644 index 0000000000000000000000000000000000000000..e2cd2fc6e8e67be95155779375ecbffb80a6a6ab GIT binary patch literal 3389 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 HuW$bWu(g%& literal 0 HcmV?d00001 diff --git a/.yarn/cache/qr.js-npm-0.0.0-eea89f459b-5ac6c39396.zip b/.yarn/cache/qr.js-npm-0.0.0-eea89f459b-5ac6c39396.zip new file mode 100644 index 0000000000000000000000000000000000000000..0ba96dc4e4c296cfa3d75bf8c6c47b404347dc3d GIT binary patch literal 12406 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 R5ZI4@$FL9(t_(l_`yXm3LFWJf literal 0 HcmV?d00001 diff --git a/.yarn/cache/qrcode.react-npm-1.0.1-ddb3a7650e-154a9557d1.zip b/.yarn/cache/qrcode.react-npm-1.0.1-ddb3a7650e-154a9557d1.zip new file mode 100644 index 0000000000000000000000000000000000000000..bb13128cae4f7764bb7926ea64b56613c423133d GIT binary patch literal 9865 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 theme.bodyBackgroundColor}; + ${buttonTransparentStyles} & + & { margin-left: 8px; } - - &:hover { - background: ${({ theme }) => theme.buttonBgHover}; - } - - &:focus { - background: ${({ theme }) => theme.buttonBg}; - } `; const BtnWrapper = styled.div` diff --git a/packages/react-chat/src/components/Buttons/DownloadButton.tsx b/packages/react-chat/src/components/Buttons/DownloadButton.tsx index 9734b6ac..aabbb4b4 100644 --- a/packages/react-chat/src/components/Buttons/DownloadButton.tsx +++ b/packages/react-chat/src/components/Buttons/DownloadButton.tsx @@ -66,10 +66,6 @@ const Link = styled.a` ${buttonStyles} - &:hover { - background: ${({ theme }) => theme.buttonBgHover}; - } - &.activity { margin: 0; padding: 0; diff --git a/packages/react-chat/src/components/Buttons/buttonStyle.ts b/packages/react-chat/src/components/Buttons/buttonStyle.ts new file mode 100644 index 00000000..d531e9f7 --- /dev/null +++ b/packages/react-chat/src/components/Buttons/buttonStyle.ts @@ -0,0 +1,40 @@ +import { css } from "styled-components"; + +export const buttonStyles = css` + font-family: "Inter"; + font-weight: 500; + font-size: 15px; + line-height: 22px; + text-align: center; + border-radius: 8px; + color: ${({ theme }) => theme.tertiary}; + background: ${({ theme }) => theme.buttonBg}; + + &:hover { + background: ${({ theme }) => theme.buttonBgHover}; + } + + &:focus { + background: ${({ theme }) => theme.buttonBg}; + } +`; + +export const buttonTransparentStyles = css` + font-family: "Inter"; + font-weight: 500; + font-size: 13px; + line-height: 18px; + text-align: center; + color: ${({ theme }) => theme.tertiary}; + background: inherit; + padding: 10px 12px; + border-radius: 8px; + + &:hover { + background: ${({ theme }) => theme.buttonBgHover}; + } + + &:focus { + background: ${({ theme }) => theme.buttonBg}; + } +`; diff --git a/packages/react-chat/src/components/Buttons/buttonStyle.tsx b/packages/react-chat/src/components/Buttons/buttonStyle.tsx deleted file mode 100644 index 70a7157d..00000000 --- a/packages/react-chat/src/components/Buttons/buttonStyle.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { css } from "styled-components"; - -export const buttonStyles = css` - border-radius: 8px; - font-family: "Inter"; - font-weight: 500; - font-size: 15px; - line-height: 22px; - text-align: center; - color: ${({ theme }) => theme.tertiary}; - background: ${({ theme }) => theme.buttonBg}; -`; diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index 64d42486..ccccf116 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 { CommunityModal } from "./Modals/CommunityModal"; import { EditModal } from "./Modals/EditModal"; import { ProfileModal } from "./Modals/ProfileModal"; +import { StatusModal } from "./Modals/StatusModal"; import { UserCreationModal } from "./Modals/UserCreationModal"; import { ToastMessageList } from "./ToastMessages/ToastMessageList"; import { UserCreation } from "./UserCreation/UserCreation"; @@ -24,6 +25,7 @@ function Modals() { + ); } diff --git a/packages/react-chat/src/components/Form/CopyInput.tsx b/packages/react-chat/src/components/Form/CopyInput.tsx index e600a193..da8aa915 100644 --- a/packages/react-chat/src/components/Form/CopyInput.tsx +++ b/packages/react-chat/src/components/Form/CopyInput.tsx @@ -1,9 +1,9 @@ import React from "react"; -import styled from "styled-components"; import { copy } from "../../utils/copy"; import { reduceString } from "../../utils/reduceString"; -import { textMediumStyles, textSmallStyles } from "../Text"; + +import { ButtonWrapper, InputBtn, Label, Text, Wrapper } from "./inputStyles"; interface CopyInputProps { label: string; @@ -15,57 +15,9 @@ export const CopyInput = ({ label, value }: CopyInputProps) => ( {reduceString(value, 15, 15)} - - copy(value)}>Copy - + + copy(value)}>Copy + ); - -const Label = styled.p` - margin-bottom: 7px; - font-weight: 500; - display: flex; - align-items: center; - color: ${({ theme }) => theme.primary}; - - ${textSmallStyles} -`; - -const Wrapper = styled.div` - position: relative; - padding: 14px 70px 14px 8px; - background: ${({ theme }) => theme.inputColor}; - border-radius: 8px; -`; - -const Text = styled.p` - color: ${({ theme }) => theme.primary}; - - ${textMediumStyles} -`; - -const CopyButtonWrapper = styled.div` - position: absolute; - top: 50%; - right: 0; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - width: 70px; - transform: translateY(-50%); - background: ${({ theme }) => theme.inputColor}; - border-radius: 8px; -`; - -const CopyButton = styled.button` - padding: 6px 12px; - font-size: 12px; - line-height: 16px; - letter-spacing: 0.1px; - color: ${({ theme }) => theme.tertiary}; - background: ${({ theme }) => theme.buttonBg}; - border: 1px solid ${({ theme }) => theme.tertiary}; - border-radius: 6px; -`; diff --git a/packages/react-chat/src/components/Form/LoginInstructions.tsx b/packages/react-chat/src/components/Form/LoginInstructions.tsx new file mode 100644 index 00000000..91fa8f06 --- /dev/null +++ b/packages/react-chat/src/components/Form/LoginInstructions.tsx @@ -0,0 +1,93 @@ +import React from "react"; +import styled from "styled-components"; + +import { MobileIcon } from "../Icons/MobileIcon"; +import { ProfileSvg } from "../Icons/ProfileIcon"; +import { ScanIcon } from "../Icons/ScanIcon"; +import { textMediumStyles } from "../Text"; + +interface LoginInstructionsProps { + mobileFlow: boolean; +} + +export function LoginInstructions({ mobileFlow }: LoginInstructionsProps) { + return ( + + + Open Status App on your {mobileFlow ? "mobile" : "desktop"} + + + Navigate yourself to{" "} + + {" "} + Profile + {" "} + tab + + + Select{" "} + + + {" "} + Sync Settings + + + Tap{" "} + + {" "} + {" "} + {" "} + {mobileFlow ? "Scan" : "Display"} sync code + + + {mobileFlow + ? "Scan the sync code from this screen" + : "Paste the sync code above"}{" "} + ↑ + + + ); +} + +const Instructions = styled.ol` + color: ${({ theme }) => theme.secondary}; + margin: auto 0; + list-style-type: decimal; + counter-reset: ollist; + + ${textMediumStyles} +`; + +const InstructionStep = styled.li` + display: flex; + align-items: center; + + & + & { + margin-top: 10px; + } + + & > span { + color: ${({ theme }) => theme.tertiary}; + } + + &::before { + counter-increment: ollist; + content: counter(ollist) "."; + margin-right: 4px; + } +`; + +const InstructionIcon = styled.div` + width: 40px; + height: 40px; + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: 50%; + background: ${({ theme }) => theme.buttonBg}; + color: ${({ theme }) => theme.tertiary}; + font-size: 8px; + line-height: 10px; + margin: 0 6px; +`; diff --git a/packages/react-chat/src/components/Form/PasteInput.tsx b/packages/react-chat/src/components/Form/PasteInput.tsx new file mode 100644 index 00000000..5f4f0720 --- /dev/null +++ b/packages/react-chat/src/components/Form/PasteInput.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import styled from "styled-components"; + +import { paste } from "../../utils/paste"; + +import { + ButtonWrapper, + InputBtn, + inputStyles, + Label, + Wrapper, +} from "./inputStyles"; + +interface PasteInputProps { + label: string; +} + +export const PasteInput = ({ label }: PasteInputProps) => ( + + + + + + paste("pasteInput")}>Paste + + + +); + +const PasteWrapper = styled.div` + width: 100%; +`; + +const Input = styled.input` + ${inputStyles} + width: 100%; + + &:focus { + outline: none; + } + + border: none; +`; diff --git a/packages/react-chat/src/components/Form/inputStyles.ts b/packages/react-chat/src/components/Form/inputStyles.ts new file mode 100644 index 00000000..8f971d9a --- /dev/null +++ b/packages/react-chat/src/components/Form/inputStyles.ts @@ -0,0 +1,73 @@ +import styled, { css } from "styled-components"; + +import { textMediumStyles, textSmallStyles } from "../Text"; + +export const inputStyles = css` + background: ${({ theme }) => theme.inputColor}; + border-radius: 8px; + border: 1px solid ${({ theme }) => theme.inputColor}; + color: ${({ theme }) => theme.primary}; + outline: none; + + ${textMediumStyles} + + &:focus { + outline: 1px solid ${({ theme }) => theme.tertiary}; + caret-color: ${({ theme }) => theme.notificationColor}; + } +`; + +export const Label = styled.p` + margin-bottom: 7px; + font-weight: 500; + display: flex; + align-items: center; + color: ${({ theme }) => theme.primary}; + + ${textSmallStyles} +`; + +export const Wrapper = styled.div` + position: relative; + padding: 14px 70px 14px 8px; + background: ${({ theme }) => theme.inputColor}; + border-radius: 8px; +`; + +export const Text = styled.p` + color: ${({ theme }) => theme.primary}; + + ${textMediumStyles} +`; + +export const ButtonWrapper = styled.div` + position: absolute; + top: 50%; + right: 0; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 70px; + transform: translateY(-50%); + background: ${({ theme }) => theme.inputColor}; + border-radius: 8px; +`; + +export const InputBtn = styled.button` + padding: 6px 12px; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.1px; + color: ${({ theme }) => theme.tertiary}; + background: ${({ theme }) => theme.buttonBg}; + border: 1px solid ${({ theme }) => theme.tertiary}; + border-radius: 6px; +`; + +export const NameInput = styled.input` + width: 328px; + padding: 11px 16px; + + ${inputStyles} +`; diff --git a/packages/react-chat/src/components/Icons/ChainIcon.tsx b/packages/react-chat/src/components/Icons/ChainIcon.tsx new file mode 100644 index 00000000..3fb34b9c --- /dev/null +++ b/packages/react-chat/src/components/Icons/ChainIcon.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import styled from "styled-components"; + +interface ChainIconProps { + className?: string; +} + +export const ChainIcon = ({ className }: ChainIconProps) => { + return ( + + + + ); +}; + +const Icon = styled.svg` + fill: ${({ theme }) => theme.secondary}; + transform: rotate(15deg); + + &.transformed { + transform: matrix(-0.97, 0.26, 0.26, 0.97, 0, 0); + } +`; diff --git a/packages/react-chat/src/components/Icons/MobileIcon.tsx b/packages/react-chat/src/components/Icons/MobileIcon.tsx new file mode 100644 index 00000000..f35c8c0b --- /dev/null +++ b/packages/react-chat/src/components/Icons/MobileIcon.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import styled from "styled-components"; + +export const MobileIcon = () => { + return ( + + + + + ); +}; + +const Icon = styled.svg` + fill: ${({ theme }) => theme.tertiary}; +`; diff --git a/packages/react-chat/src/components/Icons/ProfileIcon.tsx b/packages/react-chat/src/components/Icons/ProfileIcon.tsx index a12470e5..dcb0f450 100644 --- a/packages/react-chat/src/components/Icons/ProfileIcon.tsx +++ b/packages/react-chat/src/components/Icons/ProfileIcon.tsx @@ -9,7 +9,7 @@ type ProfileSvgProps = { export function ProfileSvg({ width, height, className }: ProfileSvgProps) { return ( - - + ); } @@ -36,12 +36,10 @@ export const ProfileIcon = () => { return ; }; -const Icon = styled(ProfileSvg)` - & > path { - fill: ${({ theme }) => theme.tertiary}; - } +const Icon = styled.svg` + fill: ${({ theme }) => theme.tertiary}; - &:hover > path { + &:hover { fill: ${({ theme }) => theme.bodyBackgroundColor}; } `; diff --git a/packages/react-chat/src/components/Icons/ScanIcon.tsx b/packages/react-chat/src/components/Icons/ScanIcon.tsx new file mode 100644 index 00000000..e6c506cb --- /dev/null +++ b/packages/react-chat/src/components/Icons/ScanIcon.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import styled from "styled-components"; + +export const ScanIcon = () => { + return ( + + + + + + + + ); +}; + +const Icon = styled.svg` + fill: ${({ theme }) => theme.tertiary}; +`; diff --git a/packages/react-chat/src/components/Members/Member.tsx b/packages/react-chat/src/components/Members/Member.tsx index 1d1a7a48..996e64d2 100644 --- a/packages/react-chat/src/components/Members/Member.tsx +++ b/packages/react-chat/src/components/Members/Member.tsx @@ -12,6 +12,7 @@ import { UserLogo } from "./UserLogo"; interface MemberProps { contact: Contact; isOnline?: boolean; + isYou?: boolean; switchShowMembers?: () => void; onClick?: () => void; } @@ -19,6 +20,7 @@ interface MemberProps { export function Member({ contact, isOnline, + isYou, switchShowMembers, onClick, }: MemberProps) { @@ -38,12 +40,17 @@ export function Member({ }; return ( - + setShowMenu((e) => !e)} > {showMenu && } @@ -74,7 +81,7 @@ export const MemberData = styled.div` cursor: pointer; &.you { - justify-content: space-between; + margin-bottom: 0; } `; diff --git a/packages/react-chat/src/components/Members/MembersList.tsx b/packages/react-chat/src/components/Members/MembersList.tsx index 2f2c6001..7d780de6 100644 --- a/packages/react-chat/src/components/Members/MembersList.tsx +++ b/packages/react-chat/src/components/Members/MembersList.tsx @@ -1,4 +1,5 @@ import React, { useMemo } from "react"; +import { utils } from "status-communities/dist/cjs"; import { bufToHex } from "status-communities/dist/cjs/utils"; import styled from "styled-components"; @@ -10,9 +11,8 @@ import { 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"; +import { Member } from "./Member"; interface MembersListProps { switchShowMembers?: () => void; @@ -21,8 +21,10 @@ interface MembersListProps { export function MembersList({ switchShowMembers }: MembersListProps) { const { contacts } = useMessengerContext(); const identity = useIdentity(); - const nickname = useNickname(); + const logout = useSetIdentity(); + const nickname = useNickname(); + const userContacts = useMemo(() => { if (identity) { return Object.values(contacts).filter( @@ -32,6 +34,7 @@ export function MembersList({ switchShowMembers }: MembersListProps) { return Object.values(contacts); } }, [contacts, identity]); + const onlineContacts = useMemo( () => userContacts.filter((e) => e.online), [userContacts] @@ -46,17 +49,20 @@ export function MembersList({ switchShowMembers }: MembersListProps) { {identity && ( You - - - - - - {nickname} - + + logout(undefined)}> - + )} {onlineContacts.length > 0 && ( @@ -113,21 +119,8 @@ const MemberCategoryName = styled.h3` margin-bottom: 8px; `; -const MemberName = styled.p` - font-weight: 500; - font-size: 15px; - line-height: 22px; - color: ${({ theme }) => theme.primary}; - opacity: 0.7; - margin-left: 8px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -`; - const Row = styled.div` display: flex; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; + align-items: center; + justify-content: space-between; `; diff --git a/packages/react-chat/src/components/Members/UserLogo.tsx b/packages/react-chat/src/components/Members/UserLogo.tsx index ee8e1827..91156bad 100644 --- a/packages/react-chat/src/components/Members/UserLogo.tsx +++ b/packages/react-chat/src/components/Members/UserLogo.tsx @@ -6,7 +6,7 @@ import { Contact } from "../../models/Contact"; type UserLogoProps = { radius: number; colorWheel: [string, number][]; - contact: Contact; + contact?: Contact; showOnlineStatus?: boolean; icon?: string; }; @@ -29,17 +29,17 @@ export function UserLogo({ }, [colorWheel]); const letters = useMemo(() => { - if (contact?.customName) { + if (contact && contact?.customName) { return contact.customName.slice(0, 2); } - if (contact.trueName) { + if (contact && contact.trueName) { return contact.trueName.slice(0, 2); } }, [contact]); const logoClassnName = useMemo(() => { if (showOnlineStatus) { - if (contact.online) { + if (contact && contact.online) { return "online"; } return "offline"; @@ -49,7 +49,11 @@ export function UserLogo({ return ( - + {!icon && {letters}} @@ -57,8 +61,6 @@ export function UserLogo({ } const TextWrapper = styled.div<{ radius: number }>` - font-family: Inter; - font-style: normal; font-weight: bold; font-size: calc(${({ radius }) => radius}px / 2.5); line-height: calc(${({ radius }) => radius}px / 2.1); @@ -66,12 +68,13 @@ const TextWrapper = styled.div<{ radius: number }>` align-items: center; text-align: center; letter-spacing: -0.4px; - color: rgba(255, 255, 255, 0.7); + color: ${({ theme }) => theme.iconTextColor}; `; const Logo = styled.div<{ radius: number; icon?: string }>` width: calc(${({ radius }) => radius}px - 6px); height: calc(${({ radius }) => radius}px - 6px); + display: flex; align-items: center; justify-content: center; flex-shrink: 0; @@ -83,9 +86,6 @@ const Logo = styled.div<{ radius: number; icon?: string }>` background-size: cover; background-repeat: no-repeat; background-image: ${({ icon }) => icon && `url(${icon}`}; - color: ${({ theme }) => theme.iconTextColor}; - margin: auto; - display: flex; &.offline { &::after { @@ -110,18 +110,23 @@ const Logo = styled.div<{ radius: number; icon?: string }>` width: 7px; height: 7px; border-radius: 50%; - background-color: #4ebc60; + background-color: ${({ theme }) => theme.greenColor}; border: 2px solid ${({ theme }) => theme.bodyBackgroundColor}; } } + + &.empty { + background-color: ${({ theme }) => theme.bodyBackgroundColor}; + background-image: none; + } `; -const Wrapper = styled.div<{ radius: number; conicGradient: string }>` +export const Wrapper = styled.div<{ radius: number; conicGradient: string }>` width: ${({ radius }) => radius}px; height: ${({ radius }) => radius}px; display: flex; - margin-left: auto; - margin-right: auto; + align-items: center; + justify-content: center; border-radius: 50%; background: ${({ conicGradient }) => conicGradient}; `; diff --git a/packages/react-chat/src/components/Modals/EditModal.tsx b/packages/react-chat/src/components/Modals/EditModal.tsx index 750b9b1b..d36c0538 100644 --- a/packages/react-chat/src/components/Modals/EditModal.tsx +++ b/packages/react-chat/src/components/Modals/EditModal.tsx @@ -5,15 +5,16 @@ import { useMessengerContext } from "../../contexts/messengerProvider"; import { useModal } from "../../contexts/modalProvider"; import { buttonStyles } from "../Buttons/buttonStyle"; import { ChannelLogo } from "../Channels/Channel"; +import { inputStyles } from "../Form/inputStyles"; import { AddIcon } from "../Icons/AddIcon"; import { textMediumStyles } from "../Text"; import { Modal } from "./Modal"; import { + AddWrapper, ButtonSection, Heading, Hint, - inputStyles, Section, } from "./ModalStyle"; @@ -125,17 +126,9 @@ const GroupLogo = styled(ChannelLogo)` margin-right: 0; `; -const AddPictureInputWrapper = styled.div` - display: flex; - justify-content: center; - align-items: center; - position: absolute; +const AddPictureInputWrapper = styled(AddWrapper)` top: 0; right: 8px; - width: 40px; - height: 40px; - background: ${({ theme }) => theme.tertiary}; - border-radius: 50%; `; const AddPictureInput = styled.input` @@ -153,8 +146,4 @@ const SaveBtn = styled.button` padding: 11px 24px; ${buttonStyles} - - &:hover { - background: ${({ theme }) => theme.buttonBgHover}; - } `; diff --git a/packages/react-chat/src/components/Modals/LinkModal.tsx b/packages/react-chat/src/components/Modals/LinkModal.tsx index 8f01dc93..e288298c 100644 --- a/packages/react-chat/src/components/Modals/LinkModal.tsx +++ b/packages/react-chat/src/components/Modals/LinkModal.tsx @@ -64,8 +64,4 @@ const ButtonYes = styled.button` padding: 11px 24px; ${buttonStyles} - - &:hover { - background: ${({ theme }) => theme.buttonBgHover}; - } `; diff --git a/packages/react-chat/src/components/Modals/ModalStyle.tsx b/packages/react-chat/src/components/Modals/ModalStyle.tsx index 4cc291d0..0631b537 100644 --- a/packages/react-chat/src/components/Modals/ModalStyle.tsx +++ b/packages/react-chat/src/components/Modals/ModalStyle.tsx @@ -1,4 +1,4 @@ -import styled, { css } from "styled-components"; +import styled from "styled-components"; import { buttonStyles } from "../Buttons/buttonStyle"; import { textMediumStyles } from "../Text"; @@ -29,10 +29,6 @@ export const Btn = styled.button` margin-left: 8px; ${buttonStyles} - &:hover { - background: ${({ theme }) => theme.buttonBgHover}; - } - &:disabled { background: ${({ theme }) => theme.border}; color: ${({ theme }) => theme.secondary}; @@ -67,17 +63,13 @@ export const Hint = styled.p` line-height: 16px; `; -export const inputStyles = css` - background: ${({ theme }) => theme.inputColor}; - border-radius: 8px; - border: 1px solid ${({ theme }) => theme.inputColor}; - color: ${({ theme }) => theme.primary}; - outline: none; - - ${textMediumStyles} - - &:focus { - outline: 1px solid ${({ theme }) => theme.tertiary}; - caret-color: ${({ theme }) => theme.notificationColor}; - } +export const AddWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + position: absolute; + width: 40px; + height: 40px; + background: ${({ theme }) => theme.tertiary}; + border-radius: 50%; `; diff --git a/packages/react-chat/src/components/Modals/ProfileModal.tsx b/packages/react-chat/src/components/Modals/ProfileModal.tsx index dd143cbd..d0a5a312 100644 --- a/packages/react-chat/src/components/Modals/ProfileModal.tsx +++ b/packages/react-chat/src/components/Modals/ProfileModal.tsx @@ -7,9 +7,9 @@ import { useIdentity } from "../../contexts/identityProvider"; import { useModal } from "../../contexts/modalProvider"; import { useToasts } from "../../contexts/toastProvider"; import { useManageContact } from "../../hooks/useManageContact"; -import { NameInput } from "../../styles/Inputs"; import { copy } from "../../utils"; import { buttonStyles } from "../Buttons/buttonStyle"; +import { inputStyles, NameInput } from "../Form/inputStyles"; import { ClearSvg } from "../Icons/ClearIcon"; import { CopySvg } from "../Icons/CopyIcon"; import { EditSvg } from "../Icons/EditIcon"; @@ -25,7 +25,6 @@ import { ButtonSection, Heading, Hint, - inputStyles, Section, } from "./ModalStyle"; @@ -349,7 +348,7 @@ const UserAddressWrapper = styled.div` } `; -const UserAddress = styled.p` +export const UserAddress = styled.p` display: flex; letter-spacing: 1px; margin-right: 8px; @@ -363,11 +362,8 @@ const UserAddress = styled.p` ${textSmallStyles} } `; -const EmojiKey = styled.div` - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; +export const EmojiKey = styled.div` + width: 116px; gap: 8px; font-size: 15px; line-height: 14px; @@ -383,7 +379,6 @@ const ProfileBtn = styled.button` ${buttonStyles} background: ${({ theme }) => theme.bodyBackgroundColor}; border: 1px solid ${({ theme }) => theme.border}; - border-radius: 8px; margin-left: 8px; &.red { @@ -393,10 +388,6 @@ const ProfileBtn = styled.button` &.red:hover { background: ${({ theme }) => theme.buttonNoBgHover}; } - - &:hover { - background: ${({ theme }) => theme.buttonBgHover}; - } `; const CopyButton = styled.button` diff --git a/packages/react-chat/src/components/Modals/StatusModal.tsx b/packages/react-chat/src/components/Modals/StatusModal.tsx new file mode 100644 index 00000000..97acab8b --- /dev/null +++ b/packages/react-chat/src/components/Modals/StatusModal.tsx @@ -0,0 +1,92 @@ +import QRCode from "qrcode.react"; +import React, { useState } from "react"; +import styled from "styled-components"; + +import { buttonStyles } from "../Buttons/buttonStyle"; +import { LoginInstructions } from "../Form/LoginInstructions"; +import { PasteInput } from "../Form/PasteInput"; + +import { Modal } from "./Modal"; +import { Heading, Section } from "./ModalStyle"; + +export const StatusModalName = "StatusModal"; + +export enum StatusModalState { + Mobile, + Desktop, +} + +export function StatusModal() { + const [modalState, setModalState] = useState( + StatusModalState.Mobile + ); + + const mobileFlow = modalState === StatusModalState.Mobile; + const desktopFlow = modalState === StatusModalState.Desktop; + + const switchModalState = (state: StatusModalState) => { + setModalState((prev) => (prev === state ? StatusModalState.Mobile : state)); + }; + return ( + +
+ Sync with Status profile +
+ + + switchModalState(StatusModalState.Mobile)} + > + From mobile + + switchModalState(StatusModalState.Desktop)} + > + From desktop + + + + {mobileFlow && } + + {desktopFlow && } + + + + + ); +} + +const MiddleSection = styled(Section)` + display: flex; + flex-direction: column; + align-items: center; + height: 514px; +`; + +const Switch = styled.div` + display: flex; + align-items: center; + margin-bottom: 32px; +`; + +const SwitchBtn = styled.button` + ${buttonStyles} + width: 159px; + padding: 7px 0; + text-align: center; + color: ${({ theme }) => theme.tertiary}; + background: ${({ theme }) => theme.buttonBg}; + position: relative; + + &.active { + background: ${({ theme }) => theme.tertiary}; + color: ${({ theme }) => theme.bodyBackgroundColor}; + z-index: 10000; + } +`; + +const SwitchBtnMobile = styled(SwitchBtn)` + margin-left: -8px; +`; diff --git a/packages/react-chat/src/components/Modals/UserCreationModal.tsx b/packages/react-chat/src/components/Modals/UserCreationModal.tsx index 1833a405..521647f1 100644 --- a/packages/react-chat/src/components/Modals/UserCreationModal.tsx +++ b/packages/react-chat/src/components/Modals/UserCreationModal.tsx @@ -3,17 +3,21 @@ import { Identity } from "status-communities/dist/cjs"; import styled from "styled-components"; import { + useIdentity, useSetIdentity, useSetNikcname, } from "../../contexts/identityProvider"; import { useModal } from "../../contexts/modalProvider"; import { Contact } from "../../models/Contact"; -import { NameInput } from "../../styles/Inputs"; +import { NameInput } from "../Form/inputStyles"; +import { AddIcon } from "../Icons/AddIcon"; +import { ChainIcon } from "../Icons/ChainIcon"; import { LeftIconSvg } from "../Icons/LeftIcon"; import { UserLogo } from "../Members/UserLogo"; import { Modal } from "./Modal"; import { + AddWrapper, BackBtn, Btn, ButtonSection, @@ -22,44 +26,90 @@ import { Section, Text, } from "./ModalStyle"; +import { EmojiKey, UserAddress } from "./ProfileModal"; export const UserCreationModalName = "UserCreationModal"; export function UserCreationModal() { + const identity = useIdentity(); const setIdentity = useSetIdentity(); const setNickname = useSetNikcname(); const [customNameInput, setCustomNameInput] = useState(""); + const [nextStep, setNextStep] = useState(false); const { setModal } = useModal(UserCreationModalName); return (
Create a Status Profile
- - + + {nextStep ? ( + Your emojihash and identicon ring + ) : ( Your profile + )} + {nextStep ? ( - Longer and unusual names are better as they are less likely to be - used by someone else. + {" "} + This set of emojis and coloured ring around your avatar are unique + and represent your chat key, so your friends can easily distinguish + you from potential impersonators. - - - + ) : ( + + Longer and unusual names are better as they are
less likely + to be used by someone else. + + )} + + + + {!nextStep && ( + + + + )} + + {!nextStep && ( setCustomNameInput(e.currentTarget.value)} /> - + )} + {nextStep && identity && ( + <> + + {" "} + Chatkey: {identity.privateKey.slice(0, 10)}... + {identity.privateKey.slice(-3)}{" "} + + + + + + + 🎩🍞πŸ₯‘πŸ¦πŸŒˆπŸ“‘πŸ’…πŸ»β™£οΈπŸ””β›ΈπŸ‘΅πŸ…± + + + + )} setModal(false)}> @@ -67,10 +117,13 @@ export function UserCreationModal() { { - setIdentity(Identity.generate()); - setNickname(customNameInput); - setModal(false); + nextStep + ? setModal(false) + : (setIdentity(Identity.generate()), + setNickname(customNameInput), + setNextStep(true)); }} + disabled={!customNameInput} > Next @@ -80,39 +133,55 @@ export function UserCreationModal() { } const MiddleSection = styled(Section)` - margin-bottom: 102px; + height: 420px; + display: flex; + flex-direction: column; + align-items: center; + + &.initial { + padding: 32px; + } +`; + +const Title = styled(Text)` + font-weight: bold; + font-size: 22px; + line-height: 30px; + letter-spacing: -0.2px; + margin-bottom: 16px; +`; + +const StyledHint = styled(Hint)` + font-size: 15px; + line-height: 22px; + margin-bottom: 32px; + text-align: center; `; const LogoWrapper = styled.div` position: relative; display: flex; - margin-top: 32px; - margin-bottom: 38px; + margin-bottom: 32px; `; -const StyledHint = styled(Hint)` - font-family: Inter; - font-style: normal; - font-weight: normal; - font-size: 15px; - line-height: 22px; - text-align: center; +const AddIconWrapper = styled(AddWrapper)` + top: 0; + right: -50%; + transform: translateX(-50%); `; -const Title = styled(Text)` - font-family: Inter; - font-style: normal; - font-weight: bold; - font-size: 22px; - line-height: 30px; - - text-align: center; - letter-spacing: -0.2px; - margin-bottom: 16px; +const ChainIcons = styled.div` + width: 104px; + display: flex; + justify-content: space-between; + align-items: center; + margin: 16px 0; `; -const Content = styled.div` - margin-top: 16px; - margin-left: 65px; - margin-right: 65px; +const UserAttributes = styled.div` + width: 200px; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 32px; `; diff --git a/packages/react-chat/src/components/UserCreation/UserCreation.tsx b/packages/react-chat/src/components/UserCreation/UserCreation.tsx index bc3b478d..ec71ee45 100644 --- a/packages/react-chat/src/components/UserCreation/UserCreation.tsx +++ b/packages/react-chat/src/components/UserCreation/UserCreation.tsx @@ -2,65 +2,56 @@ import React from "react"; import styled from "styled-components"; import { useModal } from "../../contexts/modalProvider"; +import { buttonStyles, buttonTransparentStyles } from "../Buttons/buttonStyle"; import { ColorChatIcon } from "../Icons/ColorChatIcon"; +import { StatusModalName } from "../Modals/StatusModal"; import { UserCreationModalName } from "../Modals/UserCreationModal"; +import { textSmallStyles } from "../Text"; export function UserCreation() { const { setModal } = useModal(UserCreationModalName); + const { setModal: setStatusModal } = useModal(StatusModalName); + return ( - - - - - - Want in on the discussion ? - setModal(true)}> - Use a throwaway account - - - + + + Want to jump into the discussion? + setStatusModal(true)}> + Sync with Status profile + + Connect Ethereum Wallet + setModal(true)}> + Use a throwaway account + + ); } -const ThrowAwayButton = styled.button` - font-family: Inter; - font-style: normal; - font-weight: 500; - font-size: 13px; - line-height: 18px; +const Wrapper = styled.div` display: flex; + flex-direction: column; align-items: center; - text-align: center; - color: #4360df; -`; - -const IconWrapper = styled.div` - margin-left: auto; - margin-right: auto; + justify-content: center; + flex: 1; + background-color: ${({ theme }) => theme.sectionBackgroundColor}; `; const TitleWrapper = styled.div` - font-family: Inter; - font-style: normal; font-weight: bold; font-size: 17px; line-height: 24px; text-align: center; - margin-top: 25px; - margin-bottom: 24px; + margin: 24px 0; + color: ${({ theme }) => theme.primary}; `; -const Wrapper = styled.div` - margin: auto; - align-items: center; - display: flex; - flex-direction: column; +const LoginBtn = styled.button` + ${buttonStyles} + ${textSmallStyles} + padding: 10px 12px; + margin-bottom: 16px; `; -const Background = styled.div` - background: #f6f8fa; - display: flex; - flex-direction: column; - align-items: center; - height: 100%; +const ThrowAwayButton = styled.button` + ${buttonTransparentStyles} `; diff --git a/packages/react-chat/src/models/Contact.ts b/packages/react-chat/src/models/Contact.ts index d122906b..79047b9b 100644 --- a/packages/react-chat/src/models/Contact.ts +++ b/packages/react-chat/src/models/Contact.ts @@ -1,10 +1,10 @@ export type Contact = { id: string; - online: boolean; + online?: boolean; trueName: string; customName?: string; - isUntrustworthy: boolean; - blocked: boolean; + isUntrustworthy?: boolean; + blocked?: boolean; isFriend?: boolean; }; diff --git a/packages/react-chat/src/styles/Inputs.ts b/packages/react-chat/src/styles/Inputs.ts deleted file mode 100644 index 57d5a90b..00000000 --- a/packages/react-chat/src/styles/Inputs.ts +++ /dev/null @@ -1,10 +0,0 @@ -import styled from "styled-components"; - -import { inputStyles } from "../components/Modals/ModalStyle"; - -export const NameInput = styled.input` - width: 328px; - padding: 11px 16px; - - ${inputStyles} -`; diff --git a/packages/react-chat/src/utils/paste.ts b/packages/react-chat/src/utils/paste.ts new file mode 100644 index 00000000..ba171a10 --- /dev/null +++ b/packages/react-chat/src/utils/paste.ts @@ -0,0 +1,9 @@ +export const paste = (elementId: string) => { + navigator.clipboard + .readText() + .then( + (clipText) => + ((document.getElementById(elementId)).value = + clipText) + ); +}; diff --git a/yarn.lock b/yarn.lock index e53b8562..b5f42b7d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -279,6 +279,7 @@ __metadata: "@types/emoji-mart": ^3.0.6 "@types/mocha": ^9.0.0 "@types/node": ^16.9.6 + "@types/qrcode.react": ^1.0.2 "@types/react": ^17.0.16 "@types/styled-components": ^5.1.12 "@typescript-eslint/eslint-plugin": ^4.29.0 @@ -295,6 +296,7 @@ __metadata: npm-run-all: ^4.1.5 npm-watch: ^0.11.0 prettier: ^2.3.2 + qrcode.react: ^1.0.1 react: ^17.0.2 react-dom: ^17.0.2 react-is: ^17.0.2 @@ -983,6 +985,15 @@ __metadata: languageName: node linkType: hard +"@types/qrcode.react@npm:^1.0.2": + version: 1.0.2 + resolution: "@types/qrcode.react@npm:1.0.2" + dependencies: + "@types/react": "*" + checksum: be256f0192366b4c0822da43c732bf3e29beb954c89d739aa770f09e5160842a3ca4d6814cb57bbcbbf8997cf7af0b998de318dab957f0820f267bb746c9a329 + languageName: node + linkType: hard + "@types/react-dom@npm:>=16.9.0, @types/react-dom@npm:^17.0.9": version: 17.0.9 resolution: "@types/react-dom@npm:17.0.9" @@ -9261,6 +9272,26 @@ fsevents@~2.3.2: languageName: node linkType: hard +"qr.js@npm:0.0.0": + version: 0.0.0 + resolution: "qr.js@npm:0.0.0" + checksum: 5ac6c393967bdeaa660e7fd3a501a25eb538c1f6008a4d30ab2b97bbe520e5c236530090773f1578aa0a523cdaa6923c866615e21143f9e7cd22abd41c789b69 + languageName: node + linkType: hard + +"qrcode.react@npm:^1.0.1": + version: 1.0.1 + resolution: "qrcode.react@npm:1.0.1" + dependencies: + loose-envify: ^1.4.0 + prop-types: ^15.6.0 + qr.js: 0.0.0 + peerDependencies: + react: ^15.5.3 || ^16.0.0 || ^17.0.0 + checksum: 154a9557d103fa776cd99bc0d2600b862be74872ff965052533bc38ea0606c4d0965b4dd6df93e53f1db86699517a25db2718bbbc08c5d535a90c0d335552e9a + languageName: node + linkType: hard + "qs@npm:6.7.0": version: 6.7.0 resolution: "qs@npm:6.7.0"