feat(settings): Adjust settings promo banner for mobile

Because:

* We want to match designs for mobile view

This commit:

* Adjust styling of the NotificationPromoBanner component to support mobile view
* Adjust styling of PageSettings to use a gap between components (removes needs for setting external margins in section components
* Remove stacked banner story, the spacing between the banners is now set at the PageSettings level
* Adds story to PageSettings to show NotificationPromoBanner in context
* Small drive-by tweaks for ltr/rtl

Closes #FXA-10405

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

@@ -48,10 +48,3 @@ export const NotVisible = () => (
     {...disabledNotificationProps}
   ></NotificationPromoBanner>
 );
-
-export const Stacked = () => (
-  <>
-    <NotificationPromoBanner {...notificationProps}></NotificationPromoBanner>
-    <NotificationPromoBanner {...notificationProps}></NotificationPromoBanner>
-  </>
-);

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

@@ -50,10 +50,12 @@ const NotificationPromoBanner = ({
   if (!visible || bannerClosed === 'true') return null;
 
   return (
+    // trasnsparent border is for HCM mode
     <div
-      className={`relative flex justify-between items-center rounded-lg bg-gradient-to-tr from-blue-600/10 to-purple-500/10 p-3 shadow-md space-x-4 mb-5 transition-transform duration-300 ease-in-out ${
-        isClosing ? 'translate-x-full' : 'translate-x-0'
-      }`}
+      className={`relative flex flex-col tablet:flex-row rounded-lg bg-gradient-to-tr from-blue-600/10 to-purple-500/10
+         transition-transform border border-transparent duration-300 ease-in-out p-2 tablet:p-3 ${
+           isClosing ? 'translate-x-full' : 'translate-x-0'
+         }`}
     >
       <FtlMsg id="banner-dismiss-button" attrs={{ ariaLabel: true }}>
         <button
@@ -68,26 +70,29 @@ const NotificationPromoBanner = ({
             setIsClosing(true);
             setTimeout(() => setVisible(false), 300);
           }}
-          className="absolute top-3 end-3"
+          className="self-end absolute top-1 end-1 p-2"
           data-glean-id={`account_banner_${metricsKey}_dismiss`}
         >
-          <IconClose className="text-black w-3 h-3" role="img" />
+          <IconClose className="text-black w-4 h-4" role="img" />
         </button>
       </FtlMsg>
-      <div className="flex-shrink-0 items-center justify-center p-4">
-        {headerImage && (
-          <img src={headerImage} alt="Key Icon" className="w-8 h-8" />
-        )}
-      </div>
+      <div className="flex flex-col tablet:flex-row grow gap-4 py-4 ps-4 pe-4">
+        <div className="flex flex-row grow me-6">
+          {headerImage && (
+            <img
+              src={headerImage}
+              alt="Key Icon"
+              className="w-10 h-10 hidden mobileLandscape:block mobileLandscape:mt-2 mobileLandscape:me-4"
+            />
+          )}
+          <div className="flex flex-col">
+            <p className="font-bold text-black">{headerValue}</p>
+            <p className="text-sm">{headerDescription}</p>
+          </div>
+        </div>
 
-      <div className="flex-grow">
-        <p className="font-bold text-black mb-2">{headerValue}</p>
-        <p className="text-sm leading-relaxed">{headerDescription}</p>
-      </div>
-
-      <div className="flex-shrink-0">
         <Link
-          className="cta-neutral cta-base cta-base-p transition-standard me-8"
+          className="cta-neutral cta-base cta-base-p text-base tablet:text-sm tablet:self-center transition-standard -mt-1 mobileLandscape:mt-0"
           to={`${route}${location.search}`}
           data-glean-id={`account_banner_${metricsKey}_submit`}
         >

packages/fxa-settings/src/components/Settings/ConnectedServices/index.tsx

@@ -193,12 +193,11 @@ export const ConnectedServices = forwardRef<HTMLDivElement>((_, ref) => {
 
   return (
     <section
-      className="mt-11"
       data-testid="settings-connected-services"
       id="connected-services-section"
       {...{ ref }}
     >
-      <h2 className="font-header font-bold mobileLandscape:ltr:ml-6 mobileLandscape:rtl:ml-6 ltr:ml-4 rtl:mr-4 mb-4 relative">
+      <h2 className="font-header font-bold mobileLandscape:ms-6 ms-4 mb-4 relative">
         <span id="connected-services" className="nav-anchor"></span>
         <Localized id="cs-heading">Connected Services</Localized>
       </h2>

packages/fxa-settings/src/components/Settings/DataCollection/index.tsx

@@ -52,12 +52,11 @@ export const DataCollection = forwardRef<HTMLDivElement>((_, ref) => {
 
   return (
     <section
-      className="mt-11"
       data-testid="settings-data-collection"
       id="data-collection-section"
       {...{ ref }}
     >
-      <h2 className="font-header font-bold mobileLandscape:ltr:ml-6 mobileLandscape:rtl:ml-6 ltr:ml-4 rtl:mr-4 mb-4 relative">
+      <h2 className="font-header font-bold mobileLandscape:ms-6 ms-4 mb-4 relative">
         <span id="data-collection" className="nav-anchor" />
         {localizedHeader}
       </h2>

packages/fxa-settings/src/components/Settings/LinkedAccounts/index.tsx

@@ -15,12 +15,11 @@ export const LinkedAccounts = forwardRef<HTMLDivElement>((_, ref) => {
     <>
       {!!linkedAccounts.length && (
         <section
-          className="mt-11"
           data-testid="settings-linked-accounts"
           id="linked-accounts-section"
           {...{ ref }}
         >
-          <h2 className="font-header font-bold ltr:ml-4 rtl:mr-4 mb-4 relative">
+          <h2 className="font-header font-bold mobileLandscape:ms-6 ms-4 mb-4 relative">
             <span id="linked-accounts" className="nav-anchor"></span>
             <Localized id="la-heading">Linked Accounts</Localized>
           </h2>

packages/fxa-settings/src/components/Settings/PageSettings/index.stories.tsx

@@ -43,6 +43,15 @@ const partiallyFilledOutAccount = {
   linkedAccounts: MOCK_LINKED_ACCOUNTS,
 } as unknown as Account;
 
+const accountWithoutRecoveryKey = {
+  ...MOCK_ACCOUNT,
+  displayName: null,
+  recoveryKey: { exists: false },
+  totp: { exists: true, verified: false },
+  attachedClients: SERVICES_NON_MOBILE,
+  linkedAccounts: MOCK_LINKED_ACCOUNTS,
+} as unknown as Account;
+
 const completelyFilledOutAccount = {
   ...MOCK_ACCOUNT,
   subscriptions: [{ created: 1, productName: 'x' }],
@@ -84,3 +93,8 @@ export const CompletelyFilledOut = storyWithContext(
   completelyFilledOutAccount,
   'completely filled out'
 );
+
+export const PartiallyFilledOutWithKeyPromo = storyWithContext(
+  accountWithoutRecoveryKey,
+  'with recovery key promo'
+);

packages/fxa-settings/src/components/Settings/PageSettings/index.tsx

@@ -96,7 +96,7 @@ export const PageSettings = (_: RouteComponentProps) => {
           }}
         />
       </div>
-      <div className="flex-7 max-w-full">
+      <div className="flex flex-col flex-7 max-w-full gap-8 mt-10">
         <NotificationPromoBanner {...accountRecoveryNotificationProps} />
         <Profile ref={profileRef} />
         <Security ref={securityRef} />
@@ -107,7 +107,7 @@ export const PageSettings = (_: RouteComponentProps) => {
           <Localized id="delete-account-link">
             <Link
               data-testid="settings-delete-account"
-              className="cta-caution text-sm transition-standard mt-12 py-2 px-5 mobileLandscape:py-1"
+              className="cta-caution text-sm transition-standard mt-2 py-2 px-5 mobileLandscape:py-1"
               to={SETTINGS_PATH + '/delete_account'}
               onClick={() => GleanMetrics.deleteAccount.settingsSubmit()}
             >

packages/fxa-settings/src/components/Settings/ProductPromo/index.tsx

@@ -128,8 +128,7 @@ export const ProductPromo = ({
         'bg-white rounded-lg desktop:w-11/12 desktop:max-w-56 desktop:p-4 desktop:pb-6 text-grey-600 text-lg desktop:text-sm text-start',
         type === ProductPromoType.Sidebar &&
           'px-6 mt-4 desktop:mt-20 desktop:max-w-80 desktop:w-11/12',
-        type === ProductPromoType.Settings &&
-          'desktop:hidden mt-12 px-5 py-3 mb-16'
+        type === ProductPromoType.Settings && 'desktop:hidden px-5 py-3 mb-16'
       )}
     >
       <div

packages/fxa-settings/src/components/Settings/Profile/index.tsx

@@ -14,13 +14,8 @@ export const Profile = forwardRef<HTMLDivElement>((_, ref) => {
   const { avatar, primaryEmail, displayName } = useAccount();
 
   return (
-    <section
-      className="mt-11"
-      data-testid="settings-profile"
-      {...{ ref }}
-      id="profile-section"
-    >
-      <h2 className="font-header font-bold mobileLandscape:ltr:ml-6 mobileLandscape:rtl:ml-6 ltr:ml-4 rtl:mr-4 mb-4 relative">
+    <section data-testid="settings-profile" {...{ ref }} id="profile-section">
+      <h2 className="font-header font-bold mobileLandscape:ms-6 ms-4 mb-4 relative">
         <span id="profile" className="nav-anchor"></span>
         <FtlMsg id="profile-heading">Profile</FtlMsg>
       </h2>

packages/fxa-settings/src/components/Settings/Security/index.tsx

@@ -43,13 +43,8 @@ export const Security = forwardRef<HTMLDivElement>((_, ref) => {
   const localizedNotSet = l10n.getString('security-not-set', null, 'Not Set');
 
   return (
-    <section
-      className="mt-11"
-      data-testid="settings-security"
-      {...{ ref }}
-      id="security-section"
-    >
-      <h2 className="font-header font-bold mobileLandscape:ltr:ml-6 mobileLandscape:rtl:ml-6 ltr:ml-4 rtl:mr-4 mb-4 relative">
+    <section data-testid="settings-security" {...{ ref }} id="security-section">
+      <h2 className="font-header font-bold mobileLandscape:ms-6 ms-4 mb-4 relative">
         <span id="security" className="nav-anchor"></span>
         <Localized id="security-heading">Security</Localized>
       </h2>