[$75] Add a divider between the default spend categories in category settings

[trjExpensify]

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: v9.0.52-2 Reproducible in staging?: Y Reproducible in production?: Y Issue reported by: @trjExpensify

Action Performed:

1. Create a workspace
2. Go to the Categories tab of the workspace settings
3. Click the Settings button in the header

Expected Result:

Note: This is an improvement, not a regression.

• Add a divider between the two settings, like so:

CC: @dannymcclain for putting together that mockaroo.

Actual Result:

There's little to no space between the two different settings on this screen right now, which makes it seem like they are related to each other but they're actually independent settings:

Workaround:

N/A, visual improvement.

Platforms:

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

• [x] Android: Standalone
• [x] Android: HybridApp
• [x] Android: mWeb Chrome
• [x] iOS: Standalone
• [x] iOS: HybridApp
• [x] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

In-line above.

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021848766520698079085
• Upwork Job ID: 1848766520698079085
• Last Price Increase: 2024-10-22

Issue Owner

Current Issue Owner: @mollfpr

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Current assignee @trjExpensify is eligible for the NewFeature assigner, not assigning anyone new.

[melvin-bot[bot]]

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

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-10-22 16:45:53 UTC.

Proposal

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

Add a divider between the default spend categories in category settings

What is the root cause of that problem?

Missing divider. UI update.

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

Add the divider below the toggle:

https://github.com/Expensify/App/blob/72750b612f55f6d62587974a573df774e095eed7/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx#L93

<View style={[styles.dividerLine]} />

We should create a new style for the divider which removes the flexGrow: 1:

https://github.com/Expensify/App/blob/72750b612f55f6d62587974a573df774e095eed7/src/styles/index.ts#L2985-L2991

Otherwise the divider would occupy all remaining vertical space like this:

And adjust the vertical margin to match the mockup (24 seems good to me):

[mollfpr]

The proposal from @mkzie2 looks good to me!

🎀 👀 🎀 C+ reviewed!

[melvin-bot[bot]]

Triggered auto assignment to @MariaHCD, see https://stackoverflow.com/c/expensify/questions/7972 for more details.