[HOLD for payment 2024-07-10] [HOLD for payment 2024-07-02] [$125] Small font updates for Search page

[shawnborton]

We just released our new Search page, but we noticed quite a few font inconsistencies that we want to update.

On desktop:

• Let's use our normal font size (15px) for every column. This means undoing the smaller sizes for things like the To/From columns, or Tax column.
• Let's use a gap of 8px between the avatar and the From/To names:
• Let's remove any Expensify New Kansas from the table as well

On mobile:

• Let's only use our normal font size (15px) and our micro font size (11px)
• Merchant and amount will use the normal font size, everything else gets micro
• Let's remove the bold style from the from/to, as well as update the spacing to use 8px between avatar and name

cc @Expensify/design @luacmartins @iwiznia

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017822f748f43e483b
• Upwork Job ID: 1800776935107005435
• Last Price Increase: 2024-06-12
• Automatic offers:
• c3024 | Reviewer | 102708541

Issue Owner

Current Issue Owner: @sakluger

[melvin-bot]

Current assignee @shawnborton is eligible for the Design assigner, not assigning anyone new.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~017822f748f43e483b

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @c3024 (External)

[melvin-bot]

Triggered auto assignment to @sakluger (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.

[shawnborton]

Given that these are just small style adjustments, I think we can reduce the price down to $125. Thoughts @sakluger?

[truph01]

@shawnborton I'd volunteer to take this issue. The changes are straight forward so I don't think we need a full proposal detailing the code part for every small change here right?

Proposal

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

We want to add some small font updates for Search page

What is the root cause of that problem?

This is a new requested feature, not a bug

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

Just follow the list of changes here #43512 (comment), they are all straight-forward changes

An example of changes needed for one of the item:

Let's use our normal font size (15px) for every column. This means undoing the smaller sizes for things like the To/From columns, or Tax column.

For To/From columns, replace textMicroBold here with textStrong, or create a new textBold style that is similar to textMicroBold but doensn't have these lines

For Tax column, remove styles.label here. We can add lineHeight: variables.lineHeightLarge, from label if it's still needed (I think we don't need it)

There're other fields similar to the Tax column like Date, Merchant column

Let's use a gap of 8px between the avatar and the From/To names:

Replace styles.gap1 here by styles.gap1. Or remove the styles.gap1 and add pr2 to the Avatar

Let's remove any Expensify New Kansas from the table as well

There's Expensify New Kansas font in here in ReportListItem, we can remove styles.textNewKansasNormal (or just the font family).

There's that font used in the Header too can can be removed like that, but I guess we should not remove the font there.

Mobile-specific changes (can alternate using isLargeScreenWidth/isSmallScreenWidth):

Merchant and amount will use the normal font size, everything else gets micro

Don't use any specific font style for Merchant (remove styles.label) and Amount, but use styles.textMicro for other cells

Let's remove the bold style from the from/to

Replace textMicroBold with textMicro here. That means it's bold on Desktop but not mobile, let's consider if they should be consistent (bold or not)

update the spacing to use 8px between avatar and name

Covered in desktop changes

Mobile-specific changes (can alternate using isLargeScreenWidth/isSmallScreenWidth):

To achieve this, we can add customized styles by adding style prop to cell components like MerchantCell, UserInfoCell. And add the correct style depending on where the cell is rendered in

What alternative solutions did you explore? (Optional)