App icon indicating copy to clipboard operation
App copied to clipboard

App icon on Old Expensify don't support dark mode

Open m-natarajan opened this issue 1 year ago • 18 comments

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!


Version Number: 9.0.50.6 Reproducible in staging?: Yes Reproducible in production?: 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: @dubielzyk-expensify Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1729202799742179

Action Performed:

  1. Find Old Expensify on your homescreen
  2. Change to dark mode

Expected Result:

See the Old Expensify icon change to be dark mode compliant

Actual Result:

Icon still has white background color

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

image

image (1)

https://github.com/user-attachments/assets/0dd7d5c8-dae4-499f-b1c2-a2095ec97e3c

View all open jobs on GitHub

m-natarajan avatar Oct 18 '24 13:10 m-natarajan

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

melvin-bot[bot] avatar Oct 18 '24 13:10 melvin-bot[bot]

Hey @dubielzyk-expensify can you remind me what we need to do here? The linked thread doesn't contain your solution. Which I think is to provide a dark mode icon for OldDot?

Julesssss avatar Oct 21 '24 12:10 Julesssss

According to their documentation we need to provide a dark mode asset. Light mode and tinted mode is working well already so here's the dark mode variations:

app-icons-dark.zip

That should give us this look on mobile: image

cc @Expensify/design

dubielzyk-expensify avatar Oct 22 '24 04:10 dubielzyk-expensify

Looks good to me 👍

shawnborton avatar Oct 22 '24 06:10 shawnborton

Thanks Jon.

The icons you shared have the squared edges and I wonder if that is desired or not? We're already using the rounded logo in production, so I'm not sure which is expected.

Screenshot 2024-10-22 at 10 25 49

IMG_809892A6818B-1

Julesssss avatar Oct 22 '24 09:10 Julesssss

Rounded edges would be expected.

shawnborton avatar Oct 22 '24 09:10 shawnborton

Ahh, I just used a Figma file I found but the wrong artboards. My bad! I'll fix

dubielzyk-expensify avatar Oct 22 '24 10:10 dubielzyk-expensify

Here's another go :D app-icons.zip

dubielzyk-expensify avatar Oct 22 '24 10:10 dubielzyk-expensify

@dubielzyk-expensify can I get Dark - App Store.png at 1024x1024 please?

Screenshot 2024-10-23 at 12 11 56

Julesssss avatar Oct 23 '24 11:10 Julesssss

Yes sir 🫡

Dark - App Store.png.zip

dubielzyk-expensify avatar Oct 24 '24 03:10 dubielzyk-expensify

@Julesssss @muttmuure @dubielzyk-expensify this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

melvin-bot[bot] avatar Nov 01 '24 18:11 melvin-bot[bot]

Low priority for now.

Julesssss avatar Nov 04 '24 09:11 Julesssss

Reopening as this wasn't fully implemented. I created a new PR that supports light, dark, and tinted icons here.

Julesssss avatar Dec 03 '24 11:12 Julesssss

Hey @dubielzyk-expensify, the themed icon for Expensify looks a bit odd with the different shades. Should we use the same single shade for themed icons? (to match the NewDot logo) Or is it fine as-is?

IMG_0126 2

Julesssss avatar Dec 03 '24 11:12 Julesssss

Should we use the same single shade for themed icons? (to match the NewDot logo)

My 2 cents is a big yes to this. I think the ND one looks way better IMO.

dannymcclain avatar Dec 03 '24 14:12 dannymcclain

Agree with big yes. Now there'll be no way to differentiate them though. I've made a white version which means the tint will apply fully. We could do a gradient or something else here or even have the outer rings be a bit more faded. Here's a few variations.

CleanShot 2024-12-04 at 13 51 01@2x

If we just want white, then use these: tinted-icon.zip

dubielzyk-expensify avatar Dec 04 '24 03:12 dubielzyk-expensify

Oohh very nice.

Now there'll be no way to differentiate them though

The good news is that we're very close to delisting the New Expensify standalone app, so that won't be a problem. To align with the OS app icons I lean towards solid, but I am NOT-A-DESIGNER

@dannymcclain let us know your thoughts on the icon options and I'll implement.

Julesssss avatar Dec 04 '24 13:12 Julesssss

My vote would be to go flat, since we don't use gradients really anywhere in our brand system.

shawnborton avatar Dec 04 '24 13:12 shawnborton

Agree with flat! I actually also really like the faded outer ring version, but since we're going to be delisting "New Expensify" soon I think it makes sense to just go flat as that most closely represents the latest and greatest iteration of our iconmark. (Jon also knew Shawn and I were going to say flat which is why he went ahead and included the files for that one 🤣)

dannymcclain avatar Dec 04 '24 14:12 dannymcclain

Great, thanks all.

@dubielzyk-expensify, maybe I missed it, but could you please share a 1024x1024 asset? I could only see up to 512x512. FYI, as of iOS 18, we now only need to provide a single asset, which is automatically resized.

Julesssss avatar Dec 04 '24 15:12 Julesssss

(Jon also knew Shawn and I were going to say flat which is why he went ahead and included the files for that one 🤣)

😂 ❤️

but could you please share a 1024x1024 asset? I could only see up to 512x512. FYI, as of iOS 18, we now only need to provide a single asset, which is automatically resized.

Here you go: Tinted - App Store.png.zip

dubielzyk-expensify avatar Dec 05 '24 00:12 dubielzyk-expensify

Thanks all

Screenshot 2024-12-05 at 10 32 21

Julesssss avatar Dec 05 '24 10:12 Julesssss

Awesome work Jules!

dubielzyk-expensify avatar Dec 06 '24 03:12 dubielzyk-expensify