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,12 +206,6 @@ export const RegistrationStages = () => {
   });
 
   return (
-    <Flex container={true}>
-      {step === Onboarding.Start ? null : (
-        <div style={{ marginTop: 'calc(var(--margins-lg) + 30px)' }}>
-          <BackButton />
-        </div>
-      )}
     <StyledRegistrationContainer container={true} flexDirection="column">
       <Flex container={true} alignItems="center">
         <SessionIcon iconColor="var(--primary-color)" iconSize={'huge'} iconType="brand" />
@@ -254,6 +247,5 @@ export const RegistrationStages = () => {
         {step === Onboarding.RestoreAccount ? <RestoreAccount /> : null}
       </Flex>
     </StyledRegistrationContainer>
-    </Flex>
   );
 };

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,6 +60,7 @@ export const RegistrationUserDetails = (props: Props) => {
   }
 
   return (
+    <BackButtonWithininContainer margin={'12px 0 0 0'}>
       <div style={{ margin: 0 }}>
         {props.showSeedField && (
           <>
@@ -83,5 +85,6 @@ export const RegistrationUserDetails = (props: Props) => {
           </>
         )}
       </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">
               {window.i18n('yourUniqueSessionID')}
             </div>
+          </BackButtonWithininContainer>
         </Flex>
         <SessionIdEditable
           editable={false}