fix(ui): update bottom-sheets

synonymdev · May 28, 2024 · fd399a8 · fd399a8
1 parent ef7996d
commit fd399a8
Show file tree

Hide file tree

Showing 16 changed files with 327 additions and 425 deletions.
diff --git a/src/assets/illustrations/group.png b/src/assets/illustrations/group.png
diff --git a/src/assets/illustrations/wand.png b/src/assets/illustrations/wand.png
diff --git a/src/components/BottomSheetScreen.tsx b/src/components/BottomSheetScreen.tsx
@@ -0,0 +1,120 @@
+import React, { memo, ReactElement, useState } from 'react';
+import {
+	Image,
+	ImageSourcePropType,
+	LayoutChangeEvent,
+	StyleSheet,
+	View,
+} from 'react-native';
+
+import { BodyM, Display } from '../styles/text';
+import BottomSheetNavigationHeader from '../components/BottomSheetNavigationHeader';
+import SafeAreaInset from '../components/SafeAreaInset';
+import Button from '../components/Button';
+
+const BottomSheetScreen = ({
+	navTitle,
+	title,
+	description,
+	image,
+	continueText,
+	cancelText,
+	displayBackButton = true,
+	isLoading,
+	testID,
+	onCancel,
+	onContinue,
+}: {
+	navTitle: string;
+	title: string | ReactElement;
+	description: string | ReactElement;
+	image: ImageSourcePropType;
+	continueText: string;
+	cancelText?: string;
+	displayBackButton?: boolean;
+	isLoading?: boolean;
+	testID?: string;
+	onCancel?: () => void;
+	onContinue: () => void;
+}): ReactElement => {
+	const [isLarge, setIsLarge] = useState(false);
+
+	const onLayout = (event: LayoutChangeEvent): void => {
+		// add margin to the image container if the sheet is large
+		if (event.nativeEvent.layout.height > 700) {
+			setIsLarge(true);
+		}
+	};
+
+	return (
+		<View style={styles.root} testID={testID} onLayout={onLayout}>
+			<BottomSheetNavigationHeader
+				title={navTitle}
+				displayBackButton={displayBackButton}
+			/>
+			<View style={styles.content}>
+				<View
+					// eslint-disable-next-line react-native/no-inline-styles
+					style={[styles.imageContainer, { marginBottom: isLarge ? 32 : 0 }]}>
+					<Image style={styles.image} source={image} />
+				</View>
+				<Display>{title}</Display>
+				<BodyM color="secondary">{description}</BodyM>
+				<View style={styles.buttonContainer}>
+					{cancelText && (
+						<Button
+							style={styles.button}
+							variant="secondary"
+							size="large"
+							text={cancelText}
+							testID={`${testID}-button-cancel`}
+							onPress={onCancel}
+						/>
+					)}
+					<Button
+						style={styles.button}
+						size="large"
+						text={continueText}
+						loading={isLoading}
+						testID={`${testID}-button-continue`}
+						onPress={onContinue}
+					/>
+				</View>
+			</View>
+			<SafeAreaInset type="bottom" minPadding={16} />
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	root: {
+		flex: 1,
+	},
+	content: {
+		flex: 1,
+		paddingHorizontal: 32,
+	},
+	imageContainer: {
+		flexShrink: 1,
+		alignItems: 'center',
+		alignSelf: 'center',
+		width: '80%',
+		aspectRatio: 1,
+		marginTop: 'auto',
+	},
+	image: {
+		flex: 1,
+		resizeMode: 'contain',
+	},
+	buttonContainer: {
+		flexDirection: 'row',
+		justifyContent: 'center',
+		marginTop: 32,
+		gap: 16,
+	},
+	button: {
+		flex: 1,
+	},
+});
+
+export default memo(BottomSheetScreen);
diff --git a/src/components/OnboardingScreen.tsx b/src/components/OnboardingScreen.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import { View, Image, ImageSourcePropType, StyleSheet } from 'react-native';
 
-import { Display, BodyM } from '../styles/text';
+import { Display, BodyM, Title } from '../styles/text';
 import { View as ThemedView } from '../styles/components';
 import SafeAreaInset from './SafeAreaInset';
 import Button from './Button';
