feat: render initials avatar as default instead of generic icon#672
feat: render initials avatar as default instead of generic icon#672SantiagoSuHe wants to merge 1 commit into
Conversation
When the user has no profile photo, render a colored circle with the username's first letter instead of the bundled grey SVG. Initials and background color are derived deterministically from the username (hash into a 10-color WCAG-safe palette), entirely client-side: no API calls, no image generation, no storage. The username was already available one level above each Avatar usage (desktop, mobile, and Studio user menus); it is now threaded down as a new optional prop. Logged-out surfaces keep the generic icon. Part of the default-avatar work discussed in openedx/openedx-platform#38638 (option 1: local fallback per surface). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
openedx-webhooks
added
open-source-contribution
|
Thanks for the pull request, @SantiagoSuHe! This repository is currently maintained by Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review. 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. 🔘 Update the status of your PRYour PR is currently marked as a draft. After completing the steps above, update its status by clicking "Ready for Review", or removing "WIP" from the title, as appropriate. Where can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources: When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
2 participants
Description
When a user has no profile photo, the header currently shows a generic grey silhouette (a bundled SVG). This PR replaces that fallback with a personalized initials avatar: a colored circle with the username's first letter, rendered entirely client-side.
This preserves the exact economics of today's default avatar: zero API calls, zero server compute, nothing generated or stored. The username is already available in every MFE from the decoded JWT cookie (
authenticatedUser.username) — nohydrateAuthenticatedUserneeded. The initials avatar is plain HTML/CSS, computationally equivalent to the grey SVG it replaces.How it works
src/avatarUtils.js(new):getInitial(username)returns the uppercased first letter;getAvatarColor(username)hashes the username into a fixed 10-color palette (Paragon light-theme tokens, WCAG-safe with white text — same palette reviewed in feat: generate initials avatar as default profile image openedx-platform#38638). Deterministic: same username → same color everywhere, nothing persisted.src/Avatar.jsx: the render logic gains a middle branch — photo URL →<img>(unchanged); no photo but username present → initials circle; neither (logged out) → the generic icon, unchanged.DesktopUserMenuToggle/MobileUserMenuToggle/ studio-headerUserMenu: thread the username (already in scope at each call site) down to the avatar render.Every MFE that consumes this package inherits the new default via its normal dependency bump — no per-MFE changes.
Screenshots
adminon the brand color)Context
This is a draft / proof of concept supporting the discussion in openedx/openedx-platform#38638 (see the update comment) about moving default-avatar generation from the server to the client. It implements "Option 1" (local fallback at each avatar surface) for the header — the surface that covers the most MFEs at once.
Related community thread: Profile Avatar Modernization.
Tests are intentionally not updated yet — pending community feedback on the direction before investing in full coverage.
🤖 Generated with Claude Code