diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 613a7e973..2f83b1dd4 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2,6 +2,7 @@ "about": "About", "accept": "Accept", "accountIDCopy": "Copy Account ID", + "accountIDCopied": "Account ID Copied", "accountIdEnter": "Enter Account ID", "accountIdErrorInvalid": "This Account ID is invalid. Please check and try again.", "accountIdOrOnsEnter": "Enter Account ID or ONS", @@ -460,6 +461,7 @@ "serverId": "Server ID", "sessionInviteAFriend": "Invite a Friend", "sessionInviteAFriendDescription": "Copy your Account ID then share it with your friends so they can message you.", + "sessionInviteAFriendIDCopied": "Share with your friends wherever you usually speak with them — then move the conversation here.", "sessionMessenger": "Session", "sessionRecoveryPassword": "Recovery Password", "set": "Set", diff --git a/ts/components/icon/Icons.tsx b/ts/components/icon/Icons.tsx index 6f07bbb5b..918d98e31 100644 --- a/ts/components/icon/Icons.tsx +++ b/ts/components/icon/Icons.tsx @@ -12,6 +12,7 @@ export type SessionIconType = | 'caret' | 'chatBubble' | 'check' + | 'checkCircle' | 'chevron' | 'circle' | 'circleCheck' @@ -161,6 +162,11 @@ export const icons: Record = { viewBox: '0 0 7 6', ratio: 1, }, + checkCircle: { + path: 'M19.9749 38.9783c10.4085 0 19.0017-8.6057 19.0017-19 0-10.40942-8.6082-19.000029-19.0168-19.000029C9.56973.978271.976562 9.56888.976562 19.9783c0 10.3943 8.608258 19 18.998338 19Zm0-3.7427c-8.4659 0-15.24085-6.7908-15.24085-15.2573 0-8.4667 6.75985-15.25728 15.22575-15.25728S35.2342 11.5116 35.2342 19.9783c0 8.4665-6.7934 15.2573-15.2593 15.2573Z M17.9848 28.7219c.66 0 1.2346-.3274 1.6255-.9341l8.2265-12.8509c.2322-.3977.4547-.8255.4547-1.2401 0-.9204-.8152-1.5333-1.6803-1.5333-.5392 0-1.0388.3208-1.428.9271L17.9213 24.758l-3.4181-4.3592c-.4513-.582-.8857-.7622-1.4404-.7622-.8869 0-1.6016.7198-1.6016 1.6218 0 .4444.1721.844.476 1.2432l4.3486 5.2996c.4929.6269 1.0325.9207 1.699.9207Z', + viewBox: '0 0 39 39', + ratio: 1, + }, chevron: { path: 'M12,13.5857864 L6.70710678,8.29289322 C6.31658249,7.90236893 5.68341751,7.90236893 5.29289322,8.29289322 C4.90236893,8.68341751 4.90236893,9.31658249 5.29289322,9.70710678 L11.2928932,15.7071068 C11.6834175,16.0976311 12.3165825,16.0976311 12.7071068,15.7071068 L18.7071068,9.70710678 C19.0976311,9.31658249 19.0976311,8.68341751 18.7071068,8.29289322 C18.3165825,7.90236893 17.6834175,7.90236893 17.2928932,8.29289322 L12,13.5857864 Z', viewBox: '1.5 5.5 21 12', diff --git a/ts/components/leftpane/overlay/OverlayInvite.tsx b/ts/components/leftpane/overlay/OverlayInvite.tsx index 8ee24390c..35469dd4f 100644 --- a/ts/components/leftpane/overlay/OverlayInvite.tsx +++ b/ts/components/leftpane/overlay/OverlayInvite.tsx @@ -1,21 +1,44 @@ import useKey from 'react-use/lib/useKey'; import styled from 'styled-components'; +import { shell } from 'electron'; +import { useState } from 'react'; import { useDispatch } from 'react-redux'; import { resetLeftOverlayMode } from '../../../state/ducks/section'; import { SessionButton } from '../../basic/SessionButton'; import { UserUtils } from '../../../session/utils'; -import { SpacerLG, SpacerMD } from '../../basic/Text'; +import { Flex } from '../../basic/Flex'; +import { SpacerLG, SpacerMD, SpacerSM } from '../../basic/Text'; +import { SessionIcon, SessionIconButton } from '../../icon'; import { SessionInput } from '../../inputs'; import { StyledLeftPaneOverlay } from './OverlayMessage'; +const StyledHeadingContainer = styled(Flex)` + .session-icon-button { + border: 1px solid var(--text-primary-color); + border-radius: 9999px; + margin-inline-start: var(--margins-sm); + margin-bottom: + transition-duration: var(--default-duration); + }`; + +const StyledHeading = styled.h3` + color: var(--text-primary-color); + font-family: var(--font-default) + font-size: var(--font-size-sm); + font-weight: 300; + margin: 0 auto; + padding: 0; +`; + const StyledDescription = styled.div` color: var(--text-secondary-color); font-family: var(--font-default); font-style: normal; - font-weight: 400; + font-weight: 300; font-size: 12px; + line-height: 15px; text-align: center; margin: 0 auto; text-align: center; @@ -32,6 +55,8 @@ const StyledButtonerContainer = styled.div` export const OverlayInvite = () => { const ourSessionID = UserUtils.getOurPubKeyStrFromCache(); + const [idCopied, setIdCopied] = useState(false); + const dispatch = useDispatch(); function closeOverlay() { @@ -48,28 +73,60 @@ export const OverlayInvite = () => { alignItems={'center'} padding={'var(--margins-md)'} > - - - {window.i18n('sessionInviteAFriendDescription')} - - - { - window.clipboard.writeText(ourSessionID); - // TODO[epic=SES-955] update to next screen - }} - dataTestId="invite-account-id-copy" - /> - + {!idCopied ? ( + <> + + + {window.i18n('sessionInviteAFriendDescription')} + + + { + window.clipboard.writeText(ourSessionID); + setIdCopied(true); + }} + dataTestId="invite-account-id-copy" + /> + + + ) : ( + <> + + + + {window.i18n('accountIDCopied')} + { + void shell.openExternal( + 'https://sessionapp.zendesk.com/hc/en-us/articles/4439132747033-How-do-Session-ID-usernames-work' + ); + }} + /> + + + {window.i18n('sessionInviteAFriendIDCopied')} + + )} ); }; diff --git a/ts/types/LocalizerKeys.ts b/ts/types/LocalizerKeys.ts index 63f943169..84375d11b 100644 --- a/ts/types/LocalizerKeys.ts +++ b/ts/types/LocalizerKeys.ts @@ -1,6 +1,7 @@ export type LocalizerKeys = | 'about' | 'accept' + | 'accountIDCopied' | 'accountIDCopy' | 'accountIdEnter' | 'accountIdErrorInvalid' @@ -460,6 +461,7 @@ export type LocalizerKeys = | 'serverId' | 'sessionInviteAFriend' | 'sessionInviteAFriendDescription' + | 'sessionInviteAFriendIDCopied' | 'sessionMessenger' | 'sessionRecoveryPassword' | 'set'