[$1000] Update Concierge icon

[shawnborton]

Note: This issue is part of the greater Implement Our New Branding in NewDot project.

What is it:
Replace the Concierge bell icon with a new icon

Does it require a mini design doc:
No

Design finished:
Maybe?

cc @GabiHExpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0115bd027f7f77fe7b
• Upwork Job ID: 1600615237124608000

[melvin-bot]

Auto-assign attempt failed, all eligible assignees are OOO.

[mountiny]

For completeness, we would like to show this new icon for Concierge only in NewDot and leave the current Concierge avatar in other platforms.

[NikkiWines]

@shawnborton could you link/post the svg format of the new concierge icon?

[shawnborton]

Can do! Is it better to have it with or without the roundedness?

[NikkiWines]

Hmmm with roundedness for now, I think! That might change with the broader default icon application though 🤔

[NikkiWines]

Actually, @shawnborton I think I can just use the one you sent earlier if that's fine by you. We'd need to add it to web-static

Large Concierge Icon (png)

[NikkiWines]

And then for implementation, I think it's fairly simple.

For now, we'd just make a new const CONCIERGE_ICON_URL: ${CLOUDFRONT_URL}/images/concierge_2022.png in CONST.js
and then we can just add the following few lines in this _.each statement:

if (login == CONST.EMAIL.CONCIERGE) {
    personalDetail.avatar = CONCIERGE_ICON_URL
}

That way we'll only update the avatar in NewDot. Once we consolidate the icons between oldDot and newDot we can remove that code and simply update the avatar stored in concierge@expensify.com's expensify_personalDetails NVP.

[shawnborton]

Let's use an .svg instead to it retains the crisp quality we want.

Here you go:
ExpensifyConciergeIcon 2.svg.zip

[shawnborton]

(I uploaded a new version above to fix the weird star

[NikkiWines]

Oh and if we also want to update the Help Site we'd just need to update this icon.

It looks like it's not quite the same as the current concierge icon (more blue padding) so not sure if we'd want an alternative new icon as well

[mountiny]

Nice solution!

[JmillsExpensify]

Wow, nice progress on this in such a short amount of time @NikkiWines. This is super exciting!

[NikkiWines]

Thanks everyone 😊

@shawnborton did we want to also update the Help Site or shall we leave that concierge icon as is?

[NikkiWines]

Also, it looks like we're unable to render svgs for iOS and Android apps (works fine on web, desktop, and mweb) so we'll need to use the png version of the icon. Is the one from this comment ok?

[shawnborton]

We use a lot of svgs for both iOS and Android. All of our one-color icons are svgs, as well as things like room icons and default profile pictures.

[shawnborton]

As for the help site, let's leave that alone for now and tackle that one separate from these NewDot updates.

[JmillsExpensify]

Out of curiosity, why not update the Concierge icon on the help site as well?

[JmillsExpensify]

Only reason I ask is that this new help site is exclusively focused on NewDot, where we're updating Concierge.

[shawnborton]

Ah good point, is the help site baked into the App repo?

[mountiny]

is the help site baked into the App repo?

Yes

[NikkiWines]

We use a lot of svgs for both iOS and Android. All of our one-color icons are svgs, as well as things like room icons and default profile pictures.

Sorry, I was unclear here. There are two problems with svgs. For the ios app and android app specifically there's a problem using svgs from a remote resource (like cloudfront, if we pull the icon from https://d2k5nsl2zxldvw.cloudfront.net/images/icons/concierge_2022.svg). If we change that to an png, it works across all platforms.

If we keep the image local to the /assets/ folder (which we definitely can do) that works better but there's a small problem with displaying svgs in full format (across all platforms), like so:

Screen.Recording.2022-11-03.at.15.46.05.mov

Though, this same issue exists for the fallback avatars, so maybe it's ok?

Screen.Recording.2022-11-03.at.16.01.20.mov

[shawnborton]

Oh wow, do you know why we can't show the full svg image in the attachment modal? Maybe that's a separate problem we can fix?

[NikkiWines]

I believe it's a limitation of react native, we might be able to get around it by using SvgComponent from the react-native-svg library, but I personally think that's a separate issue from this one.

As an aside, the current icon we're using for concierge is also a png.

[JmillsExpensify]

Circling back on the SVG convo above, we're going to work on that on in #12658.

[mananjadhav]

@JmillsExpensify @NikkiWines Can anyone of you help me the Upwork payment here? It's hit production and completed the 7 days regression period.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0115bd027f7f77fe7b

[JmillsExpensify]

Sure thing. Upwork job is immediately above.

[melvin-bot]

📣 @mananjadhav You have been assigned to this job by @JmillsExpensify!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[JmillsExpensify]

@NikkiWines Not sure why this wasn't closed but I'm going to do so once @mananjadhav is paid out. Cool?

[NikkiWines]

Yeah not sure why it didn't close, since #12425 references this issue. But yes that sounds good 👍

[NikkiWines]

Also weird that this issue suddenly showed up here...

[JmillsExpensify]

Hmm, yeah that's super odd.

[JmillsExpensify]

Also invitation sent for @mananjadhav. I suspect he'll accept shortly and we can close this out.

[mananjadhav]

Accepted @JmillsExpensify

[JmillsExpensify]

Thanks, I just sent you the offer. Accept there and I'll pay you out now.

[JmillsExpensify]

Alright, all paid out! Thanks ya'll, I'm closing this one.