diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx index 565ad219da70..aa60fb13148f 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx @@ -5,6 +5,7 @@ import type {TNode} from 'react-native-render-html'; import useThemeStyles from '@hooks/useThemeStyles'; import convertToLTR from '@libs/convertToLTR'; import FontUtils from '@styles/utils/FontUtils'; +import variables from '@styles/variables'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; import {computeEmbeddedMaxWidth, isChildOfTaskTitle} from './htmlEngineUtils'; import htmlRenderers from './HTMLRenderers'; @@ -151,7 +152,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim 'account-manager-link': HTMLElementModel.fromCustomModel({tagName: 'account-manager-link', contentModel: HTMLContentModel.textual}), 'next-step': HTMLElementModel.fromCustomModel({ tagName: 'next-step', - mixedUAStyles: {...styles.textLabelSupporting, ...styles.lh16}, + mixedUAStyles: {...styles.textLabelSupporting, paddingVertical: variables.labelPaddingVertical}, contentModel: HTMLContentModel.textual, }), 'next-step-email': HTMLElementModel.fromCustomModel({tagName: 'next-step-email', contentModel: HTMLContentModel.textual}), @@ -194,6 +195,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim styles.taskTitleMenuItemItalic, styles.em, styles.h1, + styles.lh16, styles.blockquote, styles.onlyEmojisTextLineHeight, styles.subTextFileUpload, diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx index fec0de283a76..2510dbcd0ade 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx @@ -712,7 +712,7 @@ function MoneyRequestReportPreviewContent({ {reportStatus} )} - {!shouldShowAccessPlaceHolder && {expenseCount}} + {!shouldShowAccessPlaceHolder && {expenseCount}} ) )} diff --git a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx index c0f644e0bfae..80d444241d60 100644 --- a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx +++ b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx @@ -378,7 +378,15 @@ function TransactionPreviewContent({ /> {RBRMessage} diff --git a/src/styles/index.ts b/src/styles/index.ts index 815536b71f8e..8c9d3b40fd65 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -361,7 +361,7 @@ const staticStyles = (theme: ThemeColors) => alignItems: 'center', justifyContent: 'center', borderRadius: variables.componentBorderRadiusSmall, - height: 16, + minHeight: 16, }, reportStatusText: { @@ -1452,6 +1452,10 @@ const staticStyles = (theme: ThemeColors) => color: theme.textSupporting, }, + lhUndefined: { + lineHeight: undefined, + }, + lh14: { lineHeight: variables.lineHeightSmall, }, @@ -4111,8 +4115,12 @@ const staticStyles = (theme: ThemeColors) => height: 450, }, + textMicroSupportingPadding: { + padding: variables.paddingSmall, + }, + tabSelectorButton: { - height: variables.tabSelectorButtonHeight, + minHeight: variables.tabSelectorButtonHeight, padding: variables.tabSelectorButtonPadding, flexDirection: 'row', alignItems: 'center', diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 85f2f8706ed2..070a7943ea15 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -52,6 +52,7 @@ export default { defaultAvatarPreviewSize: 360, fabBottom: 25, breadcrumbsFontSize: getValueUsingPixelRatio(19, 32), + labelPaddingVertical: Math.abs((getValueUsingPixelRatio(13, 19) - 16) / 2), fontSizeXXSmall: 7, fontSizeSmall: getValueUsingPixelRatio(11, 17), fontSizeExtraSmall: 9, @@ -134,6 +135,7 @@ export default { inputHeightSmall: 28, inputIconMarginTopSmall: getValueUsingPixelRatio(8, 11), inputIconMarginTopLarge: getValueUsingPixelRatio(16, 21), + paddingSmall: getValueUsingPixelRatio(7, 8), formErrorLineHeight: getValueUsingPixelRatio(18, 23), communicationsLinkHeight: getValueUsingPixelRatio(20, 30), alternateTextHeight: getValueUsingPixelRatio(20, 24),