style(settings): General style updates

Because:

* Switching design to text-start default instead of text-center
* Some images were cut off on mobile

This commit:

* Update style for AppLayout
* Update image styling
* Various tweaks to accomodate change to text-start
* Set size for Mozilla logo in Storybook sidebar
* Replace placeholder image used in storybooks
* Increase spacing below primary buttons

Closes #FXA-10613

Author: vpomerleau

packages/fxa-react/styles/flows.css

@@ -8,11 +8,11 @@
 
 /* Does not specify text-align */
 .card-base {
-  @apply relative w-full border border-transparent mobileLandscape:w-120 mobileLandscape:bg-white rounded-xl px-8 pb-12 pt-9 mobileLandscape:shadow-card-grey-drop mb-6;
+  @apply relative w-full border border-transparent mobileLandscape:w-120 mobileLandscape:bg-white rounded-xl px-8 py-9 mobileLandscape:shadow-card-grey-drop mb-6;
 }
 
 .card {
-  @apply card-base text-center;
+  @apply card-base;
 
   /* HACK until content-server no longer needs .card, otherwise component classes take precedence */
   &.card-xl {

packages/fxa-settings/.storybook/manager-head.html

@@ -1 +1,9 @@
 <link rel="shortcut icon" href="./favicon.ico" />
+<style>
+  /* Adjust the max size for the brand image */
+  .sidebar-container img {
+    max-width: 200px; /* Customize max width */
+    max-height: 50px; /* Customize max height */
+    object-fit: contain;
+  }
+</style>

packages/fxa-settings/.storybook/preview-head.html

@@ -0,0 +1 @@
+

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

@@ -15,14 +15,12 @@ type AppLayoutProps = {
   title?: string;
   children: React.ReactNode;
   widthClass?: string;
-  cardClass?: string;
 };
 
 export const AppLayout = ({
   title,
   children,
   widthClass,
-  cardClass = 'card',
 }: AppLayoutProps) => {
   const { l10n } = useLocalization();
 
@@ -53,7 +51,7 @@ export const AppLayout = ({
         </header>
         <main className="mobileLandscape:flex mobileLandscape:items-center mobileLandscape:flex-1">
           <section>
-            <div className={classNames(cardClass, widthClass)}>{children}</div>
+            <div className={classNames('card', widthClass)}>{children}</div>
           </section>
         </main>
       </div>

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

@@ -145,7 +145,7 @@ export const ButtonDownloadRecoveryKeyPDF = ({
     <>
       <FtlMsg id="recovery-key-download-button-v3">
         <button
-          className="cta-primary cta-xl w-full"
+          className="cta-primary cta-xl w-full mt-4"
           onClick={async () => {
             logViewEvent(`flow.${viewName}`, `recovery-key.download-option`);
             await downloadFile();

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

@@ -32,16 +32,14 @@ const ChooseWhatToSync = ({
   return (
     <>
       <FtlMsg id="choose-what-to-sync-prompt-2">
-        <h2 className="font-normal mb-4 text-base text-center">
-          Choose what to sync
-        </h2>
+        <h2 className="mb-2 font-bold">Choose what to sync</h2>
       </FtlMsg>
-      <ul className="flex flex-wrap text-start text-sm mb-4 ltr:mobileLandscape:ml-6 rtl:mobileLandscape:mr-6">
+      <ul className="flex flex-wrap text-sm mb-4">
         {offeredSyncEngineConfigs.map((engineConfig) => {
           return (
             <li
               key={engineConfig.id}
-              className="flex-50% rtl:mobileLandscape:pr-6 ltr:mobileLandscape:pl-6 rtl:pr-3 ltr:pl-3"
+              className="basis-1/2 mobileLandscape:ps-4 pe-2"
             >
               <FtlMsg id={engineConfig.ftlId} attrs={{ label: true }}>
                 <InputCheckboxBlue

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

@@ -69,11 +69,10 @@ export const DataBlock = ({
       <div
         className={classNames(
           'relative flex font-mono text-center text-sm font-bold text-black bg-gradient-to-tr from-blue-600/10 to-purple-500/10 border border-transparent',
-          valueIsArray ? 'max-w-sm py-4' : 'max-w-lg',
-          valueIsArray && !isInline && ' py-5',
+          valueIsArray ? 'max-w-sm' : 'max-w-lg',
           isInline
             ? 'flex-nowrap w-full rounded py-2 px-3'
-            : 'flex-wrap mb-8 rounded-lg px-6'
+            : 'flex-wrap mb-8 rounded-lg px-6 py-4'
         )}
         data-testid={dataTestId}
         {...{ onCopy }}

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

@@ -8,7 +8,7 @@ import { LocationProvider } from '@reach/router';
 import FormPassword from '.';
 import { Meta } from '@storybook/react';
 import { withLocalization } from 'fxa-react/lib/storybooks';
-import { MockSettingsAppLayout } from '../Settings/AppLayout/mocks';
+import { MockSettingsAppLayout } from '../Settings/SettingsLayout/mocks';
 
 export default {
   title: 'Components/FormPassword',

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

@@ -56,7 +56,7 @@ export const InlineRecoveryKeySetupCreate = ({
         </FtlMsg>
       </h1>
 
-      <RecoveryKeyImage className="my-6 mx-auto" />
+      <RecoveryKeyImage />
 
       <h2 className="font-bold text-xl mb-5">
         <FtlMsg id="inline-recovery-key-setup-create-subheader">

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

@@ -7,7 +7,7 @@ import InlineRecoveryKeySetupCreate from '.';
 import AppLayout from '../AppLayout';
 
 export const Subject = () => (
-  <AppLayout cardClass="card-base">
+  <AppLayout>
     <InlineRecoveryKeySetupCreate
       createRecoveryKeyHandler={() =>
         Promise.resolve({