From 3eb7f241bf3d8e361788f2ff8aef7b0fcf55ccca Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Mon, 26 Feb 2024 11:34:04 +1100
Subject: [PATCH] feat: fix back button positioning relative to related
 component

we can now pass children to a container that holds the back button
---
 .../registration/RegistrationStages.tsx       | 82 +++++++++----------
 .../registration/RegistrationUserDetails.tsx  | 51 ++++++------
 .../registration/components/BackButton.tsx    | 19 +++++
 .../registration/stages/CreatAccount.tsx      | 11 +--
 4 files changed, 89 insertions(+), 74 deletions(-)

diff --git a/ts/components/registration/RegistrationStages.tsx b/ts/components/registration/RegistrationStages.tsx
index 251e08788..58931c4ab 100644
--- a/ts/components/registration/RegistrationStages.tsx
+++ b/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}>
-      {step === Onboarding.Start ? null : (
-        <div style={{ marginTop: 'calc(var(--margins-lg) + 30px)' }}>
-          <BackButton />
+    <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>
-      )}
-      <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 }}>
-            <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>
+          <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 container={true} flexDirection="column" alignItems="center">
-          <SpacerLG />
-          {step === Onboarding.Start ? <Start /> : null}
-          {step === Onboarding.CreateAccount ? <CreateAccount /> : null}
-          {step === Onboarding.RestoreAccount ? <RestoreAccount /> : null}
-        </Flex>
-      </StyledRegistrationContainer>
-    </Flex>
+      </Flex>
+
+      <Flex container={true} flexDirection="column" alignItems="center">
+        <SpacerLG />
+        {step === Onboarding.Start ? <Start /> : null}
+        {step === Onboarding.CreateAccount ? <CreateAccount /> : null}
+        {step === Onboarding.RestoreAccount ? <RestoreAccount /> : null}
+      </Flex>
+    </StyledRegistrationContainer>
   );
 };
diff --git a/ts/components/registration/RegistrationUserDetails.tsx b/ts/components/registration/RegistrationUserDetails.tsx
index 8eb0e774c..f332de3b0 100644
--- a/ts/components/registration/RegistrationUserDetails.tsx
+++ b/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 }}>
-      {props.showSeedField && (
-        <>
-          <RecoveryPhraseInput
-            recoveryPhrase={props.recoveryPhrase as string}
-            handlePressEnter={props.handlePressEnter}
-            onSeedChanged={props.onSeedChanged as any}
-            stealAutoFocus={props.stealAutoFocus}
-          />
-          <SpacerLG />
-        </>
-      )}
-      {props.showDisplayNameField && (
-        <>
-          <DisplayNameInput
-            stealAutoFocus={!props.showSeedField && props.stealAutoFocus}
-            displayName={props.displayName}
-            handlePressEnter={props.handlePressEnter}
-            onDisplayNameChanged={props.onDisplayNameChanged}
-          />
-          <SpacerLG />
-        </>
-      )}
-    </div>
+    <BackButtonWithininContainer margin={'12px 0 0 0'}>
+      <div style={{ margin: 0 }}>
+        {props.showSeedField && (
+          <>
+            <RecoveryPhraseInput
+              recoveryPhrase={props.recoveryPhrase as string}
+              handlePressEnter={props.handlePressEnter}
+              onSeedChanged={props.onSeedChanged as any}
+              stealAutoFocus={props.stealAutoFocus}
+            />
+            <SpacerLG />
+          </>
+        )}
+        {props.showDisplayNameField && (
+          <>
+            <DisplayNameInput
+              stealAutoFocus={!props.showSeedField && props.stealAutoFocus}
+              displayName={props.displayName}
+              handlePressEnter={props.handlePressEnter}
+              onDisplayNameChanged={props.onDisplayNameChanged}
+            />
+            <SpacerLG />
+          </>
+        )}
+      </div>
+    </BackButtonWithininContainer>
   );
 };
diff --git a/ts/components/registration/components/BackButton.tsx b/ts/components/registration/components/BackButton.tsx
index 105a91cc2..636790772 100644
--- a/ts/components/registration/components/BackButton.tsx
+++ b/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();
 
diff --git a/ts/components/registration/stages/CreatAccount.tsx b/ts/components/registration/stages/CreatAccount.tsx
index 706d1b1cc..1b2f0cc27 100644
--- a/ts/components/registration/stages/CreatAccount.tsx
+++ b/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 /> */}
-
-          <div className="session-registration__unique-session-id">
-            {window.i18n('yourUniqueSessionID')}
-          </div>
+          <BackButtonWithininContainer margin={'-5px 0 0 0'}>
+            <div className="session-registration__unique-session-id">
+              {window.i18n('yourUniqueSessionID')}
+            </div>
+          </BackButtonWithininContainer>
         </Flex>
         <SessionIdEditable
           editable={false}