From 74418fec5d85c61b48688179e73c225aa89f4f92 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
Date: Tue, 18 Oct 2022 16:26:49 -0300
Subject: [PATCH] [FIX] Screen Lock's Password screen UI is broken on tablets
 (#4583)

* [FIX] Screen Lock's Password screen UI is broken on tablets

* minor tweak and added comment

* minor tweak

* minor tweak

* minor tweak
---
 app/containers/Passcode/Base/Button.tsx |  7 +--
 app/containers/Passcode/Base/index.tsx  | 57 +++++++++++++++++--------
 app/containers/Passcode/Base/styles.ts  |  7 +--
 3 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/app/containers/Passcode/Base/Button.tsx b/app/containers/Passcode/Base/Button.tsx
index b768fb50c..28e9a7234 100644
--- a/app/containers/Passcode/Base/Button.tsx
+++ b/app/containers/Passcode/Base/Button.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, StyleProp, ViewStyle } from 'react-native';
 
 import styles from './styles';
 import { themes } from '../../../lib/constants';
@@ -12,16 +12,17 @@ interface IPasscodeButton {
 	icon?: TIconsName;
 	disabled?: boolean;
 	onPress?: Function;
+	style?: StyleProp<ViewStyle>;
 }
 
-const Button = React.memo(({ text, disabled, onPress, icon }: IPasscodeButton) => {
+const Button = React.memo(({ style, text, disabled, onPress, icon }: IPasscodeButton) => {
 	const { theme } = useTheme();
 
 	const press = () => onPress && onPress(text);
 
 	return (
 		<Touch
-			style={[styles.buttonView, { backgroundColor: 'transparent' }]}
+			style={[styles.buttonView, { backgroundColor: 'transparent' }, style]}
 			underlayColor={themes[theme].passcodeButtonActive}
 			rippleColor={themes[theme].passcodeButtonActive}
 			enabled={!disabled}
diff --git a/app/containers/Passcode/Base/index.tsx b/app/containers/Passcode/Base/index.tsx
index 4bc2b9dd0..cfe8ac741 100644
--- a/app/containers/Passcode/Base/index.tsx
+++ b/app/containers/Passcode/Base/index.tsx
@@ -1,9 +1,10 @@
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
 import { Col, Grid, Row } from 'react-native-easy-grid';
 import range from 'lodash/range';
 import { View } from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import * as Haptics from 'expo-haptics';
+import Orientation from 'react-native-orientation-locker';
 
 import styles from './styles';
 import Button from './Button';
@@ -14,6 +15,8 @@ import { useTheme } from '../../../theme';
 import LockIcon from './LockIcon';
 import Title from './Title';
 import Subtitle from './Subtitle';
+import { useDimensions } from '../../../dimensions';
+import { isTablet } from '../../../lib/methods/helpers';
 
 interface IPasscodeBase {
 	type: string;
@@ -34,7 +37,25 @@ export interface IBase {
 
 const Base = forwardRef<IBase, IPasscodeBase>(
 	({ type, onEndProcess, previousPasscode, title, subtitle, onError, showBiometry, onBiometryPress }, ref) => {
+		useLayoutEffect(() => {
+			if (!isTablet) {
+				Orientation.lockToPortrait();
+			}
+
+			return () => {
+				if (!isTablet) {
+					Orientation.unlockAllOrientations();
+				}
+			};
+		}, []);
+
 		const { theme } = useTheme();
+		const { height } = useDimensions();
+
+		// 206 is the height of the header calculating the margins, icon size height, title font size and subtitle height.
+		// 56 is a fixed number to decrease the height of button numbers.
+		const dinamicHeight = (height - 206 - 56) / 4;
+		const heightButtonRow = { height: dinamicHeight > 102 ? 102 : dinamicHeight };
 
 		const rootRef = useRef<Animatable.View & View>(null);
 		const dotsRef = useRef<Animatable.View & View>(null);
@@ -103,40 +124,40 @@ const Base = forwardRef<IBase, IPasscodeBase>(
 							<Dots passcode={passcode} length={PASSCODE_LENGTH} />
 						</Animatable.View>
 					</Row>
-					<Row style={[styles.row, styles.buttonRow]}>
+					<Row style={[styles.row, heightButtonRow]}>
 						{range(1, 4).map(i => (
-							<Col key={i} style={styles.colButton}>
-								<Button text={i.toString()} onPress={onPressNumber} />
+							<Col key={i} style={[styles.colButton, heightButtonRow]}>
+								<Button style={heightButtonRow} text={i.toString()} onPress={onPressNumber} />
 							</Col>
 						))}
 					</Row>
-					<Row style={[styles.row, styles.buttonRow]}>
+					<Row style={[styles.row, heightButtonRow]}>
 						{range(4, 7).map(i => (
-							<Col key={i} style={styles.colButton}>
-								<Button text={i.toString()} onPress={onPressNumber} />
+							<Col key={i} style={[styles.colButton, heightButtonRow]}>
+								<Button style={heightButtonRow} text={i.toString()} onPress={onPressNumber} />
 							</Col>
 						))}
 					</Row>
-					<Row style={[styles.row, styles.buttonRow]}>
+					<Row style={[styles.row, heightButtonRow]}>
 						{range(7, 10).map(i => (
-							<Col key={i} style={styles.colButton}>
-								<Button text={i.toString()} onPress={onPressNumber} />
+							<Col key={i} style={[styles.colButton, heightButtonRow]}>
+								<Button style={heightButtonRow} text={i.toString()} onPress={onPressNumber} />
 							</Col>
 						))}
 					</Row>
-					<Row style={[styles.row, styles.buttonRow]}>
+					<Row style={[styles.row, heightButtonRow]}>
 						{showBiometry ? (
-							<Col style={styles.colButton}>
-								<Button icon='fingerprint' onPress={onBiometryPress} />
+							<Col style={[styles.colButton, heightButtonRow]}>
+								<Button style={heightButtonRow} icon='fingerprint' onPress={onBiometryPress} />
 							</Col>
 						) : (
-							<Col style={styles.colButton} />
+							<Col style={[styles.colButton, heightButtonRow]} />
 						)}
-						<Col style={styles.colButton}>
-							<Button text='0' onPress={onPressNumber} />
+						<Col style={[styles.colButton, heightButtonRow]}>
+							<Button style={heightButtonRow} text='0' onPress={onPressNumber} />
 						</Col>
-						<Col style={styles.colButton}>
-							<Button icon='backspace' onPress={onPressDelete} />
+						<Col style={[styles.colButton, heightButtonRow]}>
+							<Button style={heightButtonRow} icon='backspace' onPress={onPressDelete} />
 						</Col>
 					</Row>
 				</Grid>
diff --git a/app/containers/Passcode/Base/styles.ts b/app/containers/Passcode/Base/styles.ts
index 252e5a854..737ce0c93 100644
--- a/app/containers/Passcode/Base/styles.ts
+++ b/app/containers/Passcode/Base/styles.ts
@@ -18,16 +18,12 @@ export default StyleSheet.create({
 		alignItems: 'center',
 		justifyContent: 'center'
 	},
-	buttonRow: {
-		height: 102
-	},
 	colButton: {
 		flex: 0,
 		marginLeft: 12,
 		marginRight: 12,
 		alignItems: 'center',
-		width: 78,
-		height: 78
+		width: 78
 	},
 	buttonText: {
 		fontSize: 28,
@@ -37,7 +33,6 @@ export default StyleSheet.create({
 		alignItems: 'center',
 		justifyContent: 'center',
 		width: 78,
-		height: 78,
 		borderRadius: 4
 	},
 	textTitle: {