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-content-server/app/scripts/templates/connect_another_device.mustache

@@ -1,4 +1,4 @@
-<div class="card-base">
+<div class="card">
   {{#isFirefoxDesktop}}
     <h1 class="text-base text-grey-400" id="fxa-connect-another-device-header">{{#t}}Connect another device{{/t}}</h1>
   {{/isFirefoxDesktop}}

packages/fxa-content-server/app/scripts/templates/pair/failure.mustache

@@ -1,4 +1,4 @@
-<div class="card-base">
+<div class="card">
   <section>
     <div class="error"></div>
     <div class="success"></div>

packages/fxa-content-server/app/scripts/templates/pair/index.mustache

@@ -1,5 +1,5 @@
 
-<div class="card-base">
+<div class="card">
   <header class="relative">
     {{#showSuccessMessage}}
       <div id="fxa-connected-heading"

packages/fxa-content-server/app/scripts/templates/pair/unsupported.mustache

@@ -1,4 +1,4 @@
-<div class="card-base">
+<div class="card">
   {{#showCADHeader}}
     <header>
       <h1 class="mb-5 text-grey-400 text-base">{{#t}}Connect another device{{/t}}</h1>

packages/fxa-react/styles/flows.css

@@ -6,13 +6,8 @@
  * applied after content-server no longer needs it */
 /* Transparent border around card is for Windows HCM mode */
 
-/* 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;
-}
-
 .card {
-  @apply card-base text-center;
+  @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;
 
   /* 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