feat: updated onboarding header

added external link buttons, removed accentText and added new svgs

_locales/en/messages.json

@@ -403,7 +403,6 @@
   "linkDevice": "Link Device",
   "restoreUsingRecoveryPhrase": "Restore your account",
   "or": "or",
-  "beginYourSession": "Begin your Session.",
   "welcomeToYourSession": "Welcome to your Session",
   "searchFor...": "Search conversations and contacts",
   "searchForContactsOnly": "Search for contacts",

ts/components/registration/AccentText.tsx

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-
-export const AccentText: FC = () => (
-  <div className="session-content-accent-text">
-    <div className="session-content-accent-text title">{window.i18n('beginYourSession')}</div>
-  </div>
-);

ts/components/registration/RegistrationStages.tsx

@@ -1,3 +1,4 @@
+import { shell } from 'electron';
 import { useDispatch } from 'react-redux';
 import { useMount } from 'react-use';
 import styled from 'styled-components';
@@ -27,15 +28,17 @@ import {
 } from '../../util/accountManager';
 import { Storage, setSignInByLinking, setSignWithRecoveryPhrase } from '../../util/storage';
 import { Flex } from '../basic/Flex';
+import { SpacerSM } from '../basic/Text';
+import { SessionIcon, SessionIconButton } from '../icon';
 import { ModalContainer } from './ModalContainer';
 import { SignInTab, SignUpTab } from './stages';
 
 const StyledRegistrationContainer = styled(Flex)`
-  width: 289px;
+  width: 348px;
 
   .session-button {
-    width: 80%;
-    margin: auto;
+    width: 100%;
+    margin: 0;
   }
 `;
 
@@ -207,6 +210,38 @@ export const RegistrationStages = () => {
     <>
       <ModalContainer />
       <StyledRegistrationContainer container={true} flexDirection="column">
+        <Flex container={true} alignItems="center">
+          <SessionIcon iconColor="var(--primary-color)" iconSize={'huge'} iconType="brand" />
+          <SpacerSM />
+          <div style={{ flexGrow: 1 }}>
+            <SessionIcon iconSize={'small'} iconType="session" />
+          </div>
+          <Flex container={true} alignItems="center">
+            <SessionIconButton
+              aria-label="external link to Session FAQ web page"
+              iconType="question"
+              iconSize={'medium'}
+              iconPadding="4px"
+              iconColor="var(--text-primary-color)"
+              style={{ border: '2px solid var(--text-primary-color)', borderRadius: '9999px' }}
+              onClick={() => {
+                void shell.openExternal('https://getsession.org/faq');
+              }}
+            />
+            <SpacerSM />
+            <SessionIconButton
+              aria-label="external link to Session FAQ web page"
+              iconType="link"
+              iconSize="medium"
+              iconColor="var(--text-primary-color)"
+              iconPadding="4px"
+              style={{ border: '2px solid var(--text-primary-color)', borderRadius: '9999px' }}
+              onClick={() => {
+                void shell.openExternal('https://getsession.org');
+              }}
+            />
+          </Flex>
+        </Flex>
         {(step === Onboarding.Start || step === Onboarding.CreateAccount) && <SignUpTab />}
         {(step === Onboarding.Start || step === Onboarding.RestoreAccount) && <SignInTab />}
       </StyledRegistrationContainer>

ts/components/registration/SessionRegistrationView.tsx

@@ -1,14 +1,12 @@
 import { useEffect } from 'react';
 import { Provider } from 'react-redux';
 import styled from 'styled-components';
-import { AccentText } from './AccentText';
 
 import { onboardingStore } from '../../state/onboarding/store';
 import { SessionTheme } from '../../themes/SessionTheme';
 import { setSignInByLinking } from '../../util/storage';
 import { SessionToastContainer } from '../SessionToastContainer';
 import { Flex } from '../basic/Flex';
-import { SessionIcon } from '../icon';
 import { RegistrationStages } from './RegistrationStages';
 import { Hero } from './components';
 
@@ -62,6 +60,7 @@ export const SessionRegistrationView = () => {
   }, []);
 
   return (
+    <Provider store={onboardingStore}>
       <SessionTheme>
         <StyledFullscreenContainer container={true} alignItems="center">
           <Hero />
@@ -74,15 +73,11 @@ export const SessionRegistrationView = () => {
           >
             <Flex container={true} margin="auto" alignItems="center" flexDirection="column">
               <SessionToastContainer />
-            <SessionIcon iconSize={150} iconType="brand" />
-
-            <AccentText />
-            <Provider store={onboardingStore}>
               <RegistrationStages />
-            </Provider>
             </Flex>
           </StyledSessionContent>
         </StyledFullscreenContainer>
       </SessionTheme>
+    </Provider>
   );
 };

