feat(ui): Small updates on Onboarding flow

src/locales/en/en.json

@@ -47,6 +47,7 @@
   "setpasscode": {
     "enterpasscode": "Create your PIN",
     "description": "Create a PIN to secure your wallet and to continue the onboarding process",
+    "reenterdescription": "Re-enter your PIN to make sure it matches",
     "recoverydescription": "Create a PIN to secure your wallet and to continue the recovery process",
     "reenterpasscode": "Re-enter your PIN",
     "cancelbtn": "Cancel",
@@ -165,7 +166,7 @@
     "description": "Please enter your PIN to login",
     "error": "Incorrect PIN",
     "forgotten": {
-      "button": "I've forgotten my PIN"
+      "button": "Forgotten PIN?"
     },
     "attempterror": "{{attempt}} attempt remaining",
     "attemptalert": {
@@ -310,11 +311,11 @@
       "first": {
         "symbolguide": "Symbol guide",
         "title": "Create password",
-        "placeholder": "Type password"
+        "placeholder": "e.g. AbcDE123!"
       },
       "second": {
         "title": "Confirm password",
-        "placeholder": "Retype your password"
+        "placeholder": "e.g. AbcDE123!"
       },
       "third": {
         "title": "Create a hint",

src/ui/components/CreatePasscodeModule/CreatePasscodeModule.tsx

@@ -276,8 +276,8 @@ const CreatePasscodeModule = forwardRef<
         <PageFooter
           pageId={testId}
           customClass={originalPassCode === "" ? "hide " : ""}
-          secondaryButtonText={`${i18n.t("createpasscodemodule.cantremember")}`}
-          secondaryButtonAction={() => handleClearState()}
+          tertiaryButtonText={`${i18n.t("createpasscodemodule.cantremember")}`}
+          tertiaryButtonAction={() => handleClearState()}
         />
         <Alert
           isOpen={showSetupBiometricsAlert}

src/ui/components/CustomInput/CustomInput.scss

@@ -49,6 +49,7 @@ ion-item.custom-input {
     width: 100%;
     border: 1px solid var(--ion-color-neutral-400);
     border-radius: 0.5rem;
+    background: var(--ion-color-neutral-100);
 
     &:focus-within {
       border-color: var(--ion-color-neutral-700);

src/ui/components/ForgotAuthInfo/ForgotAuthInfo.test.tsx

@@ -191,7 +191,7 @@ describe("Forgot Passcode Page", () => {
 
     await waitFor(() => {
       expect(
-        getByTestId("secondary-button-forgot-auth-info-modal")
+        getByTestId("tertiary-button-forgot-auth-info-modal")
       ).toBeVisible();
     });
 

src/ui/components/PasswordModule/PasswordModule.scss

@@ -44,6 +44,11 @@
 
     & > h2 {
       margin: 1rem 0 0.94rem;
+      text-align: center;
+    }
+
+    .page-paragraph {
+      text-align: center;
     }
 
     .create-password-input:not(.normal) {

src/ui/components/PasswordModule/components/PasswordMeter/PasswordMeter.tsx

@@ -34,21 +34,23 @@ const PasswordMeter = ({ password }: PasswordMeterProps) => {
   return (
     <div className="password-criteria">
       {password.length > 0 && (
-        <div className="password-strength-meter">
-          <div className={classes}>
-            <div className="level" />
-            <div className="level" />
-            <div className="level" />
+        <>
+          <div className="password-strength-meter">
+            <div className={classes}>
+              <div className="level" />
+              <div className="level" />
+              <div className="level" />
+            </div>
+            <p>{label}</p>
           </div>
-          <p>{label}</p>
-        </div>
+          <p
+            className={acceptCriteriaClass}
+            data-testid="password-accept-criteria"
+          >
+            <Trans i18nKey="createpassword.meter.acceptcriteria.text" />
+          </p>
+        </>
       )}
-      <p
-        className={acceptCriteriaClass}
-        data-testid="password-accept-criteria"
-      >
-        <Trans i18nKey="createpassword.meter.acceptcriteria.text" />
-      </p>
     </div>
   );
 };

src/ui/components/RecoverySeedPhraseModule/RecoverySeedPhraseModule.scss

@@ -4,6 +4,10 @@
   justify-content: space-between;
   min-height: calc(100vh - (4.5rem + var(--ion-safe-area-top)));
 
+  .title {
+    text-align: center;
+  }
+
   .paragraph-top {
     padding-inline: 1rem;
     text-align: center;

src/ui/pages/LockPage/LockPage.tsx

@@ -30,7 +30,10 @@ import {
   showGenericError,
 } from "../../../store/reducers/stateCache";
 import { Alert } from "../../components/Alert";
-import { ErrorMessage, MESSAGE_MILLISECONDS } from "../../components/ErrorMessage";
+import {
+  ErrorMessage,
+  MESSAGE_MILLISECONDS,
+} from "../../components/ErrorMessage";
 import { ForgotAuthInfo } from "../../components/ForgotAuthInfo";
 import { ForgotType } from "../../components/ForgotAuthInfo/ForgotAuthInfo.types";
 import {
@@ -272,7 +275,10 @@ const LockPageContainer = () => {
         <MaxLoginAttemptAlert lockDuration={lockDuration} />
       ) : (
         <>
-          <h2 className={`${pageId}-title`} data-testid={`${pageId}-title`}>
+          <h2
+            className={`${pageId}-title`}
+            data-testid={`${pageId}-title`}
+          >
             {i18n.t("lockpage.title")}
           </h2>
           <p
@@ -282,7 +288,13 @@ const LockPageContainer = () => {
             {i18n.t("lockpage.description")}
           </p>
           <PasscodeModule
-            error={<ErrorMessage message={error} timeout={true} key={error} />}
+            error={
+              <ErrorMessage
+                message={error}
+                timeout={true}
+                key={error}
+              />
+            }
             hasError={!!error}
             passcode={passcode}
             handlePinChange={handlePinChange}
@@ -293,8 +305,8 @@ const LockPageContainer = () => {
       )}
       <PageFooter
         pageId={pageId}
-        secondaryButtonText={`${i18n.t("lockpage.forgotten.button")}`}
-        secondaryButtonAction={handleRecoveryButtonClick}
+        tertiaryButtonText={`${i18n.t("lockpage.forgotten.button")}`}
+        tertiaryButtonAction={handleRecoveryButtonClick}
       />
       <Alert
         isOpen={alertIsOpen}
@@ -350,4 +362,4 @@ const LockPage = () => {
   return <LockPageContainer />;
 };
 
-export { LockPage };
+export { LockPage };

src/ui/pages/SetPasscode/SetPasscode.tsx

@@ -87,8 +87,8 @@ const SetPasscode = () => {
     ionRouter.push(backPath.pathname, "back", "pop");
   };
 
-  const description = stateCache.authentication.recoveryWalletProgress
-    ? i18n.t("setpasscode.recoverydescription")
+  const description = isOnReenterPasscodeStep
+    ? i18n.t("setpasscode.reenterdescription")
     : i18n.t("setpasscode.description");
 
   const progressBarValue = stateCache.authentication.recoveryWalletProgress

src/ui/pages/SetupGroupProfile/SetupGroupProfile.tsx

@@ -77,7 +77,7 @@ const SetupGroupProfile = () => {
       identity?.creationStatus === CreationStatus.COMPLETE &&
       !!identity?.groupMemberPre
     ) {
-      router.push(TabsRoutePath.CREDENTIALS, "root", "replace");
+      router.push(TabsRoutePath.HOME, "root", "replace");
     }
   }, [identity?.creationStatus, identity?.groupMemberPre, router]);