mozilla · dschom · Sep 2, 2026
@@ -74,6 +74,26 @@ describe('<AppLayout />', () => {
     screen.getByText('Hello, world!');
   });
 
+  it('renders the page background white with the whiteBackground prop', async () => {
+    renderWithLocalizationProvider(
+      <AppLayout whiteBackground>
+        <p>Hello, world!</p>
+      </AppLayout>
+    );
+
+    expect(screen.getByTestId('app')).toHaveClass('bg-white');
+  });
+
+  it('leaves the page background at the default without the whiteBackground prop', async () => {
+    renderWithLocalizationProvider(
+      <AppLayout>
+        <p>Hello, world!</p>
+      </AppLayout>
+    );
+
+    expect(screen.getByTestId('app')).not.toHaveClass('bg-white');
+  });
+
   it('renders with integration prop and valid background image', async () => {
     renderWithLocalizationProvider(
       <AppLayout cmsInfo={MOCK_CMS_INFO_VALID_LINEAR_BG}>

@@ -30,6 +30,11 @@ type AppLayoutProps = {
    */
   wrapInCard?: boolean;
   splitLayout?: boolean;
+  /** Whether the page behind the card is white rather than the default grey.
+   * The mobile pairing screens need this: below `mobileLandscape` the card is
+   * transparent, so the page colour is the screen colour.
+   */
+  whiteBackground?: boolean;
   /** Whether to show the locale toggle in the footer */
   showLocaleToggle?: boolean;
   /** Whether to show a loading spinner instead of children.
@@ -48,6 +53,7 @@ export const AppLayout = ({
   widthClass,
   cmsInfo,
   splitLayout = false,
+  whiteBackground = false,
   wrapInCard = true,
   loading = false,
   setCurrentSplitLayout,
@@ -83,6 +89,7 @@ export const AppLayout = ({
       <div
         className={classNames(
           'flex min-h-screen flex-col items-center dark:bg-grey-900',
+          whiteBackground && 'bg-white',
           cmsBackgrounds?.defaultLayout &&
             'mobileLandscape:[background:var(--cms-bg)]',
           splitLayout && 'mobileLandscape:relative'

@@ -86,4 +86,13 @@ describe('Pair2/Supplicant/ApproveSignIn page', () => {
 
     expect(onCancel).toHaveBeenCalledTimes(1);
   });
+
+  it('renders the card on a white page background', () => {
+    renderWithLocalizationProvider(<Subject />);
+
+    // Below `mobileLandscape` the card is transparent, so the page colour is
+    // the colour the phone shows. The designs call for white, not the default
+    // grey the desktop cards sit on.
+    expect(screen.getByTestId('app')).toHaveClass('bg-white');
+  });
 });
@@ -41,7 +41,7 @@ export const ApproveSignIn = ({ remoteMetadata, onCancel }: ApproveSignInProps)
       region: 'region-foo',
       city: 'city-foo',
   };
-  return <AppLayout>
+  return <AppLayout whiteBackground>
     <div className="flex flex-col items-center text-center">
       <FirefoxWordmarkImage className="h-8 w-24 text-black dark:text-white" />
 

@@ -97,4 +97,13 @@ describe('Pair2/Supplicant/ConnectThisDevice page', () => {
 
     expect(onCancel).toHaveBeenCalledTimes(1);
   });
+
+  it('renders the card on a white page background', () => {
+    renderWithLocalizationProvider(<Subject />);
+
+    // Below `mobileLandscape` the card is transparent, so the page colour is
+    // the colour the phone shows. The designs call for white, not the default
+    // grey the desktop cards sit on.
+    expect(screen.getByTestId('app')).toHaveClass('bg-white');
+  });
 });
@@ -49,7 +49,7 @@ export const ConnectThisDevice = ({
   const awaitingRemoteMetadata = remoteMetadata == null;
   email = email ?? 'foo@mozilla.com';
 
-  return <AppLayout>
+  return <AppLayout whiteBackground>
     <div className="flex flex-col items-center text-center">
       <FirefoxWordmarkImage className="h-8 w-24 text-black dark:text-white" />
 

@@ -100,4 +100,13 @@ describe('Pair2/Supplicant/DownloadFirefox page', () => {
       LINK.FX_SYNC
     );
   });
+
+  it('renders the card on a white page background', () => {
+    renderWithLocalizationProvider(<DownloadFirefox />);
+
+    // Below `mobileLandscape` the card is transparent, so the page colour is
+    // the colour the phone shows. The designs call for white, not the default
+    // grey the desktop cards sit on.
+    expect(screen.getByTestId('app')).toHaveClass('bg-white');
+  });
 });
@@ -35,7 +35,7 @@ const learnMoreLink = (
  * mozilla.org already routes mobile visitors to the right store.
  */
 const DownloadFirefox = () => (
-  <AppLayout>
+  <AppLayout whiteBackground>
     <div className="flex flex-col items-center text-center">
       <FirefoxWordmarkImage className="h-8 w-24 text-black dark:text-white" />
 

@@ -89,4 +89,13 @@ describe('Pair2/Supplicant/ReadyToScan page', () => {
       'Firefox logo'
     ]);
   });
+
+  it('renders the card on a white page background', () => {
+    renderWithLocalizationProvider(<ReadyToScan />);
+
+    // Below `mobileLandscape` the card is transparent, so the page colour is
+    // the colour the phone shows. The designs call for white, not the default
+    // grey the desktop cards sit on.
+    expect(screen.getByTestId('app')).toHaveClass('bg-white');
+  });
 });
@@ -22,7 +22,7 @@ import { SYNC_SUPPORT_URL } from '../../../../constants';
  * metrics that sibling pairing pages emit land with the flow wiring.
  */
 const ReadyToScan = () => (
-  <AppLayout>
+  <AppLayout whiteBackground>
     <div className="flex flex-col items-center text-center">
       <FirefoxWordmarkImage className="h-8 w-24 text-black dark:text-white" />
 

@@ -70,4 +70,13 @@ describe('Pair2/Supplicant/SyncSuccess page', () => {
 
     expect(onSyncSettings).toHaveBeenCalledTimes(1);
   });
+
+  it('renders the card on a white page background', () => {
+    renderWithLocalizationProvider(<Subject />);
+
+    // Below `mobileLandscape` the card is transparent, so the page colour is
+    // the colour the phone shows. The designs call for white, not the default
+    // grey the desktop cards sit on.
+    expect(screen.getByTestId('app')).toHaveClass('bg-white');
+  });
 });
@@ -30,7 +30,7 @@ const SyncSuccess = ({
   onViewSyncedTabs,
   onSyncSettings,
 }: SyncSuccessProps) => {
-  return <AppLayout>
+  return <AppLayout whiteBackground>
     <div className="flex flex-col items-center text-center">
       <FirefoxWordmarkImage className="h-8 w-24 text-black dark:text-white" />
 

@@ -132,4 +132,13 @@ describe('Pair2/Supplicant/TimeoutAndCancel page', () => {
       timedOutHeading
     );
   });
+
+  it('renders the card on a white page background', () => {
+    renderWithLocalizationProvider(<Subject />);
+
+    // Below `mobileLandscape` the card is transparent, so the page colour is
+    // the colour the phone shows. The designs call for white, not the default
+    // grey the desktop cards sit on.
+    expect(screen.getByTestId('app')).toHaveClass('bg-white');
+  });
 });
@@ -78,7 +78,7 @@ const TimeoutAndCancel = ({ reason }: TimeoutAndCancelProps) => {
   const { headingFtlId, heading, descriptionFtlId, description } = COPY[reason];
 
   return (
-    <AppLayout>
+    <AppLayout whiteBackground>
       <div className="flex flex-col items-center text-center">
         <FirefoxWordmarkImage className="h-8 w-24 text-black dark:text-white" />