[HOLD for payment 2023-03-14] Implement better default avatars

[shawnborton]

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

What is it:

• Add a wider variety of default avatars in the app for users
• Use the first initial/number from the workspace name as the default workspace title along with a random color pairing

Does it require a mini design doc:
Yes

Design finished:
Yes

cc @GabiHExpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01136d72ed85b4e6cf
• Upwork Job ID: 1625441221891223552
• Last Price Increase: 2023-02-14

[melvin-bot]

Everybody was OOO, so I assigned the only eligible person.

[shawnborton]

Just a heads up that I updated the original comment with a new mockup. Rather than build an avatar picker, we can just use random avatars instead as the v1 implementation of this.

• For users, we'll use one of 24 random avatars
• For workspaces, we'll use the first initial or number from the workspace name, and use that in one of our 16 colorways

[JmillsExpensify]

Woo! Thanks Shawn. ❤️

[grgia]

Do we have the files ready for this?

[shawnborton]

The characters, yes. For the default workspace avatars, how do you think we should handle those? We could essentially just create an avatar for each starting letter of the alphabet/numbers, or we could do it dynamically via text. If we go the dynamic route, we'd need to wait until New Kansas is available though.

[grgia]

I looked into implementing this. For the random avatar, it'll be a two-part PR- one in web-static to host the new images, and then one in App (ReportUtils).
I have to look into our system a bit more. But for workspaces, I thought about using an SVG and using fill for the background and then color for the foreground/letter. That would solve needing about 500 files for all the combinations. I'd have to look into how avatars are stored, because I'm pretty sure avatar image types don't allow svgs currently.

[shawnborton]

Yeah, I was thinking that instead of doing all color combinations with each starting letter, we would just assign one color combo for A, one color combo for B, one color combo for C, etc etc... this way we'd only end up with like 26 alphabetical workspace avatars and then 10 numerical ones?

Agree that I don't think we support SVGs as avatars right now, @NikkiWines looked into this briefly for the new Concierge icon and we ended up going with a PNG instead.

[grgia]

That makes it easy! Although looking at it right now I think the current workspace icon might be an SVG

[shawnborton]

Oh sweet, that would be rad.

[grgia]

Could I get the files for the default avatars? And then after that, if you want to send the workspace files along with an example letter SVG I could test out the random color idea :)

[shawnborton]

For sure! For the workspace files, what exactly are you looking for there? Do you want SVGs that are like black/white with just black for the BG and white for the letter? I could give you those for A-Z/0-9 and then maybe you can just change the colors programmatically? Or were you thinking to just have pre-colored SVGs, where A just gets one color pairing, B gets a different one, etc etc?