feat: renamed stages components to match redux slices

setup stage, trying to fix back button position, moved out start logic from stages

stylesheets/_session_signin.scss

@@ -9,7 +9,7 @@
       color: var(--text-primary-color);
 
       font-weight: bold;
-      padding: 20px;
+      padding: 0 20px 20px;
     }
 
     &__welcome-session {

ts/components/registration/RegistrationStages.tsx

@@ -28,10 +28,10 @@ import {
 } from '../../util/accountManager';
 import { Storage, setSignInByLinking, setSignWithRecoveryPhrase } from '../../util/storage';
 import { Flex } from '../basic/Flex';
-import { SpacerSM } from '../basic/Text';
+import { SpacerLG, SpacerSM } from '../basic/Text';
 import { SessionIcon, SessionIconButton } from '../icon';
-import { ModalContainer } from './ModalContainer';
-import { SignInTab, SignUpTab } from './stages';
+import { BackButton } from './components';
+import { CreateAccount, RestoreAccount, Start } from './stages';
 
 const StyledRegistrationContainer = styled(Flex)`
   width: 348px;
@@ -207,8 +207,12 @@ export const RegistrationStages = () => {
   });
 
   return (
-    <>
-      <ModalContainer />
+    <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" />
@@ -242,9 +246,14 @@ export const RegistrationStages = () => {
             />
           </Flex>
         </Flex>
-        {(step === Onboarding.Start || step === Onboarding.CreateAccount) && <SignUpTab />}
-        {(step === Onboarding.Start || step === Onboarding.RestoreAccount) && <SignInTab />}
+
+        <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>
   );
 };

ts/components/registration/SessionRegistrationView.tsx

@@ -7,6 +7,7 @@ import { SessionTheme } from '../../themes/SessionTheme';
 import { setSignInByLinking } from '../../util/storage';
 import { SessionToastContainer } from '../SessionToastContainer';
 import { Flex } from '../basic/Flex';
+import { ModalContainer } from './ModalContainer';
 import { RegistrationStages } from './RegistrationStages';
 import { Hero } from './components';
 
@@ -73,6 +74,7 @@ export const SessionRegistrationView = () => {
           >
             <Flex container={true} margin="auto" alignItems="center" flexDirection="column">
               <SessionToastContainer />
+              <ModalContainer />
               <RegistrationStages />
             </Flex>
           </StyledSessionContent>

ts/components/registration/stages/CreatAccount.tsx

@@ -3,30 +3,27 @@ import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import {
   AccountCreation,
-  Onboarding,
   setAccountCreationStep,
-  setOnboardingStep,
-} from '../../../../state/onboarding/ducks/registration';
+} from '../../../state/onboarding/ducks/registration';
 import {
   useOnboardAccountCreationStep,
   useOnboardGeneratedRecoveryPhrase,
   useOnboardHexGeneratedPubKey,
-} from '../../../../state/onboarding/selectors/registration';
-import { Flex } from '../../../basic/Flex';
-import { SessionButton } from '../../../basic/SessionButton';
-import { SessionIdEditable } from '../../../basic/SessionIdEditable';
-import { signUp } from '../../RegistrationStages';
-import { RegistrationUserDetails } from '../../RegistrationUserDetails';
-import { TermsAndConditions } from '../../TermsAndConditions';
-import { BackButton } from '../../components';
-import { sanitizeDisplayNameOrToast } from '../restore/SignInTab';
+} from '../../../state/onboarding/selectors/registration';
+import { Flex } from '../../basic/Flex';
+import { SessionButton } from '../../basic/SessionButton';
+import { SessionIdEditable } from '../../basic/SessionIdEditable';
+import { signUp } from '../RegistrationStages';
+import { RegistrationUserDetails } from '../RegistrationUserDetails';
+import { TermsAndConditions } from '../TermsAndConditions';
+import { sanitizeDisplayNameOrToast } from './RestoreAccount';
 
 const StyledContainer = styled.div`
   width: 100%;
   padding-top: 20px;
 `;
 
-export const SignUpTab = () => {
+export const CreateAccount = () => {
   const step = useOnboardAccountCreationStep();
   const generatedRecoveryPhrase = useOnboardGeneratedRecoveryPhrase();
   const hexGeneratedPubKey = useOnboardHexGeneratedPubKey();
@@ -42,25 +39,16 @@ export const SignUpTab = () => {
     }
   }, [step, hexGeneratedPubKey]);
 
-  if (step === AccountCreation.Start) {
-    return (
-      <div className="session-registration__content">
-        <SessionButton
-          onClick={() => {
-            dispatch(setAccountCreationStep(AccountCreation.SessionIDShown));
-            dispatch(setOnboardingStep(Onboarding.CreateAccount));
-          }}
-          text={window.i18n('createSessionID')}
-        />
-      </div>
-    );
-  }
-
   if (step === AccountCreation.SessionIDShown) {
     return (
-      <div className="session-registration__content">
-        <Flex flexDirection="row" container={true} alignItems="center">
-          <BackButton />
+      <div>
+        <Flex
+          flexDirection="row"
+          container={true}
+          alignItems="center"
+          margin={'0 0 0 calc(var(--margins-sm) * -1)'}
+        >
+          {/* <BackButton /> */}
 
           <div className="session-registration__unique-session-id">
             {window.i18n('yourUniqueSessionID')}
@@ -99,7 +87,6 @@ export const SignUpTab = () => {
   return (
     <StyledContainer>
       <Flex flexDirection="row" container={true} alignItems="center">
-        <BackButton />
         <Flex className="session-registration__welcome-session" padding="20px">
           {window.i18n('welcomeToYourSession')}
         </Flex>
@@ -119,7 +106,6 @@ export const SignUpTab = () => {
         text={window.i18n('getStarted')}
         disabled={!enableCompleteSignUp}
       />
-      <TermsAndConditions />
     </StyledContainer>
   );
 };

ts/components/registration/stages/RestoreAccount.tsx

@@ -1,42 +1,14 @@
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { ToastUtils } from '../../../../session/utils';
-import { sanitizeSessionUsername } from '../../../../session/utils/String';
-import {
-  AccountRestoration,
-  Onboarding,
-  setAccountRestorationStep,
-  setOnboardingStep,
-} from '../../../../state/onboarding/ducks/registration';
-import { useOnboardAccountRestorationStep } from '../../../../state/onboarding/selectors/registration';
-import { Flex } from '../../../basic/Flex';
-import { SessionButton } from '../../../basic/SessionButton';
-import { SpacerLG } from '../../../basic/Text';
-import { SessionSpinner } from '../../../loading';
-import { signInWithLinking, signInWithRecovery } from '../../RegistrationStages';
-import { RegistrationUserDetails } from '../../RegistrationUserDetails';
-import { TermsAndConditions } from '../../TermsAndConditions';
-import { BackButton } from '../../components';
-
-const LinkDeviceButton = (props: { onLinkDeviceButtonClicked: () => any }) => {
-  return (
-    <SessionButton
-      onClick={props.onLinkDeviceButtonClicked}
-      text={window.i18n('linkDevice')}
-      dataTestId="link-device"
-    />
-  );
-};
-
-const RestoreUsingRecoveryPhraseButton = (props: { onRecoveryButtonClicked: () => any }) => {
-  return (
-    <SessionButton
-      onClick={props.onRecoveryButtonClicked}
-      text={window.i18n('restoreUsingRecoveryPhrase')}
-      dataTestId="restore-using-recovery"
-    />
-  );
-};
+import { ToastUtils } from '../../../session/utils';
+import { sanitizeSessionUsername } from '../../../session/utils/String';
+import { AccountRestoration } from '../../../state/onboarding/ducks/registration';
+import { useOnboardAccountRestorationStep } from '../../../state/onboarding/selectors/registration';
+import { Flex } from '../../basic/Flex';
+import { SessionButton } from '../../basic/SessionButton';
+import { SessionSpinner } from '../../loading';
+import { signInWithLinking, signInWithRecovery } from '../RegistrationStages';
+import { RegistrationUserDetails } from '../RegistrationUserDetails';
+import { TermsAndConditions } from '../TermsAndConditions';
 
 const ContinueYourSessionButton = (props: {
   handleContinueYourSessionClick: () => any;
@@ -68,23 +40,6 @@ const SignInContinueButton = (props: {
   );
 };
 
-const SignInButtons = (props: {
-  accountRestorationStep: AccountRestoration;
-  onRecoveryButtonClicked: () => any;
-  onLinkDeviceButtonClicked: () => any;
-}) => {
-  if (props.accountRestorationStep !== AccountRestoration.Start) {
-    return null;
-  }
-  return (
-    <div>
-      <RestoreUsingRecoveryPhraseButton onRecoveryButtonClicked={props.onRecoveryButtonClicked} />
-      <SpacerLG />
-      <LinkDeviceButton onLinkDeviceButtonClicked={props.onLinkDeviceButtonClicked} />
-    </div>
-  );
-};
-
 export function sanitizeDisplayNameOrToast(
   displayName: string,
   setDisplayName: (sanitized: string) => void,
@@ -102,11 +57,9 @@ export function sanitizeDisplayNameOrToast(
   }
 }
 
-export const SignInTab = () => {
+export const RestoreAccount = () => {
   const step = useOnboardAccountRestorationStep();
 
-  const dispatch = useDispatch();
-
   const [recoveryPhrase, setRecoveryPhrase] = useState('');
   const [recoveryPhraseError, setRecoveryPhraseError] = useState(undefined as string | undefined);
   const [displayName, setDisplayName] = useState('');
@@ -146,11 +99,9 @@ export const SignInTab = () => {
   };
 
   return (
-    <div className="session-registration__content">
+    <>
       {step !== AccountRestoration.Start && (
         <>
-          <BackButton />
-          <SpacerLG />
           <RegistrationUserDetails
             showDisplayNameField={showDisplayNameField}
             showSeedField={true}
@@ -168,24 +119,6 @@ export const SignInTab = () => {
           />
         </>
       )}
-
-      <SignInButtons
-        accountRestorationStep={step}
-        onRecoveryButtonClicked={() => {
-          dispatch(setOnboardingStep(Onboarding.RestoreAccount));
-          dispatch(setAccountRestorationStep(AccountRestoration.RecoveryPassword));
-          setRecoveryPhrase('');
-          setDisplayName('');
-          setIsLoading(false);
-        }}
-        onLinkDeviceButtonClicked={() => {
-          dispatch(setOnboardingStep(Onboarding.RestoreAccount));
-          dispatch(setAccountRestorationStep(AccountRestoration.LinkDevice));
-          setRecoveryPhrase('');
-          setDisplayName('');
-          setIsLoading(false);
-        }}
-      />
       <SignInContinueButton
         accountRestorationStep={step}
         handleContinueYourSessionClick={continueYourSession}
@@ -212,6 +145,6 @@ export const SignInTab = () => {
       )}
 
       {showTermsAndConditions ? <TermsAndConditions /> : null}
-    </div>
+    </>
   );
 };

ts/components/registration/stages/Start.tsx

@@ -0,0 +1,51 @@
+import { useDispatch } from 'react-redux';
+import {
+  AccountCreation,
+  AccountRestoration,
+  Onboarding,
+  setAccountCreationStep,
+  setAccountRestorationStep,
+  setOnboardingStep,
+} from '../../../state/onboarding/ducks/registration';
+import { SessionButton, SessionButtonColor } from '../../basic/SessionButton';
+import { SpacerLG } from '../../basic/Text';
+import { TermsAndConditions } from '../TermsAndConditions';
+
+export const Start = () => {
+  const dispatch = useDispatch();
+
+  return (
+    <>
+      <SessionButton
+        buttonColor={SessionButtonColor.White}
+        onClick={() => {
+          dispatch(setAccountCreationStep(AccountCreation.SessionIDShown));
+          dispatch(setOnboardingStep(Onboarding.CreateAccount));
+        }}
+        text={window.i18n('createAccount')}
+      />
+      <SpacerLG />
+      <SessionButton
+        buttonColor={SessionButtonColor.White}
+        onClick={() => {
+          dispatch(setOnboardingStep(Onboarding.RestoreAccount));
+          dispatch(setAccountRestorationStep(AccountRestoration.RecoveryPassword));
+        }}
+        text={window.i18n('restoreUsingRecoveryPhrase')}
+        dataTestId="restore-using-recovery"
+      />
+      <SpacerLG />
+      <SessionButton
+        buttonColor={SessionButtonColor.White}
+        onClick={() => {
+          dispatch(setOnboardingStep(Onboarding.RestoreAccount));
+          dispatch(setAccountRestorationStep(AccountRestoration.LinkDevice));
+        }}
+        text={window.i18n('linkDevice')}
+        dataTestId="link-device"
+      />
+      <SpacerLG />
+      <TermsAndConditions />
+    </>
+  );
+};

ts/components/registration/stages/index.tsx

@@ -1,4 +1,5 @@
-import { SignUpTab } from './create/SignUpTab';
-import { SignInTab } from './restore/SignInTab';
+import { CreateAccount } from './CreatAccount';
+import { RestoreAccount } from './RestoreAccount';
+import { Start } from './Start';
 
-export { SignInTab, SignUpTab };
+export { CreateAccount, RestoreAccount, Start };