App
App copied to clipboard
Expensify
[$250] Adjust spacing in Global Create menu for Quick Action button
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
Issue Owner
Current Issue Owner: @suneox
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[bot] avatar](https://avatars.githubusercontent.com/in/179547?v=4 "Published by a pub.dev verified publisher"){kind=small}
Job added to Upwork: https://www.upwork.com/jobs/~021864791821196448476
Triggered auto assignment to Contributor-plus team member for initial proposal review - @suneox (External)
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
Sounds good to me. It is a bit cramped right now. (Also down with making "Create expense" the top option)
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 https://github.com/Expensify/App/blob/48b80f65e80d304965cbeb3573d7d6678fb9bd3a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx#L436
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 https://github.com/Expensify/App/blob/48b80f65e80d304965cbeb3573d7d6678fb9bd3a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx#L520
What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?
What alternative solutions did you explore? (Optional)
@shawnborton how much margin/padding vertical do you suggest for the quick action label? I think it is a better approach to give the quick action label some spacing both bottom and top. WDYT with margin vertical of 1 it would look like
I like that a lot! Maybe we do this change first and then consider changing the order in GC if we still see low uptake on QAB at that juncture.
how much margin/padding vertical do you suggest for the quick action label?
See the original comment on the issue
if we still see low uptake on QAB at that juncture.
@JmillsExpensify works for me though I'm not suggesting to change the QAB order, but rather just put Create expense as the first item in the list above Start chat.
Ah cool, I was focused on QAB because I was thinking that we hope/want that option to be ideally more common than Create expense
📣 @kentaurse! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:
- Make sure you've read and understood the contributing guidelines.
- Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
- Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
- Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
Format:
Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>
How do I get these buttons to appear?
Go to Green + button -> Track Expense -> Manual -> Enter number -> Track expense and it should pop up (or if you can't see Track Expense, then tap submit/create expense -> Just track for now -> Track expense).
Why do you need those buttons to appear? It's not part of this issue is it?
All we need is what @shawnborton outlined above:
We can just simply add 12px of top padding and 8px of bottom padding to this element here:
Doesn't look like it. Think this issue is meant to hopefully fix it 😄
@kentaurse Welcome to Expensify! First, please take some time to read through the guidelines on how to contribute to this project. This will help you understand the process and expectations for contributing effectively.
@FitseTLT proposal is straightforward to add spacing for the label and rearranging the action items. So we can proceed with his proposal
🎀 👀 🎀 C+ reviewed
[!NOTE]
We just putCreate expenseas the first item in the list aboveStart chatat this comment
Triggered auto assignment to @srikarparsi, see https://stackoverflow.com/c/expensify/questions/7972 for more details.
📣 @suneox 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!
📣 @FitseTLT 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!
Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑💻 Keep in mind: Code of Conduct | Contributing 📖
@shawnborton both track and submit menu will be above start chat just confirming it is the expected behaviour
Perhaps we should leave global create alone for now, as we're actually changing out Track and Submit to just be Create. That being said, I still feel like we should have all of the expense options at the top (especially for new users where the menu is smaller), but curious if anyone agrees?
This:
vs this:
I still feel like we should have all of the expense options at the top (especially for new users where the menu is smaller), but curious if anyone agrees?
I do agree.