From 0cb7547bf55109c27a397820e7f93da6c4d0c8da Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Thu, 29 Sep 2022 15:24:41 -0300
Subject: [PATCH 1/5] [FIX] Screen Lock's Password screen UI is broken on
 tablets

---
 app/containers/Passcode/Base/Button.tsx |  7 +++--
 app/containers/Passcode/Base/index.tsx  | 41 ++++++++++++++++++-------
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/app/containers/Passcode/Base/Button.tsx b/app/containers/Passcode/Base/Button.tsx
index b768fb50cf5..28e9a723436 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 4bc2b9dd0e7..53cc4048c31 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,23 @@ 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();
+
+		const dinamicHeight = (height - 206) / 4;
+		const heightButtonRow = dinamicHeight > 102 ? 102 : dinamicHeight;
 
 		const rootRef = useRef<Animatable.View & View>(null);
 		const dotsRef = useRef<Animatable.View & View>(null);
@@ -103,40 +122,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, { height: heightButtonRow }]}>
 						{range(1, 4).map(i => (
 							<Col key={i} style={styles.colButton}>
-								<Button text={i.toString()} onPress={onPressNumber} />
+								<Button style={{ height: heightButtonRow }} text={i.toString()} onPress={onPressNumber} />
 							</Col>
 						))}
 					</Row>
-					<Row style={[styles.row, styles.buttonRow]}>
+					<Row style={[styles.row, { height: heightButtonRow }]}>
 						{range(4, 7).map(i => (
 							<Col key={i} style={styles.colButton}>
-								<Button text={i.toString()} onPress={onPressNumber} />
+								<Button style={{ height: heightButtonRow }} text={i.toString()} onPress={onPressNumber} />
 							</Col>
 						))}
 					</Row>
-					<Row style={[styles.row, styles.buttonRow]}>
+					<Row style={[styles.row, { height: heightButtonRow }]}>
 						{range(7, 10).map(i => (
 							<Col key={i} style={styles.colButton}>
-								<Button text={i.toString()} onPress={onPressNumber} />
+								<Button style={{ height: heightButtonRow }} text={i.toString()} onPress={onPressNumber} />
 							</Col>
 						))}
 					</Row>
-					<Row style={[styles.row, styles.buttonRow]}>
+					<Row style={[styles.row, { height: heightButtonRow }]}>
 						{showBiometry ? (
 							<Col style={styles.colButton}>
-								<Button icon='fingerprint' onPress={onBiometryPress} />
+								<Button style={{ height: heightButtonRow }} icon='fingerprint' onPress={onBiometryPress} />
 							</Col>
 						) : (
 							<Col style={styles.colButton} />
 						)}
 						<Col style={styles.colButton}>
-							<Button text='0' onPress={onPressNumber} />
+							<Button style={{ height: heightButtonRow }} text='0' onPress={onPressNumber} />
 						</Col>
 						<Col style={styles.colButton}>
-							<Button icon='backspace' onPress={onPressDelete} />
+							<Button style={{ height: heightButtonRow }} icon='backspace' onPress={onPressDelete} />
 						</Col>
 					</Row>
 				</Grid>

From 0f8e8482182f9ba50a13980914183214e99523a4 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Thu, 29 Sep 2022 17:12:32 -0300
Subject: [PATCH 2/5] minor tweak and added comment

---
 app/containers/Passcode/Base/index.tsx | 15 ++++++++-------
 app/containers/Passcode/Base/styles.ts |  7 +------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/app/containers/Passcode/Base/index.tsx b/app/containers/Passcode/Base/index.tsx
index 53cc4048c31..22e6251dbf8 100644
--- a/app/containers/Passcode/Base/index.tsx
+++ b/app/containers/Passcode/Base/index.tsx
@@ -52,6 +52,7 @@ const Base = forwardRef<IBase, IPasscodeBase>(
 		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.
 		const dinamicHeight = (height - 206) / 4;
 		const heightButtonRow = dinamicHeight > 102 ? 102 : dinamicHeight;
 
@@ -124,37 +125,37 @@ const Base = forwardRef<IBase, IPasscodeBase>(
 					</Row>
 					<Row style={[styles.row, { height: heightButtonRow }]}>
 						{range(1, 4).map(i => (
-							<Col key={i} style={styles.colButton}>
+							<Col key={i} style={[styles.colButton, { height: heightButtonRow }]}>
 								<Button style={{ height: heightButtonRow }} text={i.toString()} onPress={onPressNumber} />
 							</Col>
 						))}
 					</Row>
 					<Row style={[styles.row, { height: heightButtonRow }]}>
 						{range(4, 7).map(i => (
-							<Col key={i} style={styles.colButton}>
+							<Col key={i} style={[styles.colButton, { height: heightButtonRow }]}>
 								<Button style={{ height: heightButtonRow }} text={i.toString()} onPress={onPressNumber} />
 							</Col>
 						))}
 					</Row>
 					<Row style={[styles.row, { height: heightButtonRow }]}>
 						{range(7, 10).map(i => (
-							<Col key={i} style={styles.colButton}>
+							<Col key={i} style={[styles.colButton, { height: heightButtonRow }]}>
 								<Button style={{ height: heightButtonRow }} text={i.toString()} onPress={onPressNumber} />
 							</Col>
 						))}
 					</Row>
 					<Row style={[styles.row, { height: heightButtonRow }]}>
 						{showBiometry ? (
-							<Col style={styles.colButton}>
+							<Col style={[styles.colButton, { height: heightButtonRow }]}>
 								<Button style={{ height: heightButtonRow }} icon='fingerprint' onPress={onBiometryPress} />
 							</Col>
 						) : (
-							<Col style={styles.colButton} />
+							<Col style={[styles.colButton, { height: heightButtonRow }]} />
 						)}
-						<Col style={styles.colButton}>
+						<Col style={[styles.colButton, { height: heightButtonRow }]}>
 							<Button style={{ height: heightButtonRow }} text='0' onPress={onPressNumber} />
 						</Col>
-						<Col style={styles.colButton}>
+						<Col style={[styles.colButton, { height: heightButtonRow }]}>
 							<Button style={{ height: heightButtonRow }} icon='backspace' onPress={onPressDelete} />
 						</Col>
 					</Row>
diff --git a/app/containers/Passcode/Base/styles.ts b/app/containers/Passcode/Base/styles.ts
index 252e5a85468..737ce0c93cd 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: {

From b41cd64dfdda493601128b44d7c2e0a24e3f6d1b Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Thu, 29 Sep 2022 17:45:13 -0300
Subject: [PATCH 3/5] minor tweak

---
 app/containers/Passcode/Base/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/containers/Passcode/Base/index.tsx b/app/containers/Passcode/Base/index.tsx
index 22e6251dbf8..b642041d1d8 100644
--- a/app/containers/Passcode/Base/index.tsx
+++ b/app/containers/Passcode/Base/index.tsx
@@ -53,7 +53,8 @@ const Base = forwardRef<IBase, IPasscodeBase>(
 		const { height } = useDimensions();
 
 		// 206 is the height of the header calculating the margins, icon size height, title font size and subtitle height.
-		const dinamicHeight = (height - 206) / 4;
+		// 54 is a fixed number to decrease the height of button numbers.
+		const dinamicHeight = (height - 206 - 54) / 4;
 		const heightButtonRow = dinamicHeight > 102 ? 102 : dinamicHeight;
 
 		const rootRef = useRef<Animatable.View & View>(null);

From f723935dfa3b4390819341f68760d11578de6da7 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Fri, 30 Sep 2022 09:59:06 -0300
Subject: [PATCH 4/5] minor tweak

---
 app/containers/Passcode/Base/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/containers/Passcode/Base/index.tsx b/app/containers/Passcode/Base/index.tsx
index b642041d1d8..6f0e9bf23e0 100644
--- a/app/containers/Passcode/Base/index.tsx
+++ b/app/containers/Passcode/Base/index.tsx
@@ -53,8 +53,8 @@ const Base = forwardRef<IBase, IPasscodeBase>(
 		const { height } = useDimensions();
 
 		// 206 is the height of the header calculating the margins, icon size height, title font size and subtitle height.
-		// 54 is a fixed number to decrease the height of button numbers.
-		const dinamicHeight = (height - 206 - 54) / 4;
+		// 56 is a fixed number to decrease the height of button numbers.
+		const dinamicHeight = (height - 206 - 56) / 4;
 		const heightButtonRow = dinamicHeight > 102 ? 102 : dinamicHeight;
 
 		const rootRef = useRef<Animatable.View & View>(null);

From a9fdd0319df3de104850367c4f10f5d5904d12d8 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Wed, 5 Oct 2022 13:49:31 -0300
Subject: [PATCH 5/5] minor tweak

---
 app/containers/Passcode/Base/index.tsx | 36 +++++++++++++-------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/containers/Passcode/Base/index.tsx b/app/containers/Passcode/Base/index.tsx
index 6f0e9bf23e0..cfe8ac741fe 100644
--- a/app/containers/Passcode/Base/index.tsx
+++ b/app/containers/Passcode/Base/index.tsx
@@ -55,7 +55,7 @@ const Base = forwardRef<IBase, IPasscodeBase>(
 		// 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 = dinamicHeight > 102 ? 102 : dinamicHeight;
+		const heightButtonRow = { height: dinamicHeight > 102 ? 102 : dinamicHeight };
 
 		const rootRef = useRef<Animatable.View & View>(null);
 		const dotsRef = useRef<Animatable.View & View>(null);
@@ -124,40 +124,40 @@ const Base = forwardRef<IBase, IPasscodeBase>(
 							<Dots passcode={passcode} length={PASSCODE_LENGTH} />
 						</Animatable.View>
 					</Row>
-					<Row style={[styles.row, { height: heightButtonRow }]}>
+					<Row style={[styles.row, heightButtonRow]}>
 						{range(1, 4).map(i => (
-							<Col key={i} style={[styles.colButton, { height: heightButtonRow }]}>
-								<Button style={{ height: heightButtonRow }} 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, { height: heightButtonRow }]}>
+					<Row style={[styles.row, heightButtonRow]}>
 						{range(4, 7).map(i => (
-							<Col key={i} style={[styles.colButton, { height: heightButtonRow }]}>
-								<Button style={{ height: heightButtonRow }} 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, { height: heightButtonRow }]}>
+					<Row style={[styles.row, heightButtonRow]}>
 						{range(7, 10).map(i => (
-							<Col key={i} style={[styles.colButton, { height: heightButtonRow }]}>
-								<Button style={{ height: heightButtonRow }} 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, { height: heightButtonRow }]}>
+					<Row style={[styles.row, heightButtonRow]}>
 						{showBiometry ? (
-							<Col style={[styles.colButton, { height: heightButtonRow }]}>
-								<Button style={{ height: heightButtonRow }} icon='fingerprint' onPress={onBiometryPress} />
+							<Col style={[styles.colButton, heightButtonRow]}>
+								<Button style={heightButtonRow} icon='fingerprint' onPress={onBiometryPress} />
 							</Col>
 						) : (
-							<Col style={[styles.colButton, { height: heightButtonRow }]} />
+							<Col style={[styles.colButton, heightButtonRow]} />
 						)}
-						<Col style={[styles.colButton, { height: heightButtonRow }]}>
-							<Button style={{ height: heightButtonRow }} text='0' onPress={onPressNumber} />
+						<Col style={[styles.colButton, heightButtonRow]}>
+							<Button style={heightButtonRow} text='0' onPress={onPressNumber} />
 						</Col>
-						<Col style={[styles.colButton, { height: heightButtonRow }]}>
-							<Button style={{ height: heightButtonRow }} icon='backspace' onPress={onPressDelete} />
+						<Col style={[styles.colButton, heightButtonRow]}>
+							<Button style={heightButtonRow} icon='backspace' onPress={onPressDelete} />
 						</Col>
 					</Row>
 				</Grid>