@@ -15,6 +15,7 @@ const OnboardingScreen = ({
 	imagePosition,
 	buttonText,
 	displayBackButton = true,
+	disableNav = false,
 	testID,
 	onClosePress,
 	onButtonPress,
@@ -26,18 +27,24 @@ const OnboardingScreen = ({
 	imagePosition?: 'center' | 'bottom';
 	buttonText: string;
 	displayBackButton?: boolean;
+	disableNav?: boolean;
 	testID?: string;
 	onClosePress?: () => void;
 	onButtonPress: () => void;
 }): ReactElement => {
 	return (
 		<ThemedView style={styles.root}>
 			<SafeAreaInset type="top" />
-			<NavigationHeader
-				title={navTitle}
-				displayBackButton={displayBackButton}
-				onClosePress={onClosePress}
-			/>
+			{disableNav ? (
+				<Title style={styles.header}>{navTitle}</Title>
+			) : (
+				<NavigationHeader
+					title={navTitle}
+					displayBackButton={displayBackButton}
+					onClosePress={onClosePress}
+				/>
+			)}
+
 			<View style={styles.content} testID={testID}>
 				<View
 					style={[
@@ -72,6 +79,10 @@ const styles = StyleSheet.create({
 	root: {
 		flex: 1,
 	},
+	header: {
+		textAlign: 'center',
+		paddingBottom: 35,
+	},
 	content: {
 		flex: 1,
 		justifyContent: 'space-between',

diff --git a/src/navigation/bottom-sheet/AppUpdatePrompt.tsx b/src/navigation/bottom-sheet/AppUpdatePrompt.tsx
@@ -1,13 +1,10 @@
 import React, { memo, ReactElement, useEffect, useMemo } from 'react';
-import { Image, StyleSheet, View } from 'react-native';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { __E2E__ } from '../../constants/env';
-import { BodyM } from '../../styles/text';
+import { Display } from '../../styles/text';
 import BottomSheetWrapper from '../../components/BottomSheetWrapper';
-import BottomSheetNavigationHeader from '../../components/BottomSheetNavigationHeader';
-import SafeAreaInset from '../../components/SafeAreaInset';
-import Button from '../../components/Button';
+import BottomSheetScreen from '../../components/BottomSheetScreen';
 import { openURL } from '../../utils/helpers';
 import { objectKeys } from '../../utils/objectKeys';
 import { useAppDispatch, useAppSelector } from '../../hooks/redux';
@@ -31,7 +28,7 @@ const CHECK_DELAY = 2500; // how long user needs to stay on Wallets screen befor
 
 const AppUpdatePrompt = ({ enabled }: { enabled: boolean }): ReactElement => {
 	const { t } = useTranslation('other');
-	const snapPoints = useSnapPoints('medium');
+	const snapPoints = useSnapPoints('large');
 	const dispatch = useAppDispatch();
 	const viewControllers = useAppSelector(viewControllersSelector);
 	const updateInfo = useAppSelector(availableUpdateSelector);
@@ -95,63 +92,25 @@ const AppUpdatePrompt = ({ enabled }: { enabled: boolean }): ReactElement => {
 		<BottomSheetWrapper
 			view="appUpdatePrompt"
 			snapPoints={snapPoints}
-			backdrop={true}
 			onClose={onClose}>
-			<View style={styles.root}>
-				<BottomSheetNavigationHeader
-					title={t('update_title')}
-					displayBackButton={false}
-				/>
-				<BodyM color="secondary">{t('update_text')}</BodyM>
-
-				<View style={styles.imageContainer}>
-					<Image style={styles.image} source={imageSrc} />
-				</View>
-
-				<View style={styles.buttonContainer}>
-					<Button
-						style={styles.button}
-						variant="secondary"
-						size="large"
-						text={t('cancel')}
-						onPress={onCancel}
+			<BottomSheetScreen
+				navTitle={t('update_nav_title')}
+				title={
+					<Trans
+						t={t}
+						i18nKey="update_title"
+						components={{ accent: <Display color="brand" /> }}
 					/>
-					<Button
-						style={styles.button}
-						size="large"
-						text={t('update_button')}
-						onPress={onUpdate}
-					/>
-				</View>
-				<SafeAreaInset type="bottom" minPadding={16} />
-			</View>
+				}
+				description={t('update_text')}
+				image={imageSrc}
+				continueText={t('update_button')}
+				cancelText={t('cancel')}
+				onContinue={onUpdate}
+				onCancel={onCancel}
+			/>
 		</BottomSheetWrapper>
 	);
 };
 
-const styles = StyleSheet.create({
-	root: {
-		flex: 1,
-		paddingHorizontal: 16,
-	},
-	imageContainer: {
-		alignItems: 'center',
-		marginTop: 'auto',
-		aspectRatio: 1,
-	},
-	image: {
-		flex: 1,
-		resizeMode: 'contain',
-	},
-	buttonContainer: {
-		flexDirection: 'row',
-		justifyContent: 'center',
-		marginTop: 'auto',
-		gap: 16,
-	},
-	button: {
-		flex: 1,
-	},
-});
-
 export default memo(AppUpdatePrompt);