diff --git a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap index f1a44240aee..763738dd4b5 100644 --- a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap @@ -80,7 +80,7 @@ exports[`CategoryModal should render with a subcategory 1`] = ` { - const { overlayColor = 'rgba(0, 0, 0, 0)' } = props +export const BlurBackground = () => { const theme = useTheme() const styles = getStyles(theme) - return + return } -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..b7d3939bb63 100644 --- a/src/components/ui4/ModalUi4.tsx +++ b/src/components/ui4/ModalUi4.tsx @@ -125,7 +125,7 @@ export function ModalUi4(props: ModalPropsUi4): JSX.Element { {/* Need another Biew here because BlurView doesn't accept rounded corners in its styling */} - + 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