[$1000] Make background color of image previews in chat match dark app BG color

[shawnborton]

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

---

Action Performed:

When viewing an image preview/thumbnail tile in chat, the background of the tile is white. You can see this when there is transparency of the image in the preview. We should make this color match the dark BG of the app instead of using white.

Expected Result:

Image preview thumbnail area should use dark app background color.

Actual Result:

Image preview thumbnail area uses white background.

Workaround:

No workaround needed.

Platform:

Where is this issue occurring? All platforms

Version Number: Reproducible in staging?: Reproducible in production?: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation Expensify/Expensify Issue URL: Issue reported by: Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01eb0a8e777b226bf9
• Upwork Job ID: 1597734936355745792

[melvin-bot[bot]]

Triggered auto assignment to @Christinadobrzyn (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[Christinadobrzyn]

Ah interesting! Testing this:

1. Sign into https://staging.new.expensify.com
2. Open a chat that's in dark mode - the text is not white
3. Click on your profile > the text is white

The text in the profile should match the dark BG of the app instead

Another interesting note - is this expected @shawnborton @grgia

5. When you open the profile, the text in the chat gets darker
6. When you close the profile, the text in the chat gets lighter

[shawnborton]

Another interesting note - is this expected @shawnborton @grgia

5. When you open the profile, the text in the chat gets darker
6. When you close the profile, the text in the chat gets lighter

That is expected - it's the overlay color showing up on top of the content behind the rightDocked side pane.

As for the original bug reported, the way to test it is to upload a PNG that has transparency in it. Here is a sample image you can use to test (save to your computer and try uploading it in NewDot):

[Christinadobrzyn]

Awesome! thank you @shawnborton - I do see how white the text is what that image. I think this can be an external job so adding all the labels.

[melvin-bot[bot]]

Current assignee @Christinadobrzyn is eligible for the External assigner, not assigning anyone new.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (External)

[melvin-bot[bot]]

Current assignee @grgia is eligible for the External assigner, not assigning anyone new.

[0xmiros]

I think this should be fixed in backend. After we upload transparent image on frontend, it's converted in backend and back to frontend with white background. before sending attachment: after receiving from backend:

[shawnborton]

I disagree with that approach. We don't need to manipulate the image in any way, we just need to quickly update the background color of the image thumbnails, and I think @grgia is on it.

[0xmiros]

You can see image is transparent on attachment detail page.

https://user-images.githubusercontent.com/97473779/204677804-77e0e1a6-525f-46ee-9625-fc2c0a82de70.mov

The issue is that original image keeps transparency but thumbnail image (1024) turns background to white. Because png is converted to jpg and jpg doesn't support transparency.

original:

https://www.expensify.com/chat-attachments/9182220870934472202/w_05a8f7c6fd968bac520f78c2d2fa5ec8e0c22a2a.png?encryptedAuthToken=qq%2FOQxPYBOwvwgSi9CoRRJ6ePWXKNRq8mClm7kibdxefKvsGnhrZZFetckqiqFinRLkIMW7PteOvhCpmt0Vyk0yDlK72rbLoTqnq32tBcvJSb7l2nGpj6fwnddGR2iUji6OEAnt6qKf8NCeIkYg%2FRG6ko32fNu8yaJ6VmXfwivTMjFfTyW8OlyQc%2BNnWDRMGdFxyaitehebbn6eNJMjhmAfDqesELjMRCIpOUYjFvvP1uYHX3Z3cYx87k7sbLM81Bhl5iWUtqTO5E8H9%2BRoNO1LObsb1dbBTwMUnER2DQLoMfvDoBg4I82vJa9QNEL9vvxeH%2F1iHrP97OLAxUD55%2B8Gi1Gab6qjQIj6sxhbdBlZyzMGClw50xv4CcvKD1epbMfxjB9OMiC4PkTrfVc8C2bXahZ0Ka2egvASQP%2FNry0whqdKagQKUFnowal%2FHkb2MA0KMl8muNLzxvSe6fTcSJnl0OEl3PQ9aCMgFeufksjF7om%2F0KR%2Fu6M7GVq2nClHFdVXMiDtr31Bp4wIHzK3S8trVWFYLYtjAVJ9mgWWuEZ8XGSkWzTXjTDpP9F3K7z%2BGpx3cGOqqUkkGlhIGehfEgpVmnPjm2YIuYkT9xbzqrshE3TBpkFGZELlsK9I4qmJOW6rzdA6JU9ysCnFRFdPEEj%2F8wbYVR8qIjoCZAtRQ5B9rAWKwBsT4NbtopD9CniB4KaMrsNfG13MiraSJwK91THdlnIT2rXIUuntUvzo6zE%2BzK7eOTRmoPWKWWiiAZPdZY5vIc3tcaoPGBUxWTIEKZXduOPuFFBv6bwMJSLgaqaE6UCLNOB3X24d9D5i%2BEmj6jV2L%2FTPQQ188wuBAjzjRV%2BUyuKo%2BxO0sumbY3%2Fd%2FYc9de7PWW1UnBcI%2BKMKYXcRB0NnPPp19yfoOT0YcyKMVSsVHt8K7XcVL0VG9C6FmaHl3nPYpJ3Db2hcCXEpQ29sFtTE3oVVuzWvYbTLsWW8msQ%3D%3D

thumbnail:

https://www.expensify.com/chat-attachments/9182220870934472202/w_05a8f7c6fd968bac520f78c2d2fa5ec8e0c22a2a.png.1024.jpg?encryptedAuthToken=qq%2FOQxPYBOwvwgSi9CoRRJ6ePWXKNRq8mClm7kibdxefKvsGnhrZZFetckqiqFinRLkIMW7PteOvhCpmt0Vyk0yDlK72rbLoTqnq32tBcvJSb7l2nGpj6fwnddGR2iUji6OEAnt6qKf8NCeIkYg%2FRG6ko32fNu8yaJ6VmXfwivTMjFfTyW8OlyQc%2BNnWDRMGdFxyaitehebbn6eNJMjhmAfDqesELjMRCIpOUYjFvvP1uYHX3Z3cYx87k7sbLM81Bhl5iWUtqTO5E8H9%2BRoNO1LObsb1dbBTwMUnER2DQLoMfvDoBg4I82vJa9QNEL9vvxeH%2F1iHrP97OLAxUD55%2B8Gi1Gab6qjQIj6sxhbdBlZyzMGClw50xv4CcvKD1epbMfxjB9OMiC4PkTrfVc8C2bXahZ0Ka2egvASQP%2FNry0whqdKagQKUFnowal%2FHkb2MA0KMl8muNLzxvSe6fTcSJnl0OEl3PQ9aCMgFeufksjF7om%2F0KR%2Fu6M7GVq2nClHFdVXMiDtr31Bp4wIHzK3S8trVWFYLYtjAVJ9mgWWuEZ8XGSkWzTXjTDpP9F3K7z%2BGpx3cGOqqUkkGlhIGehfEgpVmnPjm2YIuYkT9xbzqrshE3TBpkFGZELlsK9I4qmJOW6rzdA6JU9ysCnFRFdPEEj%2F8wbYVR8qIjoCZAtRQ5B9rAWKwBsT4NbtopD9CniB4KaMrsNfG13MiraSJwK91THdlnIT2rXIUuntUvzo6zE%2BzK7eOTRmoPWKWWiiAZPdZY5vIc3tcaoPGBUxWTIEKZXduOPuFFBv6bwMJSLgaqaE6UCLNOB3X24d9D5i%2BEmj6jV2L%2FTPQQ188wuBAjzjRV%2BUyuKo%2BxO0sumbY3%2Fd%2FYc9de7PWW1UnBcI%2BKMKYXcRB0NnPPp19yfoOT0YcyKMVSsVHt8K7XcVL0VG9C6FmaHl3nPYpJ3Db2hcCXEpQ29sFtTE3oVVuzWvYbTLsWW8msQ%3D%3D

[shawnborton]

Ahh interesting... I wonder if we should just do nothing here then?

[0xmiros]

I wonder why png image cannot keep original format and converted to jpg in compression

[shawnborton]

Yeah, I'm leaning towards just closing this one though... I would imagine this is a bit of an edge case anyways and we can revisit later. Thoughts @JmillsExpensify ?

[JmillsExpensify]

Ah yeah, I think we should get through all the imaging and visual brand updates first. I agree with you. Let's close it out. We can circle back on this kind of polish.

[Christinadobrzyn]

Sounds like a plan. I closed the Upwork job and close down this GH. We can revisit this later.

@JmillsExpensify or @shawnborton do you happen to know if we have any tracking GHs related to this that I should add this to so it's reconsidered in the future?

[0xmiros]

Hope I'd be the first candidate to work on this GH when re-opened in the future. Since I identified the exact root cause and proposed solution. 🙏

[shawnborton]

Sounds good, closing the issue now.