Split members to contributors & watchers in the side panel - UI only

[chinins]

Description

This PR splits members in the side panel into contributors & watchers.

New stuff ✨

• add MembersSubsection file to generalise code
• show the caret icon with link to the members page as the last "avatar" when there are more than 15 members in the subgroup
• add tooltips

TO DO
I have a warning in my terminal (screen shot below) and I don't understand the reason for it. I know that it's coming from this line (line 57 in ColonyMembers.css):
background-color: color-mod(var(--action-secondary), alpha(12%));
But I use it exactly the same as in other places. I'll keep investigating but I ran out of ideas for now. Maybe somebody knows why I have the warning?

Resolves #3378

[dit7ya]

That comma is extra and is what causes the invalid color adjuster error.

[dit7ya]

Maybe extract the constant out somewhere or set as a default since it is used twice?

[rdig]

Yeah, the default value 12 should be a const, but I like the approach of having the number of avatars configurable via props

[dit7ya]

Looks good to me! Left some optional notes.

[arrenv]

Looking good @chinins

The margin above the "Watchers" needs to be reduced by 10px, as it has been done with the "Enabled extensions" heading, due to the margin under each avatar.

Also, it looks like you added in the carets, however, after consolidating the designs into the one spec, it was confirmed that the numbers was the correct approach, i.e. what was already in the DApp. This is my fault, so, my apologies for not knowing about the extra designs before handing it off.

See the spec here - https://www.figma.com/file/qQoBbyyDXkuHwoqHIOGjEu/Colony-Simplified?node-id=6736%3A91869

[rdig]

I have a warning in my terminal (screen shot below) and I don't understand the reason for it. I know that it's coming from this line (line 57 in ColonyMembers.css):
background-color: color-mod(var(--action-secondary), alpha(12%));
But I use it exactly the same as in other places. I'll keep investigating but I ran out of ideas for now. Maybe somebody knows why I have the warning?

@chinins remove the the colon , between the color and the alpha, and your warning should go again.

From this:

background-color: color-mod(var(--action-secondary), alpha(12%));

To this

background-color: color-mod(var(--action-secondary) alpha(12%));

[rdig]

Left some comments, but this is some good work here! 💯

[rdig]

Yeah, the default value 12 should be a const, but I like the approach of having the number of avatars configurable via props

[ArmandoGraterol]

Question: I see that members with no rep are included in the contributor's section. Is that intentional? From what I understood, the contributors was supposed to be only for admin and members with rep.

[chinins]

Question: I see that members with no rep are included in the contributor's section. Is that intentional? From what I understood, the contributors was supposed to be only for admin and members with rep.

It's a UI only issue - says in the PR title :)

[ArmandoGraterol]

It's a UI only issue - says in the PR title :)

My bad! I didn't interpret it that way

[ArmandoGraterol]

Looking great! I think the others already pointed out the things that perhaps need a change so I'm just going to approve as everything else looks good to me

[chinins]

Looking good @chinins

The margin above the "Watchers" needs to be reduced by 10px, as it has been done with the "Enabled extensions" heading, due to the margin under each avatar.

Also, it looks like you added in the carets, however, after consolidating the designs into the one spec, it was confirmed that the numbers was the correct approach, i.e. what was already in the DApp. This is my fault, so, my apologies for not knowing about the extra designs before handing it off.

See the spec here - https://www.figma.com/file/qQoBbyyDXkuHwoqHIOGjEu/Colony-Simplified?node-id=6736%3A91869

@arrenv, I've updated it. Please, have a look and give your blessing for me to merge :)

[arrenv]

Looks good to me, nice one!