[Due for payment 2025-05-30] [$250] Concierge Categorization Message Uses Incorrect Styles

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number:
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. As admin view the uncategorized submitted expense
2. Observe the Concierge categorization message

Expected Result:

Use normal message body text.
Use medium-sized buttons to match other message interactions.
Ensure styling is consistent with our current design system and previously approved specs.

Actual Result:

Message text is styled with bold/headline formatting rather than standard body text.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Expected result with regular message style and medium-size buttons

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021919526308249144611
• Upwork Job ID: 1919526308249144611
• Last Price Increase: 2025-05-05
• Automatic offers:
• dominictb | Contributor | 107189064

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[shawnborton]

cc @jasperhuangg @marcochavezf @thienlnam

[dominictb]

@mallenexpensify I can reproduce the issue following the same steps in OP:

I can take over as C+ as per this Slack thread.

[ChavdaSachin]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-05 19:34:45 UTC.

Proposal

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

Concierge Categorization Message Uses Incorrect Styles

What is the root cause of that problem?

isMediumSized: true is not passed here.

App/src/pages/home/report/PureReportActionItem.tsx

Lines 663 to 668 in 700d44a

	text: `${i + 1} - ${option}`,
	key: `${action.reportActionID}-conciergeCategoryOptions-${option}`,
	onPress: () => {
	addComment(originalReportID, option);
	},
	isDisabled: isResolved,

We do pass this prop to other buttons.

App/src/pages/home/report/PureReportActionItem.tsx

Line 685 in 700d44a

isMediumSized: true,

App/src/pages/home/report/PureReportActionItem.tsx

Line 693 in 700d44a

isMediumSized: true,

...

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

pass isMediumSized: true here to fix the button size.

App/src/pages/home/report/PureReportActionItem.tsx

Lines 663 to 668 in 700d44a

	text: `${i + 1} - ${option}`,
	key: `${action.reportActionID}-conciergeCategoryOptions-${option}`,
	onPress: () => {
	addComment(originalReportID, option);
	},
	isDisabled: isResolved,

additionally pass as additional button style to fix font style and weight.

textStyles={[styles.fontWeightNormal, FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM]}

pass here if we just want categorize buttons to have normal font weight

App/src/pages/home/report/PureReportActionItem.tsx

Lines 663 to 668 in 700d44a

	text: `${i + 1} - ${option}`,
	key: `${action.reportActionID}-conciergeCategoryOptions-${option}`,
	onPress: () => {
	addComment(originalReportID, option);
	},
	isDisabled: isResolved,

or pass here if we want every concierge action button to render with normal font weight.

App/src/components/ReportActionItem/ActionableItemButtons.tsx

Line 31 in d231433

<Button

Note

FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM is just an example, fint style should be confirmed with design team.

and we need to verify the font weight for primary buttons ie. success style buttons as well.
and conditionally pass above style in case we want to render primary button with bold text

Also pass the font style as additional styles EXP_NEW_KANSAS_MEDIUM or whatever font style design team suggests.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.