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 {
+  // TODO[epic=ses-50]: Remove the following styles
-    height: 46.5px;
+  // &-input-floating-label-show-hide {
-    width: 280px;
+  //   padding-inline-end: 30px;
-    font-family: var(--font-default);
+  // }
-    color: var(--text-primary-color);
+
-
+  // &-input-with-label-container {
-    padding: 2px 0 2px 0;
+  //   height: 46.5px;
-    transition: opacity var(--default-duration);
+  //   width: 280px;
-    opacity: 1;
+  //   font-family: var(--font-default);
-    position: relative;
+  //   color: var(--text-primary-color);
-
+
-    label {
+  //   padding: 2px 0 2px 0;
-      line-height: 14px;
+  //   transition: opacity var(--default-duration);
-      opacity: 0;
+  //   opacity: 1;
-      color: var(--text-primary-color);
+  //   position: relative;
-
+
-      font-size: 10px;
+  //   label {
-      line-height: 11px;
+  //     line-height: 14px;
-      position: absolute;
+  //     opacity: 0;
-      top: 0px;
+  //     color: var(--text-primary-color);
-    }
+
-
+  //     font-size: 10px;
-    &.filled {
+  //     line-height: 11px;
-      opacity: 1;
+  //     position: absolute;
-    }
+  //     top: 0px;
-
+  //   }
-    &.error {
+
-      color: var(--danger-color);
+  //   &.filled {
-    }
+  //     opacity: 1;
-
+  //   }
-    input {
+
-      border: none;
+  //   &.error {
-      outline: 0;
+  //     color: var(--danger-color);
-      height: 14px;
+  //   }
-      width: 280px;
+
-      background: transparent;
+  //   input {
-      color: var(--input-text-color);
+  //     border: none;
-
+  //     outline: 0;
-      font-family: var(--font-default);
+  //     height: 14px;
-      font-size: 12px;
+  //     width: 280px;
-      line-height: 14px;
+  //     background: transparent;
-      position: absolute;
+  //     color: var(--input-text-color);
-      top: 50%;
+
-      transform: translateY(-50%);
+  //     font-family: var(--font-default);
-
+  //     font-size: 12px;
-      &::placeholder {
+  //     line-height: 14px;
-        color: var(--input-text-placeholder-color);
+  //     position: absolute;
-      }
+  //     top: 50%;
-    }
+  //     transform: translateY(-50%);
-
+
-    hr {
+  //     &::placeholder {
-      border: 1px solid var(--border-color);
+  //       color: var(--input-text-placeholder-color);
-
+  //     }
-      width: 100%;
+  //   }
-      position: absolute;
+
-      bottom: 0px;
+  //   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
+    <SessionInput2
-      label={window.i18n('recoveryPhrase')}
       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}
+          <RecoveryPhraseInput
-          handlePressEnter={props.handlePressEnter}
+            recoveryPhrase={props.recoveryPhrase as string}
-          onSeedChanged={props.onSeedChanged as any}
+            handlePressEnter={props.handlePressEnter}
-          stealAutoFocus={props.stealAutoFocus}
+            onSeedChanged={props.onSeedChanged as any}
-        />
+            stealAutoFocus={props.stealAutoFocus}
+          />
+          <SpacerLG />
+        </>
       )}
-      <div className="inputfields">
+      {props.showDisplayNameField && (
-        {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}