feat: finished styling success screen

need to test logic a bit more to make sure that I am happy

_locales/en/messages.json

@@ -586,7 +586,9 @@
   "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.",
+  "displayNameErrorDescriptionShorter": "Please pick a shorter display name",
   "onboardingAccountCreated": "Account Created",
-  "onboardingBubbleWelcomeToSession": "Welcome to Session"
+  "onboardingBubbleWelcomeToSession": "Welcome to Session",
+  "conversationsNone": "You don't have any conversations yet",
+  "onboardingHitThePlusButton": "Hit the plus button to start a chat, create a group, or join an official community!"
 }

ts/components/EmptyMessageView.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useMount } from 'react-use';
 import styled from 'styled-components';
 import { Flex } from './basic/Flex';
+import { Spacer2XL, SpacerXS } from './basic/Text';
 
 const StyledPlaceholder = styled(Flex)`
   margin: auto;
@@ -31,22 +32,40 @@ const StyledPartyPopper = styled.img`
   -webkit-user-drag: none;
 `;
 
-const StyledHeading = styled.p`
+const StyledP = styled.p`
-  padding: 0;
   margin: 0;
-  font-size: var(--font-size-h1);
+  padding: 0;
+  text-align: center;
+`;
+
+const StyledHeading = styled(StyledP)`
+  margin: 0 0 var(--margins-md);
+  line-height: 1;
+  font-size: 48px;
   font-weight: 700;
 `;
 
-const StyledSessionWelcome = styled.p`
+const StyledSessionWelcome = styled(StyledP)`
-  padding: 0;
+  line-height: 1;
-  margin: 0;
   color: var(--primary-color);