ts/components/registration/stages/create/SignUpTab.tsx

@@ -6,61 +6,26 @@ import {
   Onboarding,
   setAccountCreationStep,
   setOnboardingStep,
-} from '../../../state/onboarding/ducks/registration';
+} from '../../../../state/onboarding/ducks/registration';
 import {
   useOnboardAccountCreationStep,
   useOnboardGeneratedRecoveryPhrase,
   useOnboardHexGeneratedPubKey,
-} from '../../../state/onboarding/selectors/registration';
-import { Noop } from '../../../types/Util';
-import { Flex } from '../../basic/Flex';
-import { SessionButton } from '../../basic/SessionButton';
-import { SessionIdEditable } from '../../basic/SessionIdEditable';
-import { signUp } from '../RegistrationStages';
-import { RegistrationUserDetails } from '../RegistrationUserDetails';
-import { TermsAndConditions } from '../TermsAndConditions';
-import { BackButton } from '../components';
-import { sanitizeDisplayNameOrToast } from './SignInTab';
+} from '../../../../state/onboarding/selectors/registration';
+import { Flex } from '../../../basic/Flex';
+import { SessionButton } from '../../../basic/SessionButton';
+import { SessionIdEditable } from '../../../basic/SessionIdEditable';
+import { signUp } from '../../RegistrationStages';
+import { RegistrationUserDetails } from '../../RegistrationUserDetails';
+import { TermsAndConditions } from '../../TermsAndConditions';
+import { BackButton } from '../../components';
+import { sanitizeDisplayNameOrToast } from '../restore/SignInTab';
 
 const StyledContainer = styled.div`
   width: 100%;
   padding-top: 20px;
 `;
 
