fix: qa feedback - updated recovery phrase password modal to match password modals

ts/components/dialog/SessionSeedModal.tsx

@@ -5,7 +5,7 @@ import { matchesHash } from '../../util/passwordUtils';
 import { Data } from '../../data/data';
 import { QRCode } from 'react-qr-svg';
 import { mn_decode } from '../../session/crypto/mnemonic';
-import { SpacerLG, SpacerSM, SpacerXS } from '../basic/Text';
+import { SpacerSM } from '../basic/Text';
 import { recoveryPhraseModal } from '../../state/ducks/modalDialog';
 import { useDispatch } from 'react-redux';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
@@ -21,7 +21,6 @@ interface PasswordProps {
 const Password = (props: PasswordProps) => {
   const { setPasswordValid, passwordHash } = props;
   const i18n = window.i18n;
-  const [error, setError] = useState('');
   const dispatch = useDispatch();
 
   const onClose = () => dispatch(recoveryPhraseModal(null));
@@ -31,17 +30,17 @@ const Password = (props: PasswordProps) => {
     const isPasswordValid = matchesHash(passwordValue as string, passwordHash);
 
     if (!passwordValue) {
-      setError('noGivenPassword');
+      ToastUtils.pushToastError('enterPasswordErrorToast', i18n('noGivenPassword'));
+
       return false;
     }
 
     if (passwordHash && !isPasswordValid) {
-      setError('invalidPassword');
+      ToastUtils.pushToastError('enterPasswordErrorToast', i18n('invalidPassword'));
       return false;
     }
 
     setPasswordValid(true);
-    setError('');
 
     window.removeEventListener('keyup', onEnter);
     return true;
@@ -55,26 +54,23 @@ const Password = (props: PasswordProps) => {
 
   return (
     <>
-      <p>{i18n('showRecoveryPhrasePasswordRequest')}</p>
+      <div className="session-modal__input-group">
         <input
           type="password"
           id="seed-input-password"
-        placeholder={i18n('password')}
+          placeholder={i18n('enterPassword')}
           onKeyUp={onEnter}
         />
+      </div>
 
-      {error && (
+      <SpacerSM />
-        <>
-          <SpacerXS />
-          <div className="session-label danger">{error}</div>
-        </>
-      )}
-
-      <SpacerLG />
 
-      <div className="session-modal__button-group">
+      <div
+        className="session-modal__button-group"
+        style={{ justifyContent: 'center', width: '100%' }}
+      >
         <SessionButton
-          text={i18n('ok')}
+          text={i18n('done')}
           buttonType={SessionButtonType.Simple}
           onClick={confirmPassword}
         />