Align home tab Distance button icon with global create (Location)

[MelvinBot]

Explanation of Change

The Distance button in the home tab's quick-creation bar used the CarPlus (car) icon, while the global create menu's Distance item uses the Location (map pin) icon. This aligns the home tab to use the Location icon so both entry points are consistent.

Requested in Slack — dubielzyk-expensify plans to supply the final icon asset on this PR, so this swap uses the existing Expensicons.Location in the meantime.

Changed src/components/Navigation/QuickCreationActionsBar/index.tsx: swapped CarPlus → Location in the lazy icon list and the Distance Button's icon prop.

⚠️ Local AI tests (lint/typecheck/test/storybook) could not be run in Melvin's environment because dependency installation was unavailable. CI will validate. The change is low-risk: 'Location' is already used as a useMemoizedLazyExpensifyIcons key and icons.Location accessor in TrackDistanceMenuItem.tsx.

Fixed Issues

$ https://expensify.slack.com/archives/C03TME82F/p1784257112631929
PROPOSAL:

Tests

// TODO: The human co-author must fill out the tests you ran before marking this PR as "ready for review".
// Please describe what tests you performed that validate your change worked.

[ ] Go to Home. Observe that Location has a Pin with a plus icon
[ ] Click (+) to open Global Create and observe that the order is Create expense, Create report, Track distance, then the rest.

Offline tests

// TODO: The human co-author must fill out any relevant offline test steps before marking this PR as "ready for review".

Same as tests

QA Steps

// TODO: The human co-author must fill out the QA tests before marking this PR as "ready for review".

Same as tests

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (see Reviewing the code)
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
• If new assets were added or existing ones were modified, I verified that:
  • The assets are optimized and compressed (for SVG files, run npm run compress-svg)
  • The assets load correctly across all supported platforms.
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
  • I verified that all the inputs inside a form are aligned with each other.
  • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
• I added unit tests for any new feature or bug fix in this PR to help automatically prevent regressions in this user flow.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

[dubielzyk-expensify]

@MelvinBot Can you use this icon instead?

[MelvinBot]

The only failing check right now is PR Author Checklist / checklist — and there's no code fix for it.

