From 085a81e0a6c5c8e6926419de6fdc439ffcd25a35 Mon Sep 17 00:00:00 2001
From: Samuel Holmes <sam@edge.app>
Date: Wed, 17 Jan 2024 20:20:01 -0800
Subject: [PATCH] Make BlurBackground's background tint consistent across
 platforms

We remove the overlayColor property from BlurBackground which is
Android-only. Instead, we add a backgroundColor to the blur view to
match the light/dark modes in iOS.
---
 .../__snapshots__/MenuTabs.test.tsx.snap      | 43 ++++++---
 .../__snapshots__/CategoryModal.test.tsx.snap | 88 +++++++++++++------
 .../__snapshots__/HelpModal.test.tsx.snap     | 44 +++++++---
 src/components/ui4/BlurBackground.tsx         | 25 +++---
 src/components/ui4/ModalUi4.tsx               |  5 +-
 src/theme/variables/edgeDark.ts               |  1 -
 src/theme/variables/edgeLight.ts              |  1 -
 src/theme/variables/testDark.ts               |  1 -
 src/theme/variables/testLight.ts              |  1 -
 src/types/Theme.ts                            |  1 -
 10 files changed, 136 insertions(+), 74 deletions(-)

diff --git a/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap b/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap
index dd4b67f808a..9d0f5a89b2a 100644
--- a/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap
+++ b/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap
@@ -13,21 +13,38 @@ exports[`MenuTabs should render with loading props 1`] = `
     }
   }
 >
-  <BlurView
-    blurAmount={10}
-    blurType="dark"
-    overlayColor="rgba(0, 0, 0, 0)"
+  <View
     style={
-      {
-        "backgroundColor": undefined,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "overflow": "hidden",
+        },
+      ]
     }
-  />
+  >
+    <BlurView
+      blurAmount={10}
+      blurType="dark"
+      overlayColor="rgba(0, 0, 0, 0)"
+      style={
+        {
+          "backgroundColor": undefined,
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+  </View>
   <BVLinearGradient
     colors={
       [
diff --git a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap
index 658d0a8b37d..f451172931b 100644
--- a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap
+++ b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap
@@ -71,27 +71,43 @@ exports[`CategoryModal should render with a subcategory 1`] = `
           "borderTopLeftRadius": 22,
           "borderTopRightRadius": 22,
           "height": "100%",
-          "overflow": "hidden",
           "position": "absolute",
           "width": "100%",
         }
       }
     >
-      <BlurView
-        blurAmount={10}
-        blurType="dark"
-        overlayColor="rgba(0, 0, 0, .7)"
+      <View
         style={
-          {
-            "backgroundColor": undefined,
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "overflow": "hidden",
+            },
+          ]
         }
-      />
+      >
+        <BlurView
+          blurAmount={10}
+          blurType="dark"
+          overlayColor="rgba(0, 0, 0, 0)"
+          style={
+            {
+              "backgroundColor": undefined,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        />
+      </View>
     </View>
     <View
       style={
@@ -1503,27 +1519,43 @@ exports[`CategoryModal should render with an empty subcategory 1`] = `
           "borderTopLeftRadius": 22,
           "borderTopRightRadius": 22,
           "height": "100%",
-          "overflow": "hidden",
           "position": "absolute",
           "width": "100%",
         }
       }
     >
-      <BlurView
-        blurAmount={10}
-        blurType="dark"
-        overlayColor="rgba(0, 0, 0, .7)"
+      <View
         style={
-          {
-            "backgroundColor": undefined,
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "overflow": "hidden",
+            },
+          ]
         }
-      />
+      >
+        <BlurView
+          blurAmount={10}
+          blurType="dark"
+          overlayColor="rgba(0, 0, 0, 0)"
+          style={
+            {
+              "backgroundColor": undefined,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        />
+      </View>
     </View>
     <View
       style={
diff --git a/src/__tests__/modals/__snapshots__/HelpModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/HelpModal.test.tsx.snap
index 86ba3c78108..1826b652744 100644
--- a/src/__tests__/modals/__snapshots__/HelpModal.test.tsx.snap
+++ b/src/__tests__/modals/__snapshots__/HelpModal.test.tsx.snap
@@ -71,27 +71,43 @@ exports[`HelpModal should render with loading props 1`] = `
           "borderTopLeftRadius": 22,
           "borderTopRightRadius": 22,
           "height": "100%",
-          "overflow": "hidden",
           "position": "absolute",
           "width": "100%",
         }
       }
     >
-      <BlurView
-        blurAmount={10}
-        blurType="dark"
-        overlayColor="rgba(0, 0, 0, .7)"
+      <View
         style={
-          {
-            "backgroundColor": undefined,
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "overflow": "hidden",
+            },
+          ]
         }
