feat: fixed alignment of loading screen and updated enter new display name copy

_locales/en/messages.json

@@ -583,6 +583,8 @@
   "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.",
   "displayNameErrorDescriptionShorter": "Please pick a shorter display name",
+  "displayNameNew": "Pick a new display name",
+  "displayNameErrorNew": "We were unable to load your display name. Please enter a new display name to continue.",
   "onboardingAccountCreated": "Account Created",
   "onboardingBubbleWelcomeToSession": "Welcome to Session",
   "conversationsNone": "You don't have any conversations yet",

ts/components/registration/stages/RestoreAccount.tsx

@@ -119,9 +119,9 @@ export const RestoreAccount = () => {
               </>
             ) : (
               <Flex container={true} width="100%" flexDirection="column" alignItems="flex-start">
-                <OnboardHeading>{window.i18n('displayNamePick')}</OnboardHeading>
+                <OnboardHeading>{window.i18n('displayNameNew')}</OnboardHeading>
                 <SpacerSM />
-                <OnboardDescription>{window.i18n('displayNameDescription')}</OnboardDescription>
+                <OnboardDescription>{window.i18n('displayNameErrorNew')}</OnboardDescription>
                 <SpacerLG />
                 <SessionInput
                   autoFocus={true}
@@ -141,6 +141,7 @@ export const RestoreAccount = () => {
                   onClick={recoverAndEnterDisplayName}
                   text={window.i18n('continue')}
                   disabled={
+                    // TODO Fix that even if there is an error we only care if there is something in the input check Create Account
                     !(
                       !!recoveryPhrase &&
                       !recoveryPhraseError &&
@@ -160,13 +161,11 @@ export const RestoreAccount = () => {
           width="100%"
           flexDirection="column"
           justifyContent="flex-start"
-          alignItems="center"
+          alignItems="flex-start"
-          margin={'0 0 0 8px'}
         >
           <SessionProgressBar
             progress={progress}
-            width={'320px'}
+            margin={'0'}
-            margin={'var(--margins-lg) auto'}
             title={window.i18n('waitOneMoment')}
             subtitle={window.i18n('loadAccountProgressMessage')}
             showPercentage={true}

ts/types/LocalizerKeys.ts

@@ -162,6 +162,8 @@ export type LocalizerKeys =
   | 'displayNameDescription'
   | 'displayNameEmpty'
   | 'displayNameErrorDescriptionShorter'
+  | 'displayNameErrorNew'
+  | 'displayNameNew'
   | 'displayNamePick'
   | 'displayNameTooLong'
   | 'document'