Merge pull request #17982 from mozilla/FXA-10210

feat(ux): Update 2fa signin screens/reset PW copy, create HeadingPrimary

Author: LZoog

packages/functional-tests/pages/resetPassword.ts

@@ -194,7 +194,7 @@ export class ResetPasswordPage extends BaseLayout {
   }
 
   async fillOutTotpForm(code: string) {
-    await this.page.getByLabel('Enter code').fill(code);
+    await this.page.getByLabel('Enter 6-digit code').fill(code);
     return this.page.getByRole('button', { name: 'Confirm' }).click();
   }
 
@@ -203,9 +203,7 @@ export class ResetPasswordPage extends BaseLayout {
   }
 
   async fillOurRecoveryCodeForm(code: string) {
-    await this.page
-      .getByLabel('Enter 10-digit backup authentication code')
-      .fill(code);
+    await this.page.getByLabel('Enter 10-character code').fill(code);
     return this.page.getByRole('button', { name: 'Confirm' }).click();
   }
 

packages/functional-tests/pages/signinRecoveryCode.ts

@@ -10,7 +10,7 @@ export class SigninRecoveryCodePage extends BaseTokenCodePage {
   get codeInput() {
     this.checkPath();
     return this.page
-      .getByLabel('Enter 10-digit backup') // React
+      .getByLabel('Enter 10-character code') // React
       .or(this.page.getByPlaceholder('Enter 10-digit backup')); //Backbone
   }
 }

packages/functional-tests/pages/signinTotpCode.ts

