fix: Update visual style of our text inputs for better consistency.

src/components/AmountForm.tsx

@@ -257,7 +257,6 @@ function AmountForm(
                     textInput.current = ref;
                 }}
                 prefixCharacter={currency}
-                prefixContainerStyle={styles.pb2half}
                 prefixStyle={styles.colorMuted}
                 keyboardType={CONST.KEYBOARD_TYPE.DECIMAL_PAD}
                 // On android autoCapitalize="words" is necessary when keyboardType="decimal-pad" or inputMode="decimal" to prevent input lag.

src/components/AmountTextInput.tsx

@@ -37,6 +37,9 @@ type AmountTextInputProps = {
     /** Style for the TextInput container */
     containerStyle?: StyleProp<ViewStyle>;
 
+    /** Whether to apply padding to the input, some inputs doesn't require any padding, e.g. Amount input in money request flow */
+    shouldApplyPaddingToContainer?: boolean;
+
     /** Hide the focus styles on TextInput */
     hideFocusedState?: boolean;
 } & Pick<BaseTextInputProps, 'autoFocus' | 'autoGrowExtraSpace' | 'submitBehavior'>;
@@ -54,6 +57,7 @@ function AmountTextInput(
         containerStyle,
         disableKeyboard = true,
         hideFocusedState = true,
+        shouldApplyPaddingToContainer = false,
         ...rest
     }: AmountTextInputProps,
     ref: ForwardedRef<BaseTextInputRef>,
@@ -85,6 +89,8 @@ function AmountTextInput(
             autoCorrect={false}
             spellCheck={false}
             disableKeyboardShortcuts
+            shouldUseFullInputHeight
+            shouldApplyPaddingToContainer={shouldApplyPaddingToContainer}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...rest}
         />

src/components/EmojiPicker/EmojiPickerMenu/index.tsx

@@ -16,18 +16,19 @@ import useSingleExecution from '@hooks/useSingleExecution';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import * as Browser from '@libs/Browser';
+import {isMobile} from '@libs/Browser';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
-import * as EmojiUtils from '@libs/EmojiUtils';
+import {getRemovedSkinToneEmoji} from '@libs/EmojiUtils';
+import type {EmojiPickerListItem} from '@libs/EmojiUtils';
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
-import * as ReportUtils from '@libs/ReportUtils';
+import {shouldAutoFocusOnKeyPress} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import BaseEmojiPickerMenu from './BaseEmojiPickerMenu';
 import type EmojiPickerMenuProps from './types';
 import useEmojiPickerMenu from './useEmojiPickerMenu';
 
-const throttleTime = Browser.isMobile() ? 200 : 50;
+const throttleTime = isMobile() ? 200 : 50;
 
 function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, ref: ForwardedRef<BaseTextInputRef>) {
     const styles = useThemeStyles();
@@ -148,7 +149,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
             }
 
             // We allow typing in the search box if any key is pressed apart from Arrow keys.
-            if (searchInputRef.current && !isTextInputFocused(searchInputRef) && ReportUtils.shouldAutoFocusOnKeyPress(keyBoardEvent)) {
+            if (searchInputRef.current && !isTextInputFocused(searchInputRef) && shouldAutoFocusOnKeyPress(keyBoardEvent)) {
                 searchInputRef.current.focus();
             }
         },
@@ -247,7 +248,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
      * so that the sticky headers function properly.
      *
      */
