[$125] Add drop shadow for floating buttons

[roryabraham]

https://expensify.slack.com/archives/C03TME82F/p1769921519602669

Problem

quick scan button overlaps with create expense on empty report page. Since they are the same color it looks a bit wonky

Solution

Add a drop shadow on the floating buttons.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022018386157046803969
• Upwork Job ID: 2018386157046803969
• Last Price Increase: 2026-02-02

Issue Owner

Current Issue Owner: @cristipaval

[melvin-bot]

Triggered auto assignment to @dannymcclain (Design), see these Stack Overflow questions for more details.

[daledah]

Proposal

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

Actual Result:
The quick scan button overlaps with the "Create expense" button on the empty report page. Since both buttons are the same green color, the visual overlap creates a confusing and wonky appearance.

What is the root cause of that problem?

The floating action buttons (quick scan button and floating action button) lack visual depth indicators like drop shadows. When these buttons overlap with other UI elements of the same color, there's no visual separation to distinguish them from the background content. This makes it difficult for users to understand the layering and hierarchy of interactive elements.

App/src/styles/index.ts

Line 1644 in bfc6781

floatingActionButton: {

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

Add drop shadow styles to the floating action buttons to create visual depth and separation. This will help distinguish the floating buttons from background content, especially when they overlap with other elements of the same color.

--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1644,6 +1644,7 @@ const useThemeStyles = (): UseThemeStylesReturn => {
         floatingActionButton: {
             backgroundColor: theme.success,
             height: variables.componentSizeLarge,
             width: variables.componentSizeLarge,
             borderRadius: 999,
             alignItems: 'center',
             justifyContent: 'center',
+            boxShadow: theme.shadow,
         },
 
         floatingActionButtonSmall: {
             width: variables.componentSizeNormal,
             height: variables.componentSizeNormal,
+            boxShadow: theme.shadow,
         },

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.

[abbasifaizan70]

Proposal

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

Quick scan button overlaps with create expense on the empty report page. Since they are the same color (green/success), the overlap looks wonky and the buttons lack visual separation.

What is the root cause of that problem?

The floating action buttons (FABs)—quick scan (camera/receipt) and create expense (plus)—share the same floatingActionButton style, which does not include a drop shadow. Without elevation, when they stack or overlap on the empty report view, they blend into each other and the background.

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

Add the existing theme drop shadow to the floatingActionButton style so both FABs get consistent elevation and visual separation, matching shadow usage elsewhere in the app (e.g. modals, search header).

Change 1 – Floating action button style

Location: App/src/styles/index.ts

App/src/styles/index.ts

Lines 1644 to 1651 in 46fd8df

	floatingActionButton: {
	backgroundColor: theme.success,
	height: variables.componentSizeLarge,
	width: variables.componentSizeLarge,
	borderRadius: 999,
	alignItems: 'center',
	justifyContent: 'center',
	},

Update: Added boxShadow: theme.shadow to the floatingActionButton style.

floatingActionButton: {
    backgroundColor: theme.success,
    height: variables.componentSizeLarge,
    width: variables.componentSizeLarge,
    borderRadius: 999,
    alignItems: 'center',
    justifyContent: 'center',
    boxShadow: theme.shadow,
},

---

What alternative solutions did you explore? (Optional)

Alternative 1 – Shadow only on report view FABs

• Rejected because the same overlap can occur in the sidebar; applying shadow in one place would be inconsistent.

Alternative 2 – Different colors for quick scan vs create expense

• Rejected because it would change the product’s visual language; a shadow is a minimal, consistent fix.

Demo

---

---

---

[daledah]

this is the result of my proposal

[dannymcclain]

Nonsensical mock just to show general expectations:

The floating buttons should just use our default drop-shadow 👍
cc @Expensify/design

[melvin-bot]

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

[melvin-bot]

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