Mobile: Improve dialog styling on large and notched screens (#10470)

packages/app-mobile/components/DismissibleDialog.tsx

@@ -40,6 +40,7 @@ const useStyles = (themeId: number, containerStyle: ViewStyle) => {
 
 				height: windowSize.height * 0.9,
 				width: windowSize.width * 0.97,
+				flexShrink: 1,
 
 				// Center
 				marginLeft: 'auto',
@@ -47,6 +48,13 @@ const useStyles = (themeId: number, containerStyle: ViewStyle) => {
 
 				...containerStyle,
 			},
+			dialogContainer: {
+				display: 'flex',
+				flexDirection: 'row',
+				justifyContent: 'center',
+				alignItems: 'center',
+				flexGrow: 1,
+			},
 		});
 	}, [themeId, windowSize.width, windowSize.height, containerStyle]);
 };
@@ -69,7 +77,9 @@ const DismissibleDialog: React.FC<Props> = props => {
 			visible={props.visible}
 			onDismiss={props.onDismiss}
 			onRequestClose={props.onDismiss}
+			containerStyle={styles.dialogContainer}
 			animationType='fade'
+			backgroundColor='rgba(0, 0, 0, 0.1)'
 			transparent={true}
 		>
 			<Surface style={styles.dialog} elevation={1}>

packages/app-mobile/components/Modal.tsx

@@ -1,36 +1,58 @@
 import * as React from 'react';
-import { Modal, ModalProps, StyleSheet, View, ViewStyle } from 'react-native';
+import { useMemo } from 'react';
+import { Modal, ModalProps, StyleSheet, View, ViewStyle, useWindowDimensions } from 'react-native';
 import { hasNotch } from 'react-native-device-info';
 
 interface ModalElementProps extends ModalProps {
 	children: React.ReactNode;
 	containerStyle?: ViewStyle;
-	elevation?: number;
+	backgroundColor?: string;
 }
 
+const useStyles = (backgroundColor?: string) => {
+	const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+	const isLandscape = windowWidth > windowHeight;
+	return useMemo(() => {
+		return StyleSheet.create({
+			contentWrapper: isLandscape ? {
+				marginRight: hasNotch() ? 60 : 0,
+				marginLeft: hasNotch() ? 60 : 0,
+				marginTop: 15,
+				marginBottom: 15,
+			} : {
+				marginTop: hasNotch() ? 65 : 15,
+				marginBottom: hasNotch() ? 35 : 15,
+			},
+			modalBackground: { backgroundColor, flexGrow: 1 },
+		});
+	}, [isLandscape, backgroundColor]);
+};
+
 const ModalElement: React.FC<ModalElementProps> = ({
 	children,
 	containerStyle,
+	backgroundColor,
 	...modalProps
 }) => {
+	const styles = useStyles(backgroundColor);
+
+	// contentWrapper adds padding. To allow styling the region outside of the modal
+	// (e.g. to add a background), the content is wrapped twice.
+	const content = (
+		<View style={[styles.contentWrapper, containerStyle]}>
+			{children}
+		</View>
+	);
+
 	// supportedOrientations: On iOS, this allows the dialog to be shown in non-portrait orientations.
 	return (
 		<Modal
 			supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
 			{...modalProps}
 		>
-			<View style={[styleSheet.modalContainer, containerStyle ? containerStyle : null]}>
+			<View style={styles.modalBackground}>{content}</View>
-				{children}
-			</View>
 		</Modal>
 	);
 };
 
-const styleSheet = StyleSheet.create({
-	modalContainer: {
-		marginTop: hasNotch() ? 65 : 15,
-		marginBottom: hasNotch() ? 35 : 15,
-	},
-});
-
 export default ModalElement;