-    const renderItem: ListRenderItem<EmojiUtils.EmojiPickerListItem> = useCallback(
+    const renderItem: ListRenderItem<EmojiPickerListItem> = useCallback(
         ({item, index, target}) => {
             const code = item.code;
             const types = 'types' in item ? item.types : undefined;
@@ -267,8 +268,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
             const emojiCode = typeof preferredSkinTone === 'number' && types?.at(preferredSkinTone) && preferredSkinTone !== -1 ? types.at(preferredSkinTone) : code;
 
             const isEmojiFocused = index === focusedIndex && isUsingKeyboardMovement;
-            const shouldEmojiBeHighlighted =
-                (index === focusedIndex && highlightEmoji) || (!!activeEmoji && EmojiUtils.getRemovedSkinToneEmoji(emojiCode) === EmojiUtils.getRemovedSkinToneEmoji(activeEmoji));
+            const shouldEmojiBeHighlighted = (index === focusedIndex && highlightEmoji) || (!!activeEmoji && getRemovedSkinToneEmoji(emojiCode) === getRemovedSkinToneEmoji(activeEmoji));
             const shouldFirstEmojiBeHighlighted = index === 0 && highlightFirstEmoji;
 
             return (
@@ -320,7 +320,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
                 arePointerEventsDisabled ? styles.pointerEventsNone : styles.pointerEventsAuto,
             ]}
         >
-            <View style={[styles.ph4, styles.pb3, styles.pt2]}>
+            <View style={[styles.p4, styles.pb3]}>
                 <TextInput
                     label={translate('common.search')}
                     accessibilityLabel={translate('common.search')}

src/components/MagicCodeInput.tsx

@@ -435,6 +435,7 @@ function MagicCodeInput(
                                 StyleUtils.getHeightOfMagicCodeInput(),
                                 hasError || errorText ? styles.borderColorDanger : {},
                                 focusedIndex === index ? styles.borderColorFocus : {},
+                                styles.pt0,
                             ]}
                         >
                             <Text style={[styles.magicCodeInput, styles.textAlignCenter]}>{decomposeString(value, maxLength).at(index) ?? ''}</Text>

src/components/MoneyRequestAmountInput.tsx

@@ -3,7 +3,6 @@ import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} fr
 import type {NativeSyntheticEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import {useMouseContext} from '@hooks/useMouseContext';
-import useThemeStyles from '@hooks/useThemeStyles';
 import {isMobileSafari} from '@libs/Browser';
 import {convertToFrontendAmountAsString, getCurrencyDecimals} from '@libs/CurrencyUtils';
 import getOperatingSystem from '@libs/getOperatingSystem';
@@ -92,6 +91,9 @@ type MoneyRequestAmountInputProps = {
     /** The width of inner content */
     contentWidth?: number;
 
+    /** Whether to apply padding to the input, some inputs doesn't require any padding, e.g. Amount input in money request flow */
+    shouldApplyPaddingToContainer?: boolean;
+
     /** Whether the amount is negative */
     isNegative?: boolean;
 
@@ -103,6 +105,7 @@ type MoneyRequestAmountInputProps = {
 
     /** Whether to allow flipping amount */
     allowFlippingAmount?: boolean;
+
     /** The testID of the input. Used to locate this view in end-to-end tests. */
     testID?: string;
 } & Pick<TextInputWithCurrencySymbolProps, 'autoGrowExtraSpace' | 'submitBehavior'>;
@@ -148,11 +151,11 @@ function MoneyRequestAmountInput(
         clearNegative,
         testID,
         submitBehavior,
+        shouldApplyPaddingToContainer = false,
         ...props
     }: MoneyRequestAmountInputProps,
     forwardedRef: ForwardedRef<BaseTextInputRef>,
 ) {
-    const styles = useThemeStyles();
     const {toLocaleDigit, numberFormat} = useLocalize();
 
     const textInput = useRef<BaseTextInputRef | null>(null);
@@ -360,7 +363,7 @@ function MoneyRequestAmountInput(
             style={props.inputStyle}
             containerStyle={props.containerStyle}
             prefixStyle={props.prefixStyle}
-            prefixContainerStyle={[styles.pb2half, props.prefixContainerStyle]}
+            prefixContainerStyle={props.prefixContainerStyle}
             touchableInputWrapperStyle={props.touchableInputWrapperStyle}
             maxLength={maxLength}
             hideFocusedState={hideFocusedState}
@@ -370,6 +373,7 @@ function MoneyRequestAmountInput(
             isNegative={isNegative}
             testID={testID}
             submitBehavior={submitBehavior}
+            shouldApplyPaddingToContainer={shouldApplyPaddingToContainer}
         />
     );
 }

src/components/MoneyRequestConfirmationList.tsx

@@ -667,14 +667,16 @@ function MoneyRequestConfirmationList({
                     hideFocusedState={false}
                     hideCurrencySymbol
                     formatAmountOnBlur
-                    prefixContainerStyle={[styles.pv0]}
-                    inputStyle={[styles.optionRowAmountInput]}
-                    containerStyle={[styles.textInputContainer]}
+                    prefixContainerStyle={[styles.pv0, styles.h100]}
+                    prefixStyle={styles.lineHeightUndefined}
+                    inputStyle={[styles.optionRowAmountInput, styles.lineHeightUndefined]}
+                    containerStyle={[styles.textInputContainer, styles.pl2, styles.pr1]}
                     touchableInputWrapperStyle={[styles.ml3]}
                     onFormatAmount={convertToDisplayStringWithoutCurrency}
                     onAmountChange={(value: string) => onSplitShareChange(participantOption.accountID ?? CONST.DEFAULT_NUMBER_ID, Number(value))}
                     maxLength={formattedTotalAmount.length + 1}
                     contentWidth={(formattedTotalAmount.length + 1) * 8}
+                    shouldApplyPaddingToContainer
                 />
             ),
         }));