@@ -10,7 +10,7 @@ export class SigninTotpCodePage extends BaseTokenCodePage {
   get codeInput() {
     this.checkPath();
     return this.page
-      .getByLabel('Enter code') // React
+      .getByLabel('Enter 6-digit code') // React
       .or(this.page.getByPlaceholder('Enter 6-digit code')); //Backbone
   }
 

packages/fxa-settings/src/components/HeadingPrimary/index.stories.tsx

@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from 'react';
+import { HeadingPrimary } from '.';
+import { Meta } from '@storybook/react';
+
+export default {
+  title: 'Components/HeadingPrimary',
+  component: HeadingPrimary,
+} as Meta;
+
+export const Default = <HeadingPrimary>Primary heading text</HeadingPrimary>;

packages/fxa-settings/src/components/HeadingPrimary/index.tsx

@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from 'react';
+
+export const HeadingPrimary = ({
+  children,
+  marginClass = 'mb-5',
+}: {
+  children: React.ReactNode;
+  marginClass?: string;
+}) => <h1 className={`${marginClass} text-grey-400 text-base`}>{children}</h1>;

packages/fxa-settings/src/components/InlineRecoveryKeySetupCreate/index.tsx

@@ -8,6 +8,7 @@ import { FtlMsg } from 'fxa-react/lib/utils';
 import { CreateRecoveryKeyHandler } from '../../pages/InlineRecoveryKeySetup/interfaces';
 import Banner from '../Banner';
 import { useFtlMsgResolver } from '../../models';
+import { HeadingPrimary } from '../HeadingPrimary';
 
 export const InlineRecoveryKeySetupCreate = ({
   createRecoveryKeyHandler,
@@ -50,11 +51,9 @@ export const InlineRecoveryKeySetupCreate = ({
           content={{ localizedHeading: localizedErrorBannerMessage }}
         />
       )}
-      <h1 className="text-grey-400 mb-3 mt-5">
-        <FtlMsg id="inline-recovery-key-setup-create-header">
-          Secure your account
-        </FtlMsg>
-      </h1>
+      <FtlMsg id="inline-recovery-key-setup-create-header">
+        <HeadingPrimary>Secure your account</HeadingPrimary>
+      </FtlMsg>
 
       <RecoveryKeyImage className="my-6 mx-auto" />
 

packages/fxa-settings/src/pages/InlineRecoveryKeySetup/index.tsx

@@ -14,6 +14,7 @@ import { InlineRecoveryKeySetupProps } from './interfaces';
 import RecoveryKeySetupHint from '../../components/RecoveryKeySetupHint';
 import Banner from '../../components/Banner';
 import { useFtlMsgResolver } from '../../models';
+import { HeadingPrimary } from '../../components/HeadingPrimary';
 
 const viewName = 'inline-recovery-key-setup';
 
@@ -43,11 +44,9 @@ export const InlineRecoveryKeySetup = ({
       case 3:
         return (
           <>
-            <h1 className="text-grey-400">
-              <FtlMsg id="inline-recovery-key-setup-hint-header">
-                Security recommendation
-              </FtlMsg>
-            </h1>
+            <FtlMsg id="inline-recovery-key-setup-hint-header">
+              <HeadingPrimary>Security recommendation</HeadingPrimary>
+            </FtlMsg>
             <RecoveryKeySetupHint
               {...{ viewName }}
               navigateForward={() => {
@@ -69,11 +68,9 @@ export const InlineRecoveryKeySetup = ({
                 ),
               }}
             />
-            <h1 className="text-grey-400 mb-3 mt-5">
-              <FtlMsg id="inline-recovery-key-setup-download-header">
-                Secure your account
-              </FtlMsg>
-            </h1>
+            <FtlMsg id="inline-recovery-key-setup-download-header">
+              <HeadingPrimary>Secure your account</HeadingPrimary>
+            </FtlMsg>
             <RecoveryKeyImage className="my-6 mx-auto" />
 
             <h2 className="font-bold text-xl mb-5">

packages/fxa-settings/src/pages/ResetPassword/AccountRecoveryConfirmKey/index.tsx

@@ -22,6 +22,7 @@ import { getLocalizedErrorMessage } from '../../../lib/error-utils';
 import { RecoveryKeyImage } from '../../../components/images';
 import { Constants } from '../../../lib/constants';
 import Banner from '../../../components/Banner';
+import { HeadingPrimary } from '../../../components/HeadingPrimary';
 
 // TODO in FXA-7894 use sensitive data client to pass sensitive data
 // Depends on FXA-7400
@@ -138,23 +139,19 @@ const AccountRecoveryConfirmKey = ({
   };
 
   return (
-    <AppLayout>
+    <AppLayout cardClass="card-base">
       <FtlMsg id="password-reset-flow-heading">
-        <h1 className="text-start text-grey-400 text-sm">
-          Reset your password
-        </h1>
+        <HeadingPrimary>Reset your password</HeadingPrimary>
       </FtlMsg>
       {errorMessage && (
         <Banner type="error" content={{ localizedHeading: errorMessage }} />
       )}
       <RecoveryKeyImage className="mx-auto my-2" />
       <FtlMsg id="account-recovery-confirm-key-heading">
-        <h2 className="card-header text-start mb-2">
-          Enter your account recovery key
-        </h2>
+        <h2 className="card-header mb-2">Enter your account recovery key</h2>
       </FtlMsg>
       <FtlMsg id="account-recovery-confirm-key-instruction">
-        <p className="text-start text-sm">
+        <p className="text-sm">
           This key recovers your encrypted browsing data, such as passwords and
           bookmarks, from Firefox servers.
         </p>
@@ -190,7 +187,7 @@ const AccountRecoveryConfirmKey = ({
         </FtlMsg>
 
         {recoveryKeyHint && (
-          <div className="bg-grey-50 p-4 text-start text-sm rounded-md">
+          <div className="bg-grey-50 p-4 text-sm rounded-md">
             <FtlMsg id="account-recovery-confirm-key-hint">
               <p className="text-grey-500">Your storage hint is:</p>
             </FtlMsg>

packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.tsx

@@ -18,6 +18,7 @@ import { FtlMsg } from 'fxa-react/lib/utils';
 import ResetPasswordWarning from '../../../components/ResetPasswordWarning';
 import { Link, useLocation } from '@reach/router';
 import Banner from '../../../components/Banner';
+import { HeadingPrimary } from '../../../components/HeadingPrimary';
 
 const CompleteResetPassword = ({
   email,
@@ -63,11 +64,9 @@ const CompleteResetPassword = ({
   };
 
   return (
-    <AppLayout>
+    <AppLayout cardClass="card-base">
       <FtlMsg id="password-reset-flow-heading">
-        <p className="text-start text-grey-400 text-sm mb-6">
-          Reset your password
-        </p>
+        <HeadingPrimary>Reset your password</HeadingPrimary>
       </FtlMsg>
 
       {/*
@@ -92,11 +91,9 @@ const CompleteResetPassword = ({
       <input type="email" value={email} className="hidden" readOnly />
 
       <FtlMsg id="complete-reset-pw-header-v2">
-        <h1 className="font-semibold text-xl text-start mt-6">
-          Create a new password
-        </h1>
+        <h1 className="font-semibold text-xl mt-6">Create a new password</h1>
       </FtlMsg>
-      <section className="text-start mt-2">
+      <section className="mt-2">
         <FormPasswordWithInlineCriteria
           {...{
             email,

packages/fxa-settings/src/pages/ResetPassword/ConfirmResetPassword/index.tsx

@@ -14,6 +14,7 @@ import { ResendStatus } from '../../../lib/types';
 import { EmailCodeImage } from '../../../components/images';
 import GleanMetrics from '../../../lib/glean';
 import Banner, { ResendCodeSuccessBanner } from '../../../components/Banner';
+import { HeadingPrimary } from '../../../components/HeadingPrimary';
 
 const ConfirmResetPassword = ({
   clearBanners,
@@ -43,9 +44,9 @@ const ConfirmResetPassword = ({
   };
 
   return (
-    <AppLayout>
+    <AppLayout cardClass="card-base">
       <FtlMsg id="password-reset-flow-heading">
-        <p className="text-start text-grey-400 text-sm">Reset your password</p>
+        <HeadingPrimary marginClass="">Reset your password</HeadingPrimary>
       </FtlMsg>
       {resendStatus === ResendStatus.sent && !hasResendError && (
         <ResendCodeSuccessBanner />
@@ -61,16 +62,14 @@ const ConfirmResetPassword = ({
       )}
       <EmailCodeImage className="mx-auto" />
       <FtlMsg id="confirm-reset-password-with-code-heading">
-        <h2 className="card-header text-start my-4">Check your email</h2>
+        <h2 className="card-header my-4">Check your email</h2>
       </FtlMsg>
       <FtlMsg
         id="confirm-reset-password-with-code-instruction"
         vars={{ email }}
         elems={{ span: spanElement }}
       >
-        <p className="text-start">
-          We sent a confirmation code to {spanElement}.
-        </p>
+        <p>We sent a confirmation code to {spanElement}.</p>
       </FtlMsg>
       <FormVerifyTotp
         codeLength={8}
@@ -91,7 +90,7 @@ const ConfirmResetPassword = ({
         }}
       />
       <LinkRememberPassword {...{ email }} clickHandler={signinClickHandler} />
-      <div className="flex justify-between mt-4 text-sm">
+      <div className="flex justify-between mt-5 text-sm">
         <FtlMsg id="confirm-reset-password-otp-resend-code-button">
           <button type="button" className="link-blue" onClick={resendCode}>
             Resend code