[Search v1] Implement receipt thumbnails

luacmartins commented 2 weeks ago

We need to introduce receipt thumbnails in the search page as part of this section of the design doc

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~016b315a218e715b66
Upwork Job ID: 1788997846845743104
Last Price Increase: 2024-05-10

luacmartins commented 1 week ago

Holding PR is still in review

trjExpensify commented 1 week ago

You going to take this one?

luacmartins commented 1 week ago

Yes, I can work on it now that the holding PR is merged.

luacmartins commented 1 week ago

@Expensify/design could I get the new ReceiptPlus icon exported from Figma? Just wanna make sure I'm using the correct asset

dubielzyk-expensify commented 1 week ago

Here ya go

receipt-plus.svg.zip

luacmartins commented 1 week ago

Thanks @dubielzyk-expensify! For future reference, what are the steps to export these to make sure they are in line with our current icons?

dannymcclain commented 1 week ago

@luacmartins the steps are fairly convoluted for such a simple thing. Honestly it will likely be best to just ask a member of the design team to do it. But I will outline them anyways!

From the Icons page in our Brand Guidelines & Product UI file, select the icon component you want to export
Duplicate it to create an instance of the icon
Set the fill color to #000000
Export that frame as an SVG
Open the exported SVG in Adobe Illustrator
Save As from Illustrator and replace the SVG exported from Figma
In the SVG Options window that opens, make sure that under Advanced Options, the Decimal Places field is set to 3 (it defaults to 1)
Compress your newly updated SVG file to zip it up, and then it's ready for upload to GH. (This step is optional and really only needed if you're uploading/sending the file somewhere.)

I know this seems pretty wacky for simply exporting a small UI icon, but we've found that Figma's exports aren't always reliable. We've found this process to consistently produce the best results. Design team, feel free to add any of your thoughts too! This is the way I do it though.

luacmartins commented 1 week ago

Thanks for listing out the steps. I think I'll keep asking you guys for icons haha

melvin-bot[bot] commented 1 week ago

Triggered auto assignment to @puneetlath (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

puneetlath commented 1 week ago

Will this be handled internally or externally?

luacmartins commented 1 week ago

I'm handling it and have PRs in review

melvin-bot[bot] commented 1 week ago

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

melvin-bot[bot] commented 1 week ago

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

dubielzyk-expensify commented 6 days ago

Yep. Pretty much exactly what Danny said, but feel free to ping us and we'll whip it up for you @luacmartins

Expensify / App

[Search v1] Implement receipt thumbnails #41629