feat: extract back button to separate component

ts/components/registration/components/BackButton.tsx

@@ -0,0 +1,26 @@
+import { useDispatch } from 'react-redux';
+import {
+  setRegistrationPhase,
+  setSignInMode,
+  setSignUpMode,
+} from '../../../state/onboarding/ducks/registration';
+import { SessionIconButton } from '../../icon';
+import { RegistrationPhase } from '../RegistrationStages';
+import { SignInMode, SignUpMode } from '../stages';
+
+export const BackButton = () => {
+  const dispatch = useDispatch();
+
+  return (
+    <SessionIconButton
+      iconSize="huge"
+      iconType="arrow"
+      iconPadding="5px"
+      onClick={() => {
+        dispatch(setRegistrationPhase(RegistrationPhase.Start));
+        dispatch(setSignInMode(SignInMode.Default));
+        dispatch(setSignUpMode(SignUpMode.Default));
+      }}
+    />
+  );
+};

ts/components/registration/components/index.tsx

@@ -1,3 +1,4 @@
+import { BackButton } from './BackButton';
 import { Hero } from './Hero';
 
-export { Hero };
+export { BackButton, Hero };

ts/components/registration/stages/SignInTab.tsx

@@ -11,7 +11,7 @@ import { SessionSpinner } from '../../loading';
 import { RegistrationPhase, signInWithLinking, signInWithRecovery } from '../RegistrationStages';
 import { RegistrationUserDetails } from '../RegistrationUserDetails';
 import { TermsAndConditions } from '../TermsAndConditions';
-import { GoBackMainMenuButton } from './SignUpTab';
+import { BackButton } from '../components';
 
 export enum SignInMode {
   Default,
@@ -150,7 +150,7 @@ export const SignInTab = () => {
     <div className="session-registration__content">
       {signInMode !== SignInMode.Default && (
         <>
-          <GoBackMainMenuButton />
+          <BackButton />
           <SpacerLG />
           <RegistrationUserDetails
             showDisplayNameField={showDisplayNameField}

ts/components/registration/stages/SignUpTab.tsx

@@ -1,10 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import {
+import styled from 'styled-components';
-  setRegistrationPhase,
+import { setRegistrationPhase, setSignUpMode } from '../../../state/onboarding/ducks/registration';
-  setSignInMode,
-  setSignUpMode,
-} from '../../../state/onboarding/ducks/registration';
 import {
   useRegGeneratedRecoveryPhrase,
   useRegHexGeneratedPubKey,
@@ -14,11 +11,16 @@ import { Noop } from '../../../types/Util';
 import { Flex } from '../../basic/Flex';
 import { SessionButton } from '../../basic/SessionButton';
 import { SessionIdEditable } from '../../basic/SessionIdEditable';
-import { SessionIconButton } from '../../icon';
 import { RegistrationPhase, signUp } from '../RegistrationStages';
 import { RegistrationUserDetails } from '../RegistrationUserDetails';
 import { TermsAndConditions } from '../TermsAndConditions';
-import { SignInMode, sanitizeDisplayNameOrToast } from './SignInTab';
+import { BackButton } from '../components';
+import { sanitizeDisplayNameOrToast } from './SignInTab';
+
+const StyledContainer = styled.div`
+  width: 100%;
+  padding-top: 20px;
+`;
 
 export enum SignUpMode {
   Default,
@@ -42,27 +44,11 @@ const SignUpDefault = (props: { createSessionID: Noop }) => {
   );
 };
 
-export const GoBackMainMenuButton = () => {
-  const dispatch = useDispatch();
-  return (
-    <SessionIconButton
-      iconSize="huge"
-      iconType="arrow"
-      iconPadding="5px"
-      onClick={() => {
-        dispatch(setRegistrationPhase(RegistrationPhase.Start));
-        dispatch(setSignInMode(SignInMode.Default));
-        dispatch(setSignUpMode(SignUpMode.Default));
-      }}
-    />
-  );
-};
-
 const SignUpSessionIDShown = (props: { continueSignUp: Noop }) => {
   return (
     <div className="session-registration__content">
       <Flex flexDirection="row" container={true} alignItems="center">
-        <GoBackMainMenuButton />
+        <BackButton />
 
         <div className="session-registration__unique-session-id">
           {window.i18n('yourUniqueSessionID')}
@@ -127,9 +113,9 @@ export const SignUpTab = () => {
   };
 
   return (
-    <div className="session-registration__content">
+    <StyledContainer>
       <Flex flexDirection="row" container={true} alignItems="center">
-        <GoBackMainMenuButton />
+        <BackButton />
         <Flex className="session-registration__welcome-session" padding="20px">
           {window.i18n('welcomeToYourSession')}
         </Flex>
@@ -150,6 +136,6 @@ export const SignUpTab = () => {
         disabled={!enableCompleteSignUp}
       />
       <TermsAndConditions />
-    </div>
+    </StyledContainer>
   );
 };