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 00000000..e2cd2fc6 Binary files /dev/null and b/.yarn/cache/@types-qrcode.react-npm-1.0.2-f8cabf6225-be256f0192.zip differ 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 00000000..0ba96dc4 Binary files /dev/null and b/.yarn/cache/qr.js-npm-0.0.0-eea89f459b-5ac6c39396.zip differ 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 00000000..bb13128c Binary files /dev/null and b/.yarn/cache/qrcode.react-npm-1.0.1-ddb3a7650e-154a9557d1.zip differ diff --git a/packages/react-chat/package.json b/packages/react-chat/package.json index a493f968..70f52941 100644 --- a/packages/react-chat/package.json +++ b/packages/react-chat/package.json @@ -26,6 +26,7 @@ "@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", @@ -39,6 +40,7 @@ "npm-run-all": "^4.1.5", "npm-watch": "^0.11.0", "prettier": "^2.3.2", + "qrcode.react": "^1.0.1", "rimraf": "^3.0.2", "ts-node": "^10.1.0", "typescript": "^4.3.5" diff --git a/packages/react-chat/src/components/ActivityCenter.tsx b/packages/react-chat/src/components/ActivityCenter.tsx index 179a0d2a..73330757 100644 --- a/packages/react-chat/src/components/ActivityCenter.tsx +++ b/packages/react-chat/src/components/ActivityCenter.tsx @@ -9,7 +9,7 @@ import { Activity } from "../models/Activity"; import { equalDate } from "../utils/equalDate"; import { DownloadButton } from "./Buttons/DownloadButton"; -import { buttonStyles } from "./Buttons/buttonStyle"; +import { buttonTransparentStyles } from "./Buttons/buttonStyle"; import { Mention } from "./Chat/ChatMessageContent"; import { Logo } from "./CommunityIdentity"; import { ContactMenu } from "./Form/ContactMenu"; @@ -365,23 +365,11 @@ const InviteDiv = styled.div` `; const FilterBtn = styled.button` - ${buttonStyles} - ${textSmallStyles} - - padding: 10px 12px; - background: ${({ theme }) => 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"