feat(settings): add card border to split layout and center loading spinner

packages/fxa-react/styles/flows.css

@@ -6,8 +6,12 @@
  * applied after content-server no longer needs it */
 /* Transparent border around card is for Windows HCM mode */
 
+.card-base {
+  @apply w-full border border-transparent mobileLandscape:bg-white rounded-xl px-6 py-8 mobileLandscape:px-8 mobileLandscape:py-9 mobileLandscape:shadow-card-grey-drop mobileLandscape:mb-6;
+}
+
 .card {
-  @apply w-full border border-transparent mobileLandscape:w-120 mobileLandscape:bg-white rounded-xl px-6 py-8 mobileLandscape:px-8 mobileLandscape:py-9 mobileLandscape:shadow-card-grey-drop mobileLandscape:mb-6;
+  @apply card-base mobileLandscape:w-120;
 
   /* HACK until content-server no longer needs .card, otherwise component classes take precedence */
   &.card-xl {
@@ -26,3 +30,9 @@
     @apply font-body font-normal text-sm block mt-1;
   }
 }
+
+/* HACK to shrink card in split layout so that the image on the left fits in the
+ * screen. Potentially useful in other cases */
+.card-shrink {
+  @apply card-base mobileLandscape:max-w-120;
+}

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

@@ -15,6 +15,7 @@ import {
   MOCK_CMS_INFO_HEADER_LOGO_NO_ALT,
   MOCK_CMS_INFO_DEFAULT_LOGO,
   MOCK_CMS_INFO_HEADER_LOGO_WITH_OTHER_PROPS,
+  MOCK_CMS_INFO_SPLIT_LAYOUT_BG,
 } from './mocks';
 import { MOCK_CMS_INFO } from '../../pages/mocks';
 import { useDynamicLocalization } from '../../contexts/DynamicLocalizationContext';
@@ -401,14 +402,19 @@ describe('<AppLayout />', () => {
         isLoading: false,
       });
 
-      const { container } = renderWithLocalizationProvider(
-        <AppLayout splitLayout={true}>
+      renderWithLocalizationProvider(
+        <AppLayout splitLayout={true} cmsInfo={MOCK_CMS_INFO_SPLIT_LAYOUT_BG}>
           <p>Split layout content</p>
         </AppLayout>
       );
 
-      // Split layout does not render the card wrapper
-      expect(container.querySelector('.card')).not.toBeInTheDocument();
+      expect(
+        screen.getByRole('img', {
+          name: MOCK_CMS_INFO_SPLIT_LAYOUT_BG.shared.backgrounds
+            ?.splitLayoutAltText as string,
+        })
+      ).toBeInTheDocument();
+
       screen.getByText('Split layout content');
     });
 
@@ -420,14 +426,19 @@ describe('<AppLayout />', () => {
         isLoading: false,
       });
 
-      const { container } = renderWithLocalizationProvider(
+      renderWithLocalizationProvider(
         <AppLayout splitLayout={true} cmsInfo={MOCK_CMS_INFO_HEADER_LOGO}>
           <p>Default layout content</p>
         </AppLayout>
       );
 
-      // Default layout renders with card wrapper
-      expect(container.querySelector('.card')).toBeInTheDocument();
+      expect(
+        screen.queryByRole('img', {
+          name: MOCK_CMS_INFO_SPLIT_LAYOUT_BG.shared.backgrounds
+            ?.splitLayoutAltText as string,
+        })
+      ).not.toBeInTheDocument();
+
       screen.getByText('Default layout content');
       // CMS info is still applied even when split layout is disabled
       expect(screen.getByAltText('CMS Custom Logo')).toBeInTheDocument();

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

@@ -12,7 +12,6 @@ import { RelierCmsInfo } from '../../models/integrations';
 import { LocaleToggle } from '../LocaleToggle';
 import { useConfig } from '../../models/hooks';
 import { CardLoadingSpinner } from '../CardLoadingSpinner';
-import LoadingSpinner from 'fxa-react/components/LoadingSpinner';
 import { useDynamicLocalization } from '../../contexts/DynamicLocalizationContext';
 
 type AppLayoutProps = {
@@ -193,13 +192,13 @@ export const AppLayout = ({
             />
             <div className="mobileLandscape:items-center tablet:flex-1 tablet:bg-white tablet:ml-auto flex flex-col flex-1">
               <main className="flex justify-center items-center flex-1">
-                <section className="max-w-120 desktop:w-120 px-8 py-8">
-                  {loading ? (
-                    <LoadingSpinner className="h-full flex items-center" />
-                  ) : (
-                    children
-                  )}
-                </section>
+                {loading ? (
+                  <CardLoadingSpinner className="tablet:mx-4" />
+                ) : (
+                  <section className="card-shrink tablet:mx-4">
+                    {children}
+                  </section>
+                )}
               </main>
               {showLocaleToggle && (
                 <footer className="w-full py-2 px-6 tablet:px-10 flex text-grey-400">

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

@@ -120,6 +120,22 @@ export const MOCK_CMS_INFO_DEFAULT_LOGO = {
   },
 } as RelierCmsInfo;
 
+export const MOCK_CMS_INFO_SPLIT_LAYOUT_BG = {
+  name: 'Test App',
+  clientId: 'test123',
+  entrypoint: 'test',
+  shared: {
+    buttonColor: '#0078d4',
+    logoUrl: 'https://example.com/logo.png',
+    logoAltText: 'Test App Logo',
+    backgrounds: {
+      splitLayout: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      splitLayoutAltText: 'A purple gradient background',
+    },
+    pageTitle: 'Test App - Custom Title',
+  },
+} as RelierCmsInfo;
+
 export const MOCK_CMS_INFO_HEADER_LOGO_WITH_OTHER_PROPS = {
   name: 'Test App',
   clientId: 'test123',