From 69d5e2ea41b2eedde99b46b4994cbc1448ac86dd Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Mon, 17 Oct 2022 13:31:26 +1100
Subject: [PATCH] fix: qa feedback - updated recovery phrase password modal to
 match password modals

---
 ts/components/dialog/SessionSeedModal.tsx | 40 ++++++++++-------------
 1 file changed, 18 insertions(+), 22 deletions(-)

diff --git a/ts/components/dialog/SessionSeedModal.tsx b/ts/components/dialog/SessionSeedModal.tsx
index fb8cd6758..8487bda6c 100644
--- a/ts/components/dialog/SessionSeedModal.tsx
+++ b/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>
-      <input
-        type="password"
-        id="seed-input-password"
-        placeholder={i18n('password')}
-        onKeyUp={onEnter}
-      />
-
-      {error && (
-        <>
-          <SpacerXS />
-          <div className="session-label danger">{error}</div>
-        </>
-      )}
+      <div className="session-modal__input-group">
+        <input
+          type="password"
+          id="seed-input-password"
+          placeholder={i18n('enterPassword')}
+          onKeyUp={onEnter}
+        />
+      </div>
 
-      <SpacerLG />
+      <SpacerSM />
 
-      <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}
         />