[HOLD for payment 2024-12-30] [$250] Adjust spacing in Global Create menu for Quick Action button

[shawnborton]

Let's adjust the spacing in the Global Create menu so that the Quick action label and button aren't so crammed:

Current:

Proposed:

We can just simply add 12px of top padding and 8px of bottom padding to this element here:

cc @Expensify/design @trjExpensify @JmillsExpensify for visibility, let me know what you think

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021864791821196448476
• Upwork Job ID: 1864791821196448476
• Last Price Increase: 2024-12-05
• Automatic offers:
• suneox | Reviewer | 105251692
• FitseTLT | Contributor | 105251693

Issue Owner

Current Issue Owner: @adelekennedy

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[shawnborton]

Also, this could be a good issue to change up the order and put "Create expense" as the first thing in the list if we want to, cc @danielrvidal

[dannymcclain]

Sounds good to me. It is a bit cramped right now. (Also down with making "Create expense" the top option)

[FitseTLT]

Proposal

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

Adjust spacing in Global Create menu for Quick Action button

What is the root cause of that problem?

No spacing given in the label style here

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

Line 436 in 48b80f6

label: translate('quickAction.header'),

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

We can add spacing in the label according to the design team suggestion via a margin or a padding: sth like

            labelStyle: [styles.pt3, styles.pb2],

And take the expense menu items here to first above the start chat menu item

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

Line 520 in 48b80f6

...expenseMenuItems,

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

What alternative solutions did you explore? (Optional)