-  font-size: var(--font-size-h2);
+  font-size: 32px;
+`;
+
+const StyledHR = styled.hr`
+  color: var(--text-secondary-color);
+  opacity: 0.5;
+  width: 300px;
+  border-width: 0.5px;
+  margin: 40px 0 var(--margins-lg);
+`;
+
+const StyledNoConversations = styled(StyledP)`
+  font-size: 24px;
+  font-weight: 700;
 `;
 
 export const EmptyMessageView = () => {
-  const [newAccountCreated, setNewAccountCreated] = useState(false);
+  const [newAccountCreated, setNewAccountCreated] = useState(true);
 
   useMount(() => {
     const launchCount = window.getSettingValue('launch-count');
@@ -57,7 +76,6 @@ export const EmptyMessageView = () => {
     }
   });
 
-  if (newAccountCreated) {
   return (
     <StyledPlaceholder
       container={true}
@@ -67,24 +85,16 @@ export const EmptyMessageView = () => {
       alignItems="center"
       margin="auto"
     >
+      {newAccountCreated ? (
+        <>
           <StyledPartyPopper src="images/party-popper.svg" alt="party popper emoji" />
+          <Spacer2XL />
           <StyledHeading>{window.i18n('onboardingAccountCreated')}</StyledHeading>
           <StyledSessionWelcome>
             {window.i18n('onboardingBubbleWelcomeToSession')}
           </StyledSessionWelcome>
-      </StyledPlaceholder>
+        </>
-    );
+      ) : (
-  }
-
-  return (
-    <StyledPlaceholder
-      container={true}
-      className="content"
-      flexDirection="column"
-      justifyContent="center"
-      alignItems="center"
-      margin="auto"
-    >
         <StyledSessionFullLogo
           container={true}
           className="content"
@@ -96,6 +106,11 @@ export const EmptyMessageView = () => {
           <img src="images/session/brand.svg" alt="full-brand-logo" />
           <img src="images/session/session-text.svg" alt="full-brand-text" />
         </StyledSessionFullLogo>
+      )}
+      <StyledHR />
+      <StyledNoConversations>{window.i18n('conversationsNone')}</StyledNoConversations>
+      <SpacerXS />
+      <StyledP>{window.i18n('onboardingHitThePlusButton')}</StyledP>
     </StyledPlaceholder>
   );
 };

ts/components/basic/Text.tsx

@@ -31,13 +31,17 @@ export const TextWithChildren = (props: Omit<TextProps, 'text'> & { children: Re
 };
 
 type SpacerProps = {
-  size: 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
   style?: CSSProperties;
 };
 
 const SpacerStyled = styled.div<SpacerProps>`
   height: ${props =>
-    props.size === 'xl'
+    props.size === '3xl'
+      ? 'var(--margins-3xl)'
+      : props.size === '2xl'
+      ? 'var(--margins-2xl)'
+      : props.size === 'xl'
       ? 'var(--margins-xl)'
       : props.size === 'lg'
       ? 'var(--margins-lg)'
@@ -48,7 +52,11 @@ const SpacerStyled = styled.div<SpacerProps>`
       : 'var(--margins-xs)'};
 
   width: ${props =>
-    props.size === 'xl'
+    props.size === '3xl'
+      ? 'var(--margins-3xl)'
+      : props.size === '2xl'
+      ? 'var(--margins-2xl)'
+      : props.size === 'xl'
       ? 'var(--margins-xl)'
       : props.size === 'lg'
       ? 'var(--margins-lg)'
@@ -63,23 +71,39 @@ const Spacer = (props: SpacerProps) => {
   return <SpacerStyled {...props} />;
 };
 
-export const SpacerXL = (props: { style?: CSSProperties }) => {
+/** 5px */
-  return <Spacer size="xl" style={props.style} />;
+export const SpacerXS = (props: { style?: CSSProperties }) => {
+  return <Spacer size="xs" style={props.style} />;
 };
 
-export const SpacerLG = (props: { style?: CSSProperties }) => {
+/** 10px */
-  return <Spacer size="lg" style={props.style} />;
+export const SpacerSM = (props: { style?: CSSProperties }) => {
+  return <Spacer size="sm" style={props.style} />;
 };
 
+/** 15px */
 export const SpacerMD = (props: { style?: CSSProperties }) => {
   return <Spacer size="md" style={props.style} />;
 };
-export const SpacerSM = (props: { style?: CSSProperties }) => {
+
-  return <Spacer size="sm" style={props.style} />;
+/** 20px */
+export const SpacerLG = (props: { style?: CSSProperties }) => {
+  return <Spacer size="lg" style={props.style} />;
 };
 
-export const SpacerXS = (props: { style?: CSSProperties }) => {
+/** 25px */
-  return <Spacer size="xs" style={props.style} />;
+export const SpacerXL = (props: { style?: CSSProperties }) => {
+  return <Spacer size="xl" style={props.style} />;
+};
+
+/** 30px */
+export const Spacer2XL = (props: { style?: CSSProperties }) => {
+  return <Spacer size="2xl" style={props.style} />;
+};
+
+/** 35px */
+export const Spacer3XL = (props: { style?: CSSProperties }) => {
+  return <Spacer size="3xl" style={props.style} />;
 };
 
 type H3Props = {

ts/components/registration/stages/CreateAccount.tsx

@@ -50,7 +50,7 @@ function sanitizeDisplayNameOrToast(
     setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined);
   } catch (e) {
     setDisplayName(displayName);
-    setDisplayNameError(window.i18n('invalidDisplayNameTooLong'));
+    setDisplayNameError(window.i18n('displayNameErrorDescriptionShorter'));
   }
 }
 

ts/themes/globals.tsx

@@ -24,6 +24,7 @@ export type ThemeGlobals = {
   '--margins-lg': string;
   '--margins-xl': string;
   '--margins-2xl': string;
+  '--margins-3xl': string;
 
   /* Padding */
   '--padding-message-content': string;
@@ -115,6 +116,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--margins-lg': '20px',
   '--margins-xl': '25px',
   '--margins-2xl': '30px',
+  '--margins-3xl': '35px',
 
   '--padding-message-content': '7px 13px',
   '--padding-link-preview': '-7px -13px 7px -13px', // bottom has positive value because a link preview has always a body below

ts/types/LocalizerKeys.ts

@@ -101,6 +101,7 @@ export type LocalizerKeys =
   | 'continue'
   | 'continueYourSession'
   | 'conversationsHeader'
+  | 'conversationsNone'
   | 'conversationsSettingsTitle'
   | 'copiedToClipboard'
   | 'copyErrorAndQuit'
@@ -161,6 +162,7 @@ export type LocalizerKeys =
   | 'displayName'
   | 'displayNameDescription'
   | 'displayNameEmpty'
+  | 'displayNameErrorDescriptionShorter'
   | 'displayNamePick'
   | 'displayNameTooLong'
   | 'document'
@@ -236,7 +238,6 @@ export type LocalizerKeys =
   | 'imageCaptionIconAlt'
   | 'incomingCallFrom'
   | 'incomingError'
-  | 'invalidDisplayNameTooLong'
   | 'invalidGroupNameTooLong'
   | 'invalidGroupNameTooShort'
   | 'invalidNumberError'
@@ -358,6 +359,7 @@ export type LocalizerKeys =
   | 'ok'
   | 'onboardingAccountCreated'
   | 'onboardingBubbleWelcomeToSession'
+  | 'onboardingHitThePlusButton'
   | 'onboardingTosPrivacy'
   | 'oneNonImageAtATimeToast'
   | 'onionPathIndicatorDescription'