[Workspace feeds] Card art on card details page looks a bit smaller than the mockups

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number:
Reproducible in staging?: needs reproduction
Reproducible in production?: needs reproduction
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @joekaufmanexpensify
Slack conversation (hyperlinked to channel name): quality

Action Performed:

Prerequisite:
Members and company cards added in workspace , 8+ export options for card

1. Go to staging.new.expensify.com
2. Choose the workspace from settings
3. Click company cards >Card Details

Expected Result:

Card art on the card details should match the mocks

Actual Result:

Card art on card details page looks a good bit smaller than the mockups, and compared to analogous pages for Expensify Card.

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

 

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @Julesssss (AutoAssignerNewDotQuality)

[melvin-bot]

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

[m-natarajan]

BZ team member, Callstack will work on this issue, please wait for them to comment before moving the issue forward.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[mountiny]

Handling this as part of the project I have worked on

[waterim]

Hello, Im Artem from Callstack and would like to help with this issue!

[mountiny]

assigned, thanks

[waterim]

@mountiny Here is an issue with exported SVGs we have
It has sizes defined in svg itself for icons(for selections list, list of cards etc.)
and all of the cards have size: viewBox="0 0 40 40"
While expensify card has viewBox="0 0 235 148"

And I cant just change the size with ignoring aspect ratio because svg is not optimized for this scale and looks like this:

I think we need to devide icons company cards and full big card images with another aspect ratio

Some designer is needed here for exporting all correct card images

[waterim]

I need: Amex, BOA, CapitalOne, Chase, Citibank, WellsFargo, BrexCompany, Stripe, Other

[melvin-bot]

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

[mountiny]

👋 any chance you could help with the request above? @dannymcclain thanks!

[dannymcclain]

Absolutely. I'll upload the updated card SVGs here once I get a chance to make them! We can't be showing squish squashed cards in the app 😂

[mountiny]

@dannymcclain friendly bump

[dannymcclain]

Getting to this today!

[dannymcclain]

Alright let's try these:

Card Images - Large.zip

[allgandalf]

@waterim do you think you can get the PR up for review today ?