Add drag/drop for receipt empty state

[JmillsExpensify]

If a Collect or Control policy is configured with any receipt-related category violation, we’ll update the confirmation screen for manual requests and include a receipt empty state. Tapping the empty state brings up the camera (mobile) or file picker (web). For web, we’ll support drag/drop.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e09455d07e462ca6
• Upwork Job ID: 1704005352336375808
• Last Price Increase: 2023-09-19

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @aimane-chnaif (Internal)

[cead22]

No update from me, focused on detailed design for Wave 9: Violations

[JmillsExpensify]

Still working through the detailed design for Wave 9.

[JmillsExpensify]

Still working through the detailed.

[JmillsExpensify]

Still focused on violations implementation first.

[cead22]

Still on HOLD, but Infinite Red started on App#30663

[cead22]

App#30663 is merged so this is off hold. @cdanwards @trevor-coleman can you comment here so I can assign you?

[cdanwards]

Commenting for assignment

[JmillsExpensify]

Waiting on PR

[cead22]

@cdanwards any updates on this?

[cead22]

@cdanwards is working on a couple of other items for violations. This is in the queue, but not being worked on yet

[JmillsExpensify]

All good, I think it's lower priority.

[cead22]

This is in the queue, but not being worked on yet

[JmillsExpensify]

Still not at the top of the priority list.

[cdanwards]

Beginning work on this.

[shawnborton]

One small design bug to fix while we're here:

• let's update the border color of the thumbnail area to use our colors.border value
• let's update the background color of the thumbnail area to use our colors.highlightBG value

[cead22]

@cdanwards please tag @Expensify/design in the PR when you create it

[shawnborton]

Also, the border should not be 2px like it is here:

Just 1px stroke for the border.

[shawnborton]

Also it looks like the image is cut off - I wonder if we need to get you a better image for that? Can you share the image that you are currently using please? Thanks!

[cdanwards]

@shawnborton sorry this got lost in my GH notifications. This one has already been merged, but here is the svg that we're using for this component

[shawnborton]

Interesting, the svg itself seems fine as we can see the borders:

Any idea why it might be getting cut off?

[cdanwards]

@shawnborton I'm honestly not sure. It's the right side that you're referring to, correct? There was some difficulty in having the svg display colors correctly, so that could be part of the issue.

[shawnborton]

Exactly, see how the 1px stroke is slightly cut off?

[cdanwards]

@shawnborton I found the issue. Going to put together a little PR with a fix for that and also the other corrections you mentioned.

[shawnborton]

Amazing, thanks! Feel free to tag me in the PR for review.

[cdanwards]

@shawnborton does this look right for the border width and color you mentioned above? The border looks very faint with the combination of those styles. I'm using these values:

  backgroundColor: colors.highlightBG,
  borderColor: colors.border,
  borderWidth: 1,

[shawnborton]

I think something is happening here, there is actually no BG color being shown at all. If there was, we wouldn't see the illustration come through.

[cdanwards]

There we are. Got the right values!