feat: migrate session inputs on registration screen to the new component

still need to do the slide animation

stylesheets/_session_signin.scss

@@ -77,75 +77,71 @@
       @include registration-label-mixin;
       text-align: center;
     }
-
-    &__entry-fields {
-      margin: 0px;
-      padding-bottom: 30px;
-    }
-  }
-
-  &-input-floating-label-show-hide {
-    padding-inline-end: 30px;
-  }
-
-  &-input-with-label-container {
-    height: 46.5px;
-    width: 280px;
-    font-family: var(--font-default);
-    color: var(--text-primary-color);
-
-    padding: 2px 0 2px 0;
-    transition: opacity var(--default-duration);
-    opacity: 1;
-    position: relative;
-
-    label {
-      line-height: 14px;
-      opacity: 0;
-      color: var(--text-primary-color);
-
-      font-size: 10px;
-      line-height: 11px;
-      position: absolute;
-      top: 0px;
-    }
-
-    &.filled {
-      opacity: 1;
-    }
-
-    &.error {
-      color: var(--danger-color);
   }
 
-    input {
-      border: none;
-      outline: 0;
-      height: 14px;
-      width: 280px;
-      background: transparent;
-      color: var(--input-text-color);
-
-      font-family: var(--font-default);
-      font-size: 12px;
-      line-height: 14px;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-
-      &::placeholder {
-        color: var(--input-text-placeholder-color);
-      }
-    }
-
-    hr {
-      border: 1px solid var(--border-color);
-
-      width: 100%;
-      position: absolute;
-      bottom: 0px;
-    }
-  }
+  // TODO[epic=ses-50]: Remove the following styles
+  // &-input-floating-label-show-hide {
+  //   padding-inline-end: 30px;
+  // }
+
+  // &-input-with-label-container {
+  //   height: 46.5px;
+  //   width: 280px;
+  //   font-family: var(--font-default);
+  //   color: var(--text-primary-color);
+
+  //   padding: 2px 0 2px 0;
+  //   transition: opacity var(--default-duration);
+  //   opacity: 1;
+  //   position: relative;
+
+  //   label {
+  //     line-height: 14px;
+  //     opacity: 0;
+  //     color: var(--text-primary-color);
+
+  //     font-size: 10px;
+  //     line-height: 11px;
+  //     position: absolute;
+  //     top: 0px;
+  //   }
+
+  //   &.filled {
+  //     opacity: 1;
+  //   }
+
+  //   &.error {
+  //     color: var(--danger-color);
+  //   }
+
+  //   input {
+  //     border: none;
+  //     outline: 0;
+  //     height: 14px;
+  //     width: 280px;
+  //     background: transparent;
+  //     color: var(--input-text-color);
+
+  //     font-family: var(--font-default);
+  //     font-size: 12px;
+  //     line-height: 14px;
+  //     position: absolute;
+  //     top: 50%;
+  //     transform: translateY(-50%);
+
+  //     &::placeholder {
+  //       color: var(--input-text-placeholder-color);
+  //     }
+  //   }
+
+  //   hr {
+  //     border: 1px solid var(--border-color);
+
+  //     width: 100%;
+  //     position: absolute;
+  //     bottom: 0px;
+  //   }
+  // }
 
   &-terms-conditions-agreement {
     padding-top: var(--margins-md);

ts/components/registration/RegistrationUserDetails.tsx

@@ -1,7 +1,6 @@
-import classNames from 'classnames';
-
 import { MAX_USERNAME_BYTES } from '../../session/constants';
-import { SessionInput } from '../basic/SessionInput';
+import { SpacerLG } from '../basic/Text';
+import { SessionInput2 } from '../inputs';
 
 const DisplayNameInput = (props: {
   stealAutoFocus?: boolean;
@@ -10,9 +9,8 @@ const DisplayNameInput = (props: {
   handlePressEnter: () => any;
 }) => {
   return (
-    <SessionInput
+    <SessionInput2
       autoFocus={props.stealAutoFocus || false}
-      label={window.i18n('displayName')}
       type="text"
       placeholder={window.i18n('enterDisplayName')}
       value={props.displayName}
@@ -31,8 +29,7 @@ const RecoveryPhraseInput = (props: {
   stealAutoFocus?: boolean;
 }) => {
   return (
-    <SessionInput
-      label={window.i18n('recoveryPhrase')}
+    <SessionInput2
       type="password"
       value={props.recoveryPhrase}
       autoFocus={props.stealAutoFocus || false}
@@ -60,26 +57,31 @@ export const RegistrationUserDetails = (props: Props) => {
   if (props.showSeedField && (props.recoveryPhrase === undefined || !props.onSeedChanged)) {
     throw new Error('if show seed is true, we need callback + value');
   }
+
   return (
-    <div className={classNames('session-registration__entry-fields')}>
+    <div style={{ margin: 0 }}>
       {props.showSeedField && (
+        <>
           <RecoveryPhraseInput
             recoveryPhrase={props.recoveryPhrase as string}
             handlePressEnter={props.handlePressEnter}
             onSeedChanged={props.onSeedChanged as any}
             stealAutoFocus={props.stealAutoFocus}
           />
+          <SpacerLG />
+        </>
       )}
-      <div className="inputfields">
       {props.showDisplayNameField && (
+        <>
           <DisplayNameInput
             stealAutoFocus={!props.showSeedField && props.stealAutoFocus}
             displayName={props.displayName}
             handlePressEnter={props.handlePressEnter}
             onDisplayNameChanged={props.onDisplayNameChanged}
           />
+          <SpacerLG />
+        </>
       )}
     </div>
-    </div>
   );
 };

ts/components/registration/SignInTab.tsx

@@ -151,7 +151,7 @@ export const SignInTab = () => {
       {signInMode !== SignInMode.Default && (
         <>
           <GoBackMainMenuButton />
-
+          <SpacerLG />
           <RegistrationUserDetails
             showDisplayNameField={showDisplayNameField}
             showSeedField={true}