From 547ab9b1b24bbc4938d3d6e9b33d0871a2c2c0f2 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 27 Feb 2024 17:17:52 +1100 Subject: [PATCH] feat: start working on account create success screen on conversations view --- _locales/en/messages.json | 4 +- images/party-popper.svg | 1 + ts/components/EmptyMessageView.tsx | 61 +++++++++++++++++++++++++++++- ts/mains/main_renderer.tsx | 5 ++- ts/types/LocalizerKeys.ts | 2 + ts/util/registration.ts | 1 + 6 files changed, 71 insertions(+), 3 deletions(-) create mode 100644 images/party-popper.svg 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 ( - +