-      />
+      >
+        <BlurView
+          blurAmount={10}
+          blurType="dark"
+          overlayColor="rgba(0, 0, 0, 0)"
+          style={
+            {
+              "backgroundColor": undefined,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        />
+      </View>
     </View>
     <View
       style={
diff --git a/src/components/ui4/BlurBackground.tsx b/src/components/ui4/BlurBackground.tsx
index 664ca58c7c0..d9083ea3bb6 100644
--- a/src/components/ui4/BlurBackground.tsx
+++ b/src/components/ui4/BlurBackground.tsx
@@ -1,26 +1,29 @@
 import React from 'react'
-import { Platform, StyleSheet } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 import { BlurView } from 'rn-id-blurview'
 
-import { cacheStyles, useTheme } from '../services/ThemeContext'
+import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
 
 const isAndroid = Platform.OS === 'android'
 
-export interface BlurBackgroundProps {
-  overlayColor?: string
-}
-
-export const BlurBackground = (props: BlurBackgroundProps) => {
-  const { overlayColor = 'rgba(0, 0, 0, 0)' } = props
+export const BlurBackground = () => {
   const theme = useTheme()
   const styles = getStyles(theme)
 
-  return <BlurView blurType={theme.isDark ? 'dark' : 'light'} style={styles.blurView} overlayColor={overlayColor} />
+  return (
+    <View style={[StyleSheet.absoluteFill, { overflow: 'hidden' }]}>
+      <BlurView blurType={theme.isDark ? 'dark' : 'light'} style={styles.blurView} overlayColor="rgba(0, 0, 0, 0)" />
+    </View>
+  )
 }
 
-const getStyles = cacheStyles(() => ({
+const getStyles = cacheStyles((theme: Theme) => ({
   blurView: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: isAndroid ? '#00000055' : undefined
+    // We need this backgroundColor because Android applies an overlay to the
+    // entire screen for the BlurView by default. We change this default
+    // behavior with the transparent overlayColor, so we add this background
+    // color to compensate.
+    backgroundColor: isAndroid ? (theme.isDark ? '#161616aa' : '#ffffff55') : undefined
   }
 }))
diff --git a/src/components/ui4/ModalUi4.tsx b/src/components/ui4/ModalUi4.tsx
index 2d8c54fc385..be256bfaa10 100644
--- a/src/components/ui4/ModalUi4.tsx
+++ b/src/components/ui4/ModalUi4.tsx
@@ -125,7 +125,7 @@ export function ModalUi4<T>(props: ModalPropsUi4<T>): JSX.Element {
         <Animated.View style={[styles.body, bodyStyle, bodyLayout]}>
           {/* Need another Biew here because BlurView doesn't accept rounded corners in its styling */}
           <View style={styles.blurContainer}>
-            <BlurBackground overlayColor={theme.modalAndroidBlurColor} />
+            <BlurBackground />
           </View>
 
           <View style={styles.dragBarContainer}>
@@ -173,8 +173,7 @@ const getStyles = cacheStyles((theme: Theme) => ({
     width: '100%',
     height: '100%',
     borderTopLeftRadius: theme.rem(1),
-    borderTopRightRadius: theme.rem(1),
-    overflow: 'hidden'
+    borderTopRightRadius: theme.rem(1)
   },
   dragBarContainer: {
     alignItems: 'center',
diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts
index 12e6063620e..414eef9e9aa 100644
--- a/src/theme/variables/edgeDark.ts
+++ b/src/theme/variables/edgeDark.ts
@@ -176,7 +176,6 @@ export const edgeDark: Theme = {
   modalBorderColor: palette.transparent,
   modalBorderWidth: 0,
   modalBorderRadiusRem: 1,
-  modalAndroidBlurColor: palette.blackOp70,
   modalBackgroundUi4: palette.whiteOp37,
   modalSceneOverlayColor: palette.black,
   modalDragbarColor: palette.gray,
diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts
index bbbd7862efa..814566bee39 100644
--- a/src/theme/variables/edgeLight.ts
+++ b/src/theme/variables/edgeLight.ts
@@ -152,7 +152,6 @@ export const edgeLight: Theme = {
   modalBorderColor: palette.transparent,
   modalBorderWidth: 0,
   modalBorderRadiusRem: 1,
-  modalAndroidBlurColor: palette.whiteOp75,
   modalBackgroundUi4: palette.blackOp25,
   modalSceneOverlayColor: palette.black,
   modalDragbarColor: palette.gray,
diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts
index de80010484a..346568673a7 100644
--- a/src/theme/variables/testDark.ts
+++ b/src/theme/variables/testDark.ts
@@ -177,7 +177,6 @@ export const testDark: Theme = {
   modalBorderColor: palette.transparent,
   modalBorderWidth: 0,
   modalBorderRadiusRem: 1,
-  modalAndroidBlurColor: palette.blackOp25,
   modalBackgroundUi4: palette.whiteOp10,
   modalSceneOverlayColor: palette.black,
   modalDragbarColor: palette.gray,
diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts
index f52d3934cb6..9c0f90e39d6 100644
--- a/src/theme/variables/testLight.ts
+++ b/src/theme/variables/testLight.ts
@@ -152,7 +152,6 @@ export const testLight: Theme = {
   modalBorderColor: palette.transparent,
   modalBorderWidth: 0,
   modalBorderRadiusRem: 1,
-  modalAndroidBlurColor: palette.whiteOp75,
   modalBackgroundUi4: palette.blackOp25,
   modalSceneOverlayColor: palette.black,
   modalDragbarColor: palette.gray,
diff --git a/src/types/Theme.ts b/src/types/Theme.ts
index 9490e600ad0..0107b331ca3 100644
--- a/src/types/Theme.ts
+++ b/src/types/Theme.ts
@@ -122,7 +122,6 @@ export interface Theme {
   modalBorderWidth: number
   modalBorderRadiusRem: number
   modalBackgroundUi4: string
-  modalAndroidBlurColor: string
   modalSceneOverlayColor: string
   modalDragbarColor: string