@@ -688,8 +690,11 @@ function MoneyRequestConfirmationList({
         selectedParticipants,
         styles.flexWrap,
         styles.pl2,
+        styles.pr1,
+        styles.h100,
         styles.textLabel,
         styles.pv0,
+        styles.lineHeightUndefined,
         styles.optionRowAmountInput,
         styles.textInputContainer,
         styles.ml3,

src/components/Search/SearchAutocompleteInput.tsx

@@ -221,7 +221,7 @@ function SearchAutocompleteInput(
                         onSubmitEditing={onSubmit}
                         shouldUseDisabledStyles={false}
                         textInputContainerStyles={[styles.borderNone, styles.pb0, styles.pl3]}
-                        inputStyle={[inputWidth, {lineHeight: undefined}]}
+                        inputStyle={[inputWidth, styles.lineHeightUndefined]}
                         placeholderTextColor={theme.textSupporting}
                         onFocus={() => {
                             onFocus?.();

src/components/SelectionList/SplitListItem.tsx

@@ -135,12 +135,14 @@ function SplitListItem<TItem extends ListItem>({
                             submitBehavior="blurAndSubmit"
                             formatAmountOnBlur
                             onAmountChange={onSplitExpenseAmountChange}
-                            prefixContainerStyle={[styles.pv0]}
-                            inputStyle={[styles.optionRowAmountInput]}
-                            containerStyle={[styles.textInputContainer]}
+                            prefixContainerStyle={[styles.pv0, styles.h100]}
+                            prefixStyle={styles.lineHeightUndefined}
+                            inputStyle={[styles.optionRowAmountInput, styles.lineHeightUndefined]}
+                            containerStyle={[styles.textInputContainer, styles.pl2, styles.pr1]}
                             touchableInputWrapperStyle={[styles.ml3]}
                             maxLength={formattedOriginalAmount.length + 1}
                             contentWidth={(formattedOriginalAmount.length + 1) * 8}
+                            shouldApplyPaddingToContainer
                         />
                     </View>
                     <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto]}>

src/components/Text.tsx

@@ -26,9 +26,15 @@ type TextProps = RNTextProps &
 
         /** The family of the font to use */
         family?: keyof FontUtilsType['fontFamily']['platform'];
+
+        /** Should apply default line height */
+        shouldUseDefaultLineHeight?: boolean;
     };
 
-function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', children, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef<RNText>) {
+function Text(
+    {color, fontSize = variables.fontSizeNormal, textAlign = 'left', children, family = 'EXP_NEUE', style = {}, shouldUseDefaultLineHeight = true, ...props}: TextProps,
+    ref: ForwardedRef<RNText>,
+) {
     const theme = useTheme();
     const customStyle = useContext(CustomStylesForChildrenContext);
 
@@ -41,7 +47,7 @@ function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', c
         ...StyleSheet.flatten(customStyle),
     };
 
-    if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal) {
+    if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal && shouldUseDefaultLineHeight) {
         componentStyle.lineHeight = variables.fontSizeNormalHeight;
     }