diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 620d65e3d..623484c05 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -586,5 +586,7 @@ "privacyPolicy": "Privacy Policy", "displayNamePick": "Pick your display name", "displayNameDescription": "It can be your real name, an alias, or anything else you like — and you can change it any time.", - "invalidDisplayNameTooLong": "Please enter a shorter display name." + "invalidDisplayNameTooLong": "Please enter a shorter display name.", + "onboardingAccountCreated": "Account Created", + "onboardingBubbleWelcomeToSession": "Welcome to Session" } diff --git a/images/party-popper.svg b/images/party-popper.svg new file mode 100644 index 000000000..6fba0503b --- /dev/null +++ b/images/party-popper.svg @@ -0,0 +1 @@ + diff --git a/ts/components/EmptyMessageView.tsx b/ts/components/EmptyMessageView.tsx index 6a3c10515..fc4fa0a2b 100644 --- a/ts/components/EmptyMessageView.tsx +++ b/ts/components/EmptyMessageView.tsx @@ -1,3 +1,5 @@ +import { useState } from 'react'; +import { useMount } from 'react-use'; import styled from 'styled-components'; import { Flex } from './basic/Flex'; @@ -23,9 +25,66 @@ const StyledSessionFullLogo = styled(Flex)` } `; +const StyledPartyPopper = styled.img` + height: 180px; + margin: 0 auto; + -webkit-user-drag: none; +`; + +const StyledHeading = styled.p` + padding: 0; + margin: 0; + font-size: var(--font-size-h1); + font-weight: 700; +`; + +const StyledSessionWelcome = styled.p` + padding: 0; + margin: 0; + color: var(--primary-color); + font-size: var(--font-size-h2); +`; + export const EmptyMessageView = () => { + const [newAccountCreated, setNewAccountCreated] = useState(false); + + useMount(() => { + const launchCount = window.getSettingValue('launch-count'); + window.log.debug(`WIP: [launch-count] ${launchCount}`); + + if (!launchCount || launchCount < 1) { + setNewAccountCreated(true); + } + }); + + if (newAccountCreated) { + return ( + + + {window.i18n('onboardingAccountCreated')} + + {window.i18n('onboardingBubbleWelcomeToSession')} + + + ); + } + return ( - +