GlAvatar: Identicon fallback inconsistent with GitLab implementation
What/Why
Found as part of gitlab!62419 (merged)
The classes and colors used for the identicon
component in GitLab are different than here in GitLab UI. I am unclear on which is correct so part of this issue if determining where to fix this.
GitLab UI does its class calculations in the avatar.vue file.
GitLab does its class calculations in the avatar_helper.js file.
Examples of inconsistencies
Background color
- GitLab UI class
.gl-avatar-identicon-bg7
=>#bfbfbf ($gray-200)
- GitLab class
.identicon.bg7
=>#eee ($identicon-gray)
Font color (Single Letter)
- GitLab UI class
.gl-avatar-identicon
=>#303030 ($gl-text-gray-900)
- GitLab class
.identicon
=>#525252 ($identicon-text-color)
Screenshot
GitLab | GitLab UI |
---|---|
![]() |
![]() |
Proposal
I would like to determine which color set is correct so that we can update the other to match the styles. There is a huge upside in depending on GlAvatar
to handle the identicon
fallback as it really cleans up the template. However, until we clean up the old usages of identicon
we want to be sure to keep these color patterns inline as they help users identify their projects/groups at a glance.
cc/ @nickbrandt