Skip to content

fix: give each assignee avatar its own color - #466

Open
Mario-Mohar wants to merge 1 commit into
anoopcodehack:mainfrom
Mario-Mohar:fix/unique-avatar-colors
Open

fix: give each assignee avatar its own color#466
Mario-Mohar wants to merge 1 commit into
anoopcodehack:mainfrom
Mario-Mohar:fix/unique-avatar-colors

Conversation

@Mario-Mohar

Copy link
Copy Markdown
Contributor

What

Derives the assignee avatar colour from the assignee's name instead of hardcoding bg-purple-700.

Adds an AVATAR_COLORS palette and a getAvatarColor(name) helper next to the existing getTagColor, in the same style.

Why

Every avatar circle was the same purple, so on a board with several assignees the badges were indistinguishable and the colour carried no information.

One deviation from the suggestion in the issue: the hash sums every character of the name rather than using charCodeAt(0). With only the first character, any two names sharing a first letter β€” Bea and Ben, Anna and Alex β€” still collide, which is the common case on a small team and exactly what the issue is about. Summing the whole string costs one extra line and avoids that.

Frontend only, no backend changes. With a fixed palette collisions are still possible for enough distinct names; the goal here is distinguishability, not uniqueness.

Testing

Ran the board locally with six assignees chosen to cover the whole palette β€” Bea, Ben, Vera, Amir, Anna, Maja β€” and each avatar rendered a different colour. Bea and Ben share a first letter and still come out purple vs. blue, which is the case the wider hash is for. No console errors.

Closes #109

Every avatar circle was hardcoded to bg-purple-700, so a board with
several assignees showed identical badges and the colour carried no
information.

Derive the colour from a small hash over the whole name rather than just
its first character, so that names sharing a first letter still get
different colours, and pick from a fixed palette in the same style as
the existing tag colours. Frontend only.

Closes anoopcodehack#109
@Mario-Mohar

Copy link
Copy Markdown
Contributor Author

Hi @anoopcodehack β€” friendly nudge on this one too, in case it got buried.

TaskCard.jsx has changed since I opened this (#473 and #475 both touched it), so I re-checked against current main: the PR still merges cleanly, and the fix is still needed β€” the assignee avatar is still hardcoded to bg-purple-700, so every avatar renders the same colour.

It adds an AVATAR_COLORS palette and a getAvatarColor(name) helper right next to the existing TAG_COLORS/getTagColor, following the same pattern, and closes #109.

One thing worth your eye, since it deviates from the issue: I sum every character of the name rather than using charCodeAt(0). With only the first character, names sharing a first letter β€” Bea and Ben, Anna and Alex β€” still collide, which is the common case on a small team. Happy to switch it to the literal suggestion if you prefer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

All user avatars show same purple color β€” make each one uniqueπŸ”΅

1 participant