UI: Add Avatar component

[BartoszJarocki]

Issue - Enhancement

Add an avatar component that renders either user picture or a fallback with user initials (styled html). This will allow us to stop using generated images for avatars like BJ, JH, GB.

Acceptance Criteria

• preferably uses Avatar – Radix UI
• can be styled with tailwind, including size
• can replace all current Avatar occurrences
• can be composed with other elements, like button

[mattkrick]

Questions:

• Can User.picture, User.rastorPicture be nullable in GQL now? What about picture in PG table User? Do we just make it an empty string?
• Will HTML avatars render correctly in HTML4 (emails)?

[BartoszJarocki]

Can User.picture, User.rastorPicture be nullable in GQL now? What about picture in PG table User? Do we just make it an empty string?

@mattkrick yes, I'd make them nullable. I'd also add a initials field to user gql type that'd provide a fallback content (ie. MK). regarding pg, I'd make it nullable, but `` would work too. regarding old users, that'd still have URL like https://action-files.parabol.co/static/avatars/ba.png set, there are two options that I see

1. remove the generated avatars, this would make request for https://action-files.parabol.co/static/avatars/ba.png return 404 and make component render a fallaback. downside - unnecessary request
2. migration to replace https://action-files.parabol.co/static/avatars/* with either null or ``. downside - migration 🙃, but it's cleaner than 1.

Will HTML avatars render correctly in HTML4 (emails)?

this is actually a very good question, as for now we don't have a way to render tailwind css components in emails. will figure it out!

[jordanh]

Scrubbed. Added to Land & Expand

[github-actions]

Stale issue