feat: fix back button positioning relative to related component

we can now pass children to a container that holds the back button

ts/components/registration/RegistrationStages.tsx

@@ -30,7 +30,6 @@ import { Storage, setSignInByLinking, setSignWithRecoveryPhrase } from '../../ut
 import { Flex } from '../basic/Flex';
 import { SpacerLG, SpacerSM } from '../basic/Text';
 import { SessionIcon, SessionIconButton } from '../icon';
-import { BackButton } from './components';
 import { CreateAccount, RestoreAccount, Start } from './stages';
 
 const StyledRegistrationContainer = styled(Flex)`
@@ -207,53 +206,46 @@ export const RegistrationStages = () => {
   });
 
   return (
-    <Flex container={true}>
+    <StyledRegistrationContainer container={true} flexDirection="column">
-      {step === Onboarding.Start ? null : (
+      <Flex container={true} alignItems="center">
-        <div style={{ marginTop: 'calc(var(--margins-lg) + 30px)' }}>
+        <SessionIcon iconColor="var(--primary-color)" iconSize={'huge'} iconType="brand" />
-          <BackButton />
+        <SpacerSM />
+        <div style={{ flexGrow: 1 }}>
+          <SessionIcon iconSize={'small'} iconType="session" />
         </div>
-      )}
-      <StyledRegistrationContainer container={true} flexDirection="column">
         <Flex container={true} alignItems="center">
-          <SessionIcon iconColor="var(--primary-color)" iconSize={'huge'} iconType="brand" />
+          <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 />
-          <div style={{ flexGrow: 1 }}>
+          <SessionIconButton
-            <SessionIcon iconSize={'small'} iconType="session" />
+            aria-label="external link to Session FAQ web page"
-          </div>
+            iconType="link"
-          <Flex container={true} alignItems="center">
+            iconSize="medium"
-            <SessionIconButton
+            iconColor="var(--text-primary-color)"
-              aria-label="external link to Session FAQ web page"
+            iconPadding="4px"
-              iconType="question"
+            style={{ border: '2px solid var(--text-primary-color)', borderRadius: '9999px' }}
-              iconSize={'medium'}
+            onClick={() => {
-              iconPadding="4px"
+              void shell.openExternal('https://getsession.org');
-              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>
-
+      </Flex>
-        <Flex container={true} flexDirection="column" alignItems="center">
+
-          <SpacerLG />
+      <Flex container={true} flexDirection="column" alignItems="center">
-          {step === Onboarding.Start ? <Start /> : null}
+        <SpacerLG />
-          {step === Onboarding.CreateAccount ? <CreateAccount /> : null}
+        {step === Onboarding.Start ? <Start /> : null}
-          {step === Onboarding.RestoreAccount ? <RestoreAccount /> : null}
+        {step === Onboarding.CreateAccount ? <CreateAccount /> : null}
-        </Flex>
+        {step === Onboarding.RestoreAccount ? <RestoreAccount /> : null}
-      </StyledRegistrationContainer>
+      </Flex>
-    </Flex>
+    </StyledRegistrationContainer>
   );
 };

ts/components/registration/RegistrationUserDetails.tsx

@@ -1,6 +1,7 @@
 import { MAX_USERNAME_BYTES } from '../../session/constants';
 import { SpacerLG } from '../basic/Text';
 import { SessionInput2 } from '../inputs';
+import { BackButtonWithininContainer } from './components/BackButton';
 
 const DisplayNameInput = (props: {
   stealAutoFocus?: boolean;
@@ -59,29 +60,31 @@ export const RegistrationUserDetails = (props: Props) => {
   }
 
   return (
-    <div style={{ margin: 0 }}>
+    <BackButtonWithininContainer margin={'12px 0 0 0'}>
-      {props.showSeedField && (
+      <div style={{ margin: 0 }}>
-        <>
+        {props.showSeedField && (
-          <RecoveryPhraseInput
+          <>
-            recoveryPhrase={props.recoveryPhrase as string}
+            <RecoveryPhraseInput
-            handlePressEnter={props.handlePressEnter}
+              recoveryPhrase={props.recoveryPhrase as string}
-            onSeedChanged={props.onSeedChanged as any}
+              handlePressEnter={props.handlePressEnter}
-            stealAutoFocus={props.stealAutoFocus}
+              onSeedChanged={props.onSeedChanged as any}
-          />
+              stealAutoFocus={props.stealAutoFocus}
-          <SpacerLG />
+            />
-        </>
+            <SpacerLG />
-      )}
+          </>
-      {props.showDisplayNameField && (
+        )}
-        <>
+        {props.showDisplayNameField && (
-          <DisplayNameInput
+          <>
-            stealAutoFocus={!props.showSeedField && props.stealAutoFocus}
+            <DisplayNameInput
-            displayName={props.displayName}
+              stealAutoFocus={!props.showSeedField && props.stealAutoFocus}
-            handlePressEnter={props.handlePressEnter}
+              displayName={props.displayName}
-            onDisplayNameChanged={props.onDisplayNameChanged}
+              handlePressEnter={props.handlePressEnter}
-          />
+              onDisplayNameChanged={props.onDisplayNameChanged}
-          <SpacerLG />
+            />
-        </>
+            <SpacerLG />
-      )}
+          </>
-    </div>
+        )}
+      </div>
+    </BackButtonWithininContainer>
   );
 };

ts/components/registration/components/BackButton.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { useDispatch } from 'react-redux';
 import {
   AccountCreation,
@@ -7,8 +8,26 @@ import {
   setAccountRestorationStep,
   setOnboardingStep,
 } from '../../../state/onboarding/ducks/registration';
+import { Flex } from '../../basic/Flex';
 import { SessionIconButton } from '../../icon';
 
+export const BackButtonWithininContainer = ({
+  children,
+  margin,
+}: {
+  children: ReactNode;
+  margin?: string;
+}) => {
+  return (
+    <Flex container={true} width={'100%'} flexDirection="row" alignItems="flex-start">
+      <div style={{ margin }}>
+        <BackButton />
+      </div>
+      {children}
+    </Flex>
+  );
+};
+
 export const BackButton = () => {
   const dispatch = useDispatch();
 

ts/components/registration/stages/CreatAccount.tsx

@@ -16,6 +16,7 @@ import { SessionIdEditable } from '../../basic/SessionIdEditable';
 import { signUp } from '../RegistrationStages';
 import { RegistrationUserDetails } from '../RegistrationUserDetails';
 import { TermsAndConditions } from '../TermsAndConditions';
+import { BackButtonWithininContainer } from '../components/BackButton';
 import { sanitizeDisplayNameOrToast } from './RestoreAccount';
 
 const StyledContainer = styled.div`
@@ -48,11 +49,11 @@ export const CreateAccount = () => {
           alignItems="center"
           margin={'0 0 0 calc(var(--margins-sm) * -1)'}
         >
-          {/* <BackButton /> */}
+          <BackButtonWithininContainer margin={'-5px 0 0 0'}>
-
+            <div className="session-registration__unique-session-id">
-          <div className="session-registration__unique-session-id">
+              {window.i18n('yourUniqueSessionID')}
-            {window.i18n('yourUniqueSessionID')}
+            </div>
-          </div>
+          </BackButtonWithininContainer>
         </Flex>
         <SessionIdEditable
           editable={false}