-const CreateSessionIdButton = ({ createSessionID }: { createSessionID: any }) => {
-  return <SessionButton onClick={createSessionID} text={window.i18n('createSessionID')} />;
-};
-
-const ContinueSignUpButton = ({ continueSignUp }: { continueSignUp: any }) => {
-  return <SessionButton onClick={continueSignUp} text={window.i18n('continue')} />;
-};
-
-const SignUpDefault = (props: { createSessionID: Noop }) => {
-  return (
-    <div className="session-registration__content">
-      <CreateSessionIdButton createSessionID={props.createSessionID} />
-    </div>
-  );
-};
-
-const SignUpSessionIDShown = (props: { continueSignUp: Noop }) => {
-  return (
-    <div className="session-registration__content">
-      <Flex flexDirection="row" container={true} alignItems="center">
-        <BackButton />
-
-        <div className="session-registration__unique-session-id">
-          {window.i18n('yourUniqueSessionID')}
-        </div>
-      </Flex>
-      <SessionIdEditable editable={false} placeholder={undefined} dataTestId="session-id-signup" />
-      <div className="session-description-long">{window.i18n('allUsersAreRandomly...')}</div>
-      <ContinueSignUpButton continueSignUp={props.continueSignUp} />
-      <TermsAndConditions />
-    </div>
-  );
-};
-
 export const SignUpTab = () => {
   const step = useOnboardAccountCreationStep();
   const generatedRecoveryPhrase = useOnboardGeneratedRecoveryPhrase();
@@ -79,22 +44,42 @@ export const SignUpTab = () => {
 
   if (step === AccountCreation.Start) {
     return (
-      <SignUpDefault
-        createSessionID={() => {
+      <div className="session-registration__content">
+        <SessionButton
+          onClick={() => {
             dispatch(setAccountCreationStep(AccountCreation.SessionIDShown));
             dispatch(setOnboardingStep(Onboarding.CreateAccount));
           }}
+          text={window.i18n('createSessionID')}
         />
+      </div>
     );
   }
 
   if (step === AccountCreation.SessionIDShown) {
     return (
-      <SignUpSessionIDShown
-        continueSignUp={() => {
+      <div className="session-registration__content">
+        <Flex flexDirection="row" container={true} alignItems="center">
+          <BackButton />
+
+          <div className="session-registration__unique-session-id">
+            {window.i18n('yourUniqueSessionID')}
+          </div>
+        </Flex>
+        <SessionIdEditable
+          editable={false}
+          placeholder={undefined}
+          dataTestId="session-id-signup"
+        />
+        <div className="session-description-long">{window.i18n('allUsersAreRandomly...')}</div>
+        <SessionButton
+          onClick={() => {
             dispatch(setAccountCreationStep(AccountCreation.DisplayName));
           }}
+          text={window.i18n('continue')}
         />
+        <TermsAndConditions />
+      </div>
     );
   }
 

ts/components/registration/stages/index.tsx

@@ -1,4 +1,4 @@
-import { SignInTab } from './SignInTab';
-import { SignUpTab } from './SignUpTab';
+import { SignUpTab } from './create/SignUpTab';
+import { SignInTab } from './restore/SignInTab';
 
 export { SignInTab, SignUpTab };

ts/components/registration/stages/restore/SignInTab.tsx

@@ -1,22 +1,22 @@
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { ToastUtils } from '../../../session/utils';
-import { sanitizeSessionUsername } from '../../../session/utils/String';
+import { ToastUtils } from '../../../../session/utils';
+import { sanitizeSessionUsername } from '../../../../session/utils/String';
 import {
   AccountRestoration,
   Onboarding,
   setAccountRestorationStep,
   setOnboardingStep,
-} from '../../../state/onboarding/ducks/registration';
-import { useOnboardAccountRestorationStep } from '../../../state/onboarding/selectors/registration';
-import { Flex } from '../../basic/Flex';
-import { SessionButton } from '../../basic/SessionButton';
-import { SpacerLG } from '../../basic/Text';
-import { SessionSpinner } from '../../loading';
-import { signInWithLinking, signInWithRecovery } from '../RegistrationStages';
-import { RegistrationUserDetails } from '../RegistrationUserDetails';
-import { TermsAndConditions } from '../TermsAndConditions';
-import { BackButton } from '../components';
+} from '../../../../state/onboarding/ducks/registration';
+import { useOnboardAccountRestorationStep } from '../../../../state/onboarding/selectors/registration';
+import { Flex } from '../../../basic/Flex';
+import { SessionButton } from '../../../basic/SessionButton';
+import { SpacerLG } from '../../../basic/Text';
+import { SessionSpinner } from '../../../loading';
+import { signInWithLinking, signInWithRecovery } from '../../RegistrationStages';
+import { RegistrationUserDetails } from '../../RegistrationUserDetails';
+import { TermsAndConditions } from '../../TermsAndConditions';
+import { BackButton } from '../../components';
 
 const LinkDeviceButton = (props: { onLinkDeviceButtonClicked: () => any }) => {
   return (

ts/types/LocalizerKeys.ts

@@ -37,7 +37,6 @@ export type LocalizerKeys =
   | 'autoUpdateSettingTitle'
   | 'banUser'
   | 'banUserAndDeleteAll'
-  | 'beginYourSession'
   | 'blindedMsgReqsSettingDesc'
   | 'blindedMsgReqsSettingTitle'
   | 'block'