Group-income-simple: Implement new avatar placeholders

[mmbotelho]

Problem

The problem stated in #538.

Solution

There should be 3 different avatar placeholders:

1. For members;
2. For groups;
3. For members that have been accepted (via proposal) into the group but have NOT used their invite link yet.

---

1. For members

We are using Blockies, an identicon generator. You'll need these 2 links:

• Blockies GitHub repository;
• Codepen with the correct configuration.

You will notice, at the bottom of the JS file of the codepen linked above, there are 6 configurable options. These are:

1. seed - a string, that should be unique for each user. This string is what generates the image;
2. bgcolor;
3. color;
4. spotcolor;
5. size - set it to 6;
6. scale - used 12;

Colors
Each user should be assigned one of our colors (blue, orange, red or green). After that, the 3 color options should be:

1. bgcolor - variant 0 (darkest);
2. color - variant 1 (medium);
3. spotcolor- variant 2 (lightest);

Here are some examples of what they look like:

---

2. For groups

For groups, we use the groups initials. We have a minimum of 1 character and a maximum of 2. Here's what they look like:

---

3. Members that have been accepted (via proposal) into the group but have NOT used their invite link yet.

Same as for groups, but with a question mark. Here's an example:

---

Other useful links:

• Figma Design System with specifications;
• Example page with placeholder avatars;

And that's it! I hope I didn't miss anything, but let me know if you have any questions or if you find other cases / issues with this approach!

[sandrina-p]

This will be an interesting technical challenge. I'll research how we can tackle the initials with SVGs/canvas and store it in conjugation with a typical image.

[mmbotelho]

@sandrina-p remember that it needs to scale up to 128px (256px retina), forgot to mention that in the issue itself 🤦