[HOLD for payment 2024-06-28] [$500] Android - LHN - Magic glass icon overlaps text

[lanitochka17]

Version Number: 1.4.68-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: expensify.testrail.io/index.php?/cases/view/2990351
Issue reported by: Applause - Internal Team

Action Performed:
Precondition: User is logged in Android mobile application. Preferences - #focus

Unpin all chats in LHN
Mark all chats in LHN as read
Expected Result:
"All caught up.." UI is displayed. No visual issues with text

Actual Result:
"All caught up.." UI is displayed. Magic glass icon is overlaps the text annotation

Workaround:
Unknown

Platforms:
Which of our officially supported platforms is this issue occurring on?

Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop
Screenshots/Videos
Add any screenshot/video evidence

Bug6466750_1714490725789!1714490435348

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @ShridharGoel

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@alexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[ShridharGoel]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Android - LHN - Magic glass icon overlaps text.

What is the root cause of that problem?

Text rendering can vary between platforms.

https://www.codeclouds.com/blog/why-web-fonts-matter-a-short-history-and-future-of-font-rendering/

facebook/react-native#32384

On Android, having text with center alignment doesn't center align the inline icons.

What changes do you think we should make in order to solve the problem?

Add this in styles/index.ts:

emptyLHNDetailsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    flexWrap: 'wrap',
    textAlign: 'center',
}

Update emptyLHNSubtitle to use the below:

const emptyLHNSubtitle = useMemo(
    () => (
        <View style={[styles.emptyLHNDetailsContainer]}>
            <Text
                style={[
                    styles.textAlignCenter,
                    { color: theme.placeholderText },
                ]}
            >
                {translate('common.emptyLHN.subtitleText1')}
            </Text>
            <Icon
                src={Expensicons.MagnifyingGlass}
                width={variables.emptyLHNIconWidth}
                height={variables.emptyLHNIconHeight}
                fill={theme.icon}
                small
                inline
                additionalStyles={styles.mh1}
            />
            <Text
                style={[
                    styles.textAlignCenter,
                    { color: theme.placeholderText },
                ]}
            >
                {translate('common.emptyLHN.subtitleText2')}
            </Text>
            <Icon
                src={Expensicons.Plus}
                width={variables.emptyLHNIconWidth}
                height={variables.emptyLHNIconHeight}
                fill={theme.icon}
                small
                inline
                additionalStyles={styles.mh1}
            />
            <Text
                style={[
                    styles.textAlignCenter,
                    { color: theme.placeholderText },
                ]}
            >
                {translate('common.emptyLHN.subtitleText3')}
            </Text>
        </View>
    ),
    [theme, translate],
);

What alternate options did you explore?

Option 1:

Update the below to use only text and no inline icons. We'll update the text based on this comment and icons would no longer be there.

App/src/components/LHNOptionsList/LHNOptionsList.tsx

Lines 70 to 102 in ff2b440

	const emptyLHNSubtitle = useMemo(
	() => (
	<View>
	<Text
	color={theme.placeholderText}
	style={[styles.textAlignCenter]}
	>
	{translate('common.emptyLHN.subtitleText1')}
	<Icon
	src={Expensicons.MagnifyingGlass}
	width={variables.emptyLHNIconWidth}
	height={variables.emptyLHNIconHeight}
	small
	inline
	fill={theme.icon}
	additionalStyles={styles.alignItemsCenter}
	/>
	{translate('common.emptyLHN.subtitleText2')}
	<Icon
	src={Expensicons.Plus}
	width={variables.emptyLHNIconWidth}
	height={variables.emptyLHNIconHeight}
	small
	inline
	fill={theme.icon}
	additionalStyles={styles.alignItemsCenter}
	/>
	{translate('common.emptyLHN.subtitleText3')}
	</Text>
	</View>
	),
	[theme, styles.alignItemsCenter, styles.textAlignCenter, translate],
	);

Option 2:

We can remove textAlignCenter style for Android, and let the text be at the left side.

We'll create a new style called textAlignCenterWithInlineIcons which will have a Android specific implementation in index.android.ts and common implementation will be in index.ts. We can have it inside a new package in styles/utils.

In index.ts:

textAlignCenterWithInlineIcons: {
    textAlign: 'center',
}

In index.android.ts:

textAlignCenterWithInlineIcons: {
}

[alexpensify]

I can replicate the experience, but I'm not sure if this issue is device-specific because my + icon is overlapping with the copy.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01de95687e3aa21366