From 0326a66072fc194824c8a63a316789135b6a59ee Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Sat, 16 Dec 2023 18:13:09 +0300 Subject: [PATCH 1/4] set minHeight for money request amount input container --- src/pages/iou/steps/MoneyRequestAmountForm.js | 2 +- src/styles/index.ts | 2 ++ src/styles/variables.ts | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.js b/src/pages/iou/steps/MoneyRequestAmountForm.js index c9075d896deb..652e07674ae0 100644 --- a/src/pages/iou/steps/MoneyRequestAmountForm.js +++ b/src/pages/iou/steps/MoneyRequestAmountForm.js @@ -260,7 +260,7 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu onMouseDown(event, [AMOUNT_VIEW_ID])} - style={[styles.flex1, styles.flexRow, styles.w100, styles.alignItemsCenter, styles.justifyContentCenter]} + style={[styles.moneyRequestAmountContainer, styles.flex1, styles.flexRow, styles.w100, styles.alignItemsCenter, styles.justifyContentCenter]} > paddingVertical: 12, }, + moneyRequestAmountContainer: {minHeight: 92}, + requestPreviewBox: { marginTop: 12, maxWidth: variables.reportPreviewMaxWidth, diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 65d7f6a0311d..60c013bb0fca 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -5,7 +5,7 @@ import {PixelRatio} from 'react-native'; * method always returns the defaultValue (first param). When the device font size increases/decreases, the PixelRatio.getFontScale() value increases/decreases as well. * This means that if you have text and its 'fontSize' is 19, the device font size changed to the 5th level on the iOS slider and the actual fontSize is 19 * PixelRatio.getFontScale() * = 19 * 1.11 = 21.09. Since we are disallowing font scaling we need to calculate it manually. We calculate it with: PixelRatio.getFontScale() * defaultValue > maxValue ? maxValue : - * defaultValue * PixelRatio getFontScale() This means that the fontSize is increased/decreased when the device font size changes up to maxValue (second param) + * defaultValue * PixelRatio.getFontScale() This means that the fontSize is increased/decreased when the device font size changes up to maxValue (second param) */ function getValueUsingPixelRatio(defaultValue: number, maxValue: number): number { return PixelRatio.getFontScale() * defaultValue > maxValue ? maxValue : defaultValue * PixelRatio.getFontScale(); From d8dc3143385bbf78e7f7a1ff7fb8c65e517c8ba0 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Mon, 18 Dec 2023 16:35:24 +0300 Subject: [PATCH 2/4] changed minheight to 116 --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 3b416feb59ba..1c106c6bcd19 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2655,7 +2655,7 @@ const styles = (theme: ThemeColors) => paddingVertical: 12, }, - moneyRequestAmountContainer: {minHeight: 92}, + moneyRequestAmountContainer: {minHeight: 116}, requestPreviewBox: { marginTop: 12, From bc1853407477cff915a7ebdd37cedf14c1141ec8 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Mon, 18 Dec 2023 17:49:19 +0300 Subject: [PATCH 3/4] changed to 114 --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 1c106c6bcd19..1ff8ae8b4187 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2655,7 +2655,7 @@ const styles = (theme: ThemeColors) => paddingVertical: 12, }, - moneyRequestAmountContainer: {minHeight: 116}, + moneyRequestAmountContainer: {minHeight: 114}, requestPreviewBox: { marginTop: 12, From 661f783c8cf4305a4f1d02748c0dbce2123e2522 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Tue, 19 Dec 2023 11:38:11 +0300 Subject: [PATCH 4/4] updated from fixed value to calculated one --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 1ff8ae8b4187..5fc3fcd145cb 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2655,7 +2655,7 @@ const styles = (theme: ThemeColors) => paddingVertical: 12, }, - moneyRequestAmountContainer: {minHeight: 114}, + moneyRequestAmountContainer: {minHeight: variables.inputHeight + 2 * (variables.formErrorLineHeight + 8)}, requestPreviewBox: { marginTop: 12,