App: [HOLD for payment 2024-03-13] Incorrect spacing and border radius on receipt thumbnail

Sweet, thanks for clearing that up! Also cc @dubielzyk-expensify since you are working on the preview component, this logic should help guide the designs!

@shawnborton fantastic write up! I should be able to get to this one this week

sorry I thought I accepted offer. Just did now

No regression. This is design inconsistency fix. I don’t think regression test is needed here.

Updating PR now

PR in progress!

We’ve basically been calling it the “Preview” component (cc @Expensify/design). But it might better be called the “Expense & Report Preview” component since it is used for both expenses AND reports.

The way I see it is basically this:

• Expense & Preview component
  • Receipt Thumbnail area (only show if thumbnails present)
    • If report: show multiple thumbnails and pagination
    • If expense: only show one thumbnail
  • Eye brow line
    • If report: show “X owes:”
    • If expense: show expense type (Cash, Card, etc)
  • Amount
    • Both report & expense: if paid, show checkmark
    • If split preview, show avatar group “floating” to the right side of this line
  • Merchant/description line
    • If report: I’m not sure what the logic is for the naming here, but sometimes we do something like “4 requests” or “1 request, 1 scanning.” @trjExpensify might know the logic here
    • If expense: Show merchant if one exists, if not, show description
    • If split preview, show price per person “floating” to the right side of this line

And I think that basically covers it?

@dannymcclain totally! I put the Figma link at the very beginning of my comment here

So this is what I’m thinking we should do for the preview cards. As an outline, here is what we have (Figma file so you can inspect):

I’m thinking of this preview component as two parts:

• upper receipt area
• lower information area

When a receipt is present, I have it so that the upper receipt area and the lower info area overlap by -4px, which basically accounts for that inner border stroke (4px) of the receipt area not adding to the height of the lower info area.

The upper receipt area has a border radius of 16px:

And that means the inner receipt area there has a border radius of 12px (16px minus the 4px border):

For the bottom info area, the whole thing has a padding of 16px (vertically and horizontally):

The eyebrow part (XXXX owes:) should use our label font size, with a line height of 16px. It’s in our text supporting color.

The amount is good as it is, which is our h2 size. The merchant/description line below should use our normal text size and use our text supporting color. It should have a line height of 20px.

In terms of spacing, I’m thinking it goes:

• Eyebrow/top line
• 8px gap
• Amount
• 4px gap
• Merchant/description
• 16px gap
• Button

Let me know how all of that sounds! cc @Expensify/design for eyes too.