That check fails by design until a human co-author fills out the PR body: it requires the checklist boxes to be ticked and the human-only Tests / QA Steps sections (currently // TODO: The human co-author must fill out...) to be completed. I intentionally don't fill those out on a person's behalf, so this one is on you to complete before the PR can merge.

Every actual CI check is green or still running:

• Passing: Bun tests, typecheck, test (jobs 1–3, 6), Storybook, Oxfmt, React Compiler Compliance, spellcheck, unused-styles, dryRun, builds, signed commits, Snyk.
• Pending (not failed): ESLint, knip, perf tests, and the remaining test jobs — these were still in progress when I checked.

So nothing to push a fix for. Complete the checklist and the Tests/QA sections, then let the pending checks finish. If ESLint or any of the still-running checks come back red, re-ping me and I'll fix it.

[melvin-bot]

@blimpich Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[melvin-bot]

@blimpich Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[MelvinBot]

Fixed the failing Check SVG compression check and pushed the fix.

The newly-added icon asset assets/images/location-add.svg wasn't compressed (it still had the raw Adobe Illustrator export with a generator comment, XML declaration, and unoptimized path data). I ran npm run compress-svg, which optimized only that file (~30% smaller; the other 737 assets were already compressed), and pushed the result — so the check will now pass on re-run.

The only other failing check is PR Author Checklist / checklist, which isn't a code failure — it stays red until you tick the checklist boxes and fill in the human-only Tests / QA Steps sections in the PR body.

[MelvinBot]

Still nothing to fix here — the state is unchanged from my previous comment.

The only failing check is PR Author Checklist / checklist, which isn't a code/CI failure: it stays red until the human co-author ticks the checklist boxes and fills in the human-only Tests / QA Steps sections (still // TODO). I don't complete those on a person's behalf.

A fresh CI run is currently in progress (typecheck, all Jest jobs, iOS/Android builds, and perf tests are re-running) — none of those have failed. Let them finish, complete the checklist, and you're good. If any of the in-progress checks come back red, re-ping me and I'll fix it.

[codecov]

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
...rc/components/Icon/chunks/expensify-icons.chunk.ts	0.00% <ø> (ø)
...nents/Navigation/QuickCreationActionsBar/index.tsx	85.54% <100.00%> (ø)
... and 13 files with indirect coverage changes

[MelvinBot]

Re-checked — still nothing for me to push a fix for.

The only "failing" check is PR Author Checklist / checklist, which isn't a code/CI failure. It stays red until a human co-author fills out the PR body: tick the checklist boxes and complete the human-only Tests / QA Steps sections (still // TODO: The human co-author must fill out...). I don't fill those in on someone's behalf, so this one's on you.

Everything else is green or finishing up:

• 34 checks passing, including typecheck, all test jobs, Bun tests, ESLint, knip, Storybook, Oxfmt, React Compiler, spellcheck, and builds.
• 2 still running: baseline-perf-tests and branch-perf-tests.

Complete the checklist + Tests/QA sections and let the two perf jobs finish. If either perf check comes back red, re-ping me and I'll dig in.

[github-actions]

🚧 dubielzyk-expensify has triggered a test Expensify/App build. You can view the workflow run here.

[MelvinBot]

I looked into the failing checks. The only failing check is PR Author Checklist / checklist (run) — every other check (Bun tests, ESLint, typecheck, Storybook, unit tests, builds, etc.) is passing. ✅

There's no code issue to fix here. The author checklist fails because it's still incomplete:

• The checklist boxes are unchecked.
• The Tests, Offline tests, and QA Steps sections still contain the // TODO: **The human co-author** must fill out... placeholders.

This check is expected to pass once the human co-author completes the checklist and fills in the testing steps before marking the PR "Ready for review". I intentionally won't check those boxes or fill in the Tests/QA sections on your behalf, since those are human-only sections that certify testing was actually performed.

So: no push needed — this is just waiting on the checklist/test steps to be filled out. Let me know if you'd like me to help with anything else on the code side.

[dubielzyk-expensify]

Seems to test nicely to me:

cc @Expensify/design

[shawnborton]

Looks great! Did we want to match the ordering of the FAB menu though? I vaguely recall seeing that in Slack:

[dubielzyk-expensify]

Forgot about that one. Changed in the latest commit.

[MelvinBot]

Still the same situation — the only failing check is PR Author Checklist / checklist, and there's no code fix to push.

The failure log confirms it:

You completed 0 out of 38 checklist items with 38 unfinished items
##[error]PR Author Checklist is not completely filled out.

All actual CI checks (tests, ESLint, typecheck, Storybook, builds, etc.) are passing. This check only turns green once you (the human co-author) check off the 38 boxes in the PR description and fill in the Tests/QA Steps sections before marking the PR "Ready for review" — those certify testing was actually performed, so I won't check them on your behalf.

There's nothing here I can fix with a push. 👍

[github-actions]

🚧 dubielzyk-expensify has triggered a test Expensify/App build. You can view the workflow run here.

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging by https://github.com/blimpich in version: 9.4.42-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

[MelvinBot]

No help site changes required

I reviewed the changes in this PR against Expensify's help site articles under docs/articles, and no documentation updates are needed.

What this PR changes is purely visual/UX and internal to the App:

• Adds a new location-add.svg asset and swaps the Distance button's icon in the home tab quick‑creation bar from the car icon (CarPlus) to the new map‑pin icon (LocationAdd).
• Reorders the global create / FAB menu so Create report appears before Track distance.

Why no docs change:

• The help articles that cover this flow — Distance-Expenses.md, Create-an-Expense.md, and Free-Features-in-Expensify.md — describe the flow generically as selecting the ➕ Create button and then Track distance. They do not document the specific icon glyph used for the button, nor the exact ordering of items within the create menu.
• The feature name (Track distance), the entry point (➕ Create), and every documented step remain accurate after this change.

Since nothing in the docs references the icon being swapped or the menu order being changed, there's no article to update and I have not created a draft PR.

@dubielzyk-expensify, if you'd like a screenshot or a callout of the new distance icon added to any article, let me know and I can draft that change.

[IuliiaHerets]

Any QA steps here?

cc @blimpich @trjExpensify @dubielzyk-expensify

[dubielzyk-expensify]

Nah, just checking that the icon is correct and the order of the global create menu is right, but I'm not sure that's worth QA steps?

[IuliiaHerets]

@dubielzyk-expensify can we check it off then?

[IuliiaHerets]

Checked off