fixup registration page with back buttons for now

Relates #1889

stylesheets/_session_signin.scss

@@ -154,7 +154,6 @@
 
     &__unique-session-id {
       @include registration-label-mixin;
-      padding-top: 1em;
       text-align: center;
     }
 

ts/components/session/SessionButton.tsx

@@ -15,10 +15,8 @@ export enum SessionButtonColor {
   Green = 'green',
   White = 'white',
   Primary = 'primary',
-  Secondary = 'secondary',
   Success = 'success',
   Danger = 'danger',
-  DangerAlt = 'danger-alt',
   Warning = 'warning',
   None = '',
 }

ts/components/session/conversation/SessionMessagesListContainer.tsx

@@ -84,7 +84,12 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
 
     if (isSameConvo && snapShot?.realScrollTop && prevMsgLength !== newMsgLength) {
       if (messageAddedWasMoreRecentOne) {
-        currentRef.scrollTop = -(currentRef.scrollHeight - snapShot.realScrollTop);
+        if (snapShot.scrollHeight - snapShot.realScrollTop < 50) {
+          // consider that we were scrolled to bottom
+          currentRef.scrollTop = 0;
+        } else {
+          currentRef.scrollTop = -(currentRef.scrollHeight - snapShot.realScrollTop);
+        }
       } else {
         currentRef.scrollTop = snapShot.fakeScrollTop;
       }

ts/components/session/registration/RegistrationStages.tsx

@@ -2,8 +2,8 @@ import React, { createContext, useEffect, useState } from 'react';
 import { PromiseUtils, StringUtils, ToastUtils, UserUtils } from '../../../session/utils';
 import { getConversationController } from '../../../session/conversations';
 import { createOrUpdateItem, removeAll } from '../../../data/data';
-import { SignUpTab } from './SignUpTab';
-import { SignInTab } from './SignInTab';
+import { SignUpMode, SignUpTab } from './SignUpTab';
+import { SignInMode, SignInTab } from './SignInTab';
 import { trigger } from '../../../shims/events';
 import {
   generateMnemonic,
@@ -159,14 +159,22 @@ export enum RegistrationPhase {
 
 interface RegistrationPhaseContext {
   registrationPhase: RegistrationPhase;
+  signUpMode: SignUpMode;
+  signInMode: SignInMode;
   setRegistrationPhase: (phase: RegistrationPhase) => void;
+  setSignInMode: (phase: SignInMode) => void;
+  setSignUpMode: (phase: SignUpMode) => void;
   generatedRecoveryPhrase: string;
   hexGeneratedPubKey: string;
 }
 
 export const RegistrationContext = createContext<RegistrationPhaseContext>({
   registrationPhase: RegistrationPhase.Start,
+  signInMode: SignInMode.Default,
+  signUpMode: SignUpMode.Default,
   setRegistrationPhase: () => undefined,
+  setSignUpMode: () => undefined,
+  setSignInMode: () => undefined,
   generatedRecoveryPhrase: '',
   hexGeneratedPubKey: '',
 });
@@ -175,6 +183,8 @@ export const RegistrationStages = () => {
   const [generatedRecoveryPhrase, setGeneratedRecoveryPhrase] = useState('');
   const [hexGeneratedPubKey, setHexGeneratedPubKey] = useState('');
   const [registrationPhase, setRegistrationPhase] = useState(RegistrationPhase.Start);
+  const [signInMode, setSignInMode] = useState(SignInMode.Default);
+  const [signUpMode, setSignUpMode] = useState(SignUpMode.Default);
 
   useEffect(() => {
     void generateMnemonicAndKeyPair();
@@ -206,6 +216,10 @@ export const RegistrationStages = () => {
       <RegistrationContext.Provider
         value={{
           registrationPhase,
+          signInMode,
+          signUpMode,
+          setSignInMode,
+          setSignUpMode,
           setRegistrationPhase,
           generatedRecoveryPhrase,
           hexGeneratedPubKey,

ts/components/session/registration/SignInTab.tsx

@@ -10,6 +10,7 @@ import {
   signInWithRecovery,
 } from './RegistrationStages';
 import { RegistrationUserDetails } from './RegistrationUserDetails';
+import { GoBackMainMenuButton } from './SignUpTab';
 import { TermsAndConditions } from './TermsAndConditions';
 
 export enum SignInMode {
@@ -91,9 +92,8 @@ const SignInButtons = (props: {
 };
 
 export const SignInTab = () => {
-  const { setRegistrationPhase } = useContext(RegistrationContext);
+  const { setRegistrationPhase, signInMode, setSignInMode } = useContext(RegistrationContext);
 
-  const [signInMode, setSignInMode] = useState(SignInMode.Default);
   const [recoveryPhrase, setRecoveryPhrase] = useState('');
   const [recoveryPhraseError, setRecoveryPhraseError] = useState(undefined as string | undefined);
   const [displayName, setDisplayName] = useState('');
@@ -135,24 +135,28 @@ export const SignInTab = () => {
   return (
     <div className="session-registration__content">
       {signInMode !== SignInMode.Default && (
-        <RegistrationUserDetails
-          showDisplayNameField={showDisplayNameField}
-          showSeedField={true}
-          displayName={displayName}
-          handlePressEnter={continueYourSession}
-          onDisplayNameChanged={(name: string) => {
-            const sanitizedName = name.replace(window.displayNameRegex, '');
-            const trimName = sanitizedName.trim();
-            setDisplayName(sanitizedName);
-            setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined);
-          }}
-          onSeedChanged={(seed: string) => {
-            setRecoveryPhrase(seed);
-            setRecoveryPhraseError(!seed ? window.i18n('recoveryPhraseEmpty') : undefined);
-          }}
-          recoveryPhrase={recoveryPhrase}
-          stealAutoFocus={true}
-        />
+        <>
+          <GoBackMainMenuButton />
+
+          <RegistrationUserDetails
+            showDisplayNameField={showDisplayNameField}
+            showSeedField={true}
+            displayName={displayName}
+            handlePressEnter={continueYourSession}
+            onDisplayNameChanged={(name: string) => {
+              const sanitizedName = name.replace(window.displayNameRegex, '');
+              const trimName = sanitizedName.trim();
+              setDisplayName(sanitizedName);
+              setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined);
+            }}
+            onSeedChanged={(seed: string) => {
+              setRecoveryPhrase(seed);
+              setRecoveryPhraseError(!seed ? window.i18n('recoveryPhraseEmpty') : undefined);
+            }}
+            recoveryPhrase={recoveryPhrase}
+            stealAutoFocus={true}
+          />
+        </>
       )}
 
       <SignInButtons

ts/components/session/registration/SignUpTab.tsx

@@ -1,8 +1,11 @@
 import React, { useContext, useEffect, useState } from 'react';
+import { Flex } from '../../basic/Flex';
+import { SessionIconButton } from '../icon';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton';
 import { SessionIdEditable } from '../SessionIdEditable';
 import { RegistrationContext, RegistrationPhase, signUp } from './RegistrationStages';
 import { RegistrationUserDetails } from './RegistrationUserDetails';
+import { SignInMode } from './SignInTab';
 import { TermsAndConditions } from './TermsAndConditions';
 
 export enum SignUpMode {
@@ -41,12 +44,32 @@ const SignUpDefault = (props: { createSessionID: () => void }) => {
   );
 };
 
+export const GoBackMainMenuButton = () => {
+  const { setRegistrationPhase, setSignInMode, setSignUpMode } = useContext(RegistrationContext);
+  return (
+    <SessionIconButton
+      iconSize="huge"
+      iconType="arrow"
+      iconPadding="5px"
+      onClick={() => {
+        setRegistrationPhase(RegistrationPhase.Start);
+        setSignInMode(SignInMode.Default);
+        setSignUpMode(SignUpMode.Default);
+      }}
+    />
+  );
+};
+
 const SignUpSessionIDShown = (props: { continueSignUp: () => void }) => {
   return (
     <div className="session-registration__content">
-      <div className="session-registration__unique-session-id">
-        {window.i18n('yourUniqueSessionID')}
-      </div>
+      <Flex flexDirection="row" container={true} alignItems="center">
+        <GoBackMainMenuButton />
+
+        <div className="session-registration__unique-session-id">
+          {window.i18n('yourUniqueSessionID')}
+        </div>
+      </Flex>
       <SessionIdEditable editable={false} placeholder={undefined} />
       <div className="session-description-long">{window.i18n('signupSessionIDBlurb')}</div>
       <ContinueSignUpButton continueSignUp={props.continueSignUp} />
@@ -56,11 +79,13 @@ const SignUpSessionIDShown = (props: { continueSignUp: () => void }) => {
 };
 
 export const SignUpTab = () => {
-  const { setRegistrationPhase, generatedRecoveryPhrase, hexGeneratedPubKey } = useContext(
-    RegistrationContext
-  );
-
-  const [signUpMode, setSignUpMode] = useState(SignUpMode.Default);
+  const {
+    signUpMode,
+    setRegistrationPhase,
+    generatedRecoveryPhrase,
+    hexGeneratedPubKey,
+    setSignUpMode,
+  } = useContext(RegistrationContext);
   const [displayName, setDisplayName] = useState('');
   const [displayNameError, setDisplayNameError] = useState('');
 
@@ -106,10 +131,12 @@ export const SignUpTab = () => {
 
   return (
     <div className="session-registration__content">
-      <div className="session-registration__welcome-session">
-        {window.i18n('welcomeToYourSession')}
-      </div>
-
+      <Flex flexDirection="row" container={true} alignItems="center">
+        <GoBackMainMenuButton />
+        <Flex className="session-registration__welcome-session" padding="20px">
+          {window.i18n('welcomeToYourSession')}
+        </Flex>
+      </Flex>
       <RegistrationUserDetails
         showDisplayNameField={true}
         showSeedField={false}

ts/state/ducks/conversations.ts

@@ -663,6 +663,7 @@ const conversationsSlice = createSlice({
       // keep the unread visible just like in other apps. It will be shown until the user changes convo
       return {
         ...state,
+        firstUnreadMessageId: undefined,
       };
     },