CP-12309 - Account overview page

packages/core-mobile/app/new/common/components/BlurViewWithFallback.tsx

@@ -9,6 +9,7 @@ export const BlurViewWithFallback = ({
   children,
   intensity = 75,
   shouldDelayBlurOniOS = false,
+  backgroundColor,
   style
 }: {
   children?: React.ReactNode
@@ -23,6 +24,7 @@ export const BlurViewWithFallback = ({
    * reference: https://docs.expo.dev/versions/latest/sdk/blur-view/#known-issues
    */
   shouldDelayBlurOniOS?: boolean
+  backgroundColor?: string
   style?: ViewStyle
 }): JSX.Element | null => {
   const [ready, setReady] = useState(
@@ -43,19 +45,25 @@ export const BlurViewWithFallback = ({
   const iosContainerStyle = useMemo(
     () => [
       {
-        // alpha('#afafd0', 0.1) is a color value found through experimentation
-        // to make the blur effect appear the same as $surfacePrimary(neutral-850) in dark mode.
-        backgroundColor:
-          colorScheme === 'dark' ? alpha('#afafd0', 0.1) : undefined
+        backgroundColor: backgroundColor
+          ? alpha(backgroundColor, 0.1)
+          : // alpha('#afafd0', 0.1) is a color value found through experimentation
+          // to make the blur effect appear the same as $surfacePrimary(neutral-850) in dark mode.
+          colorScheme === 'dark'
+          ? alpha('#afafd0', 0.1)
+          : undefined
       },
       style
     ],
-    [colorScheme, style]
+    [backgroundColor, colorScheme, style]
   )
 
   const androidContainerStyle = useMemo(
-    () => [{ backgroundColor: theme.colors.$surfacePrimary }, style],
-    [style, theme.colors.$surfacePrimary]
+    () => [
+      { backgroundColor: backgroundColor ?? theme.colors.$surfacePrimary },
+      style
+    ],
+    [backgroundColor, style, theme.colors.$surfacePrimary]
   )
 
   if (!ready || Platform.OS === 'android') {

packages/core-mobile/app/new/common/components/BlurredBackgroundView.tsx

@@ -12,14 +12,16 @@ import Grabber from './Grabber'
 const BlurredBackgroundView = ({
   hasGrabber = false,
   separator,
-  shouldDelayBlurOniOS = false
+  shouldDelayBlurOniOS = false,
+  backgroundColor
 }: {
   hasGrabber?: boolean
   separator?: {
     opacity: SharedValue<number>
     position: 'top' | 'bottom'
   }
   shouldDelayBlurOniOS?: boolean
+  backgroundColor?: string
 }): JSX.Element => {
   const animatedBorderStyle = useAnimatedStyle(() => ({
     opacity: separator?.opacity.value
@@ -42,6 +44,7 @@ const BlurredBackgroundView = ({
       )}
       {hasGrabber === false && (
         <BlurViewWithFallback
+          backgroundColor={backgroundColor}
           shouldDelayBlurOniOS={shouldDelayBlurOniOS}
           style={{
             flex: 1