fix(confirmations): use elevated surface on transaction confirmation BottomSheet

app/components/Views/confirmations/components/confirm/confirm-component.styles.test.ts

@@ -0,0 +1,42 @@
+import { brandColor, darkTheme } from '@metamask/design-tokens';
+import { AppThemeKey, Theme } from '../../../../../util/theme/models';
+
+const MOCK_ELEVATED_SURFACE_COLOR = 'mock-elevated-surface-color';
+
+jest.mock('../../../../../util/theme/themeUtils', () => ({
+  getElevatedSurfaceColor: jest.fn(() => MOCK_ELEVATED_SURFACE_COLOR),
+}));
+
+import styleSheet from './confirm-component.styles';
+
+const darkThemeModel: Theme = {
+  colors: darkTheme.colors,
+  themeAppearance: AppThemeKey.dark,
+  typography: darkTheme.typography,
+  shadows: darkTheme.shadows,
+  brandColors: brandColor,
+};
+
+describe('confirm-component.styles', () => {
+  it('uses elevated surface color for the full-screen flat container', () => {
+    const styles = styleSheet({
+      theme: darkThemeModel,
+      vars: { isFullScreenConfirmation: true },
+    });
+
+    expect(styles.flatContainer.backgroundColor).toBe(
+      MOCK_ELEVATED_SURFACE_COLOR,
+    );
+  });
+
+  it('uses elevated surface color for the default loader spinner container', () => {
+    const styles = styleSheet({
+      theme: darkThemeModel,
+      vars: { isFullScreenConfirmation: true },
+    });
+
+    expect(styles.spinnerContainer.backgroundColor).toBe(
+      MOCK_ELEVATED_SURFACE_COLOR,
+    );
+  });
+});

app/components/Views/confirmations/components/confirm/confirm-component.styles.ts

@@ -1,5 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { Theme } from '../../../../../util/theme/models';
+import { getElevatedSurfaceColor } from '../../../../../util/theme/themeUtils';
 
 const styleSheet = (params: {
   theme: Theme;
@@ -11,17 +12,15 @@
   const { theme, vars } = params;
 
   return StyleSheet.create({
-    bottomSheetDialogSheet: {
-      backgroundColor: theme.colors.background.default,
-    },
     confirmContainer: {
       display: 'flex',
       maxHeight: '100%',
     },
     flatContainer: {
       flex: 1,
       zIndex: 9999,
-      backgroundColor: theme.colors.background.default,
+      // TODO(Pure Black): Remove once MMDS ships pure-black-aware surface tokens.
+      backgroundColor: getElevatedSurfaceColor(theme),
       justifyContent: 'space-between',
     },
     scrollView: {
@@ -31,7 +30,8 @@
       flexGrow: vars.isFullScreenConfirmation ? 1 : undefined,
     },
     spinnerContainer: {
-      backgroundColor: theme.colors.background.default,
+      // TODO(Pure Black): Remove once MMDS ships pure-black-aware surface tokens.
+      backgroundColor: getElevatedSurfaceColor(theme),
       width: '100%',
       height: '100%',
       justifyContent: 'center',

app/components/Views/confirmations/components/confirm/confirm-component.tsx

@@ -186,7 +186,6 @@ export const Confirm = ({
     <BottomSheet
       onClose={() => onReject()}
       shouldNavigateBack={false}
-      style={styles.bottomSheetDialogSheet}
       testID={ConfirmationUIType.MODAL}
     >
       <View testID={approvalRequest?.type} style={styles.confirmContainer}>