Fix colour of avatar and colour matching with username #11470

germain-gg · 2023-08-24T14:13:50Z

Checklist

Tests written for new code (and old code if feasible)
Linter and other CI checks pass
Sign-off given on the changes (see CONTRIBUTING.md)

Here's what your changelog entry will look like:

🐛 Bug Fixes

Fix colour of avatar and colour matching with username (#11470). Fixes Letter avatars are all grey element-hq/element-web#26042.

andybalaam

Looks good - happy to merge now if needed quickly but I'd love a couple of tests to help understand the purpose of this code.

Thanks!

andybalaam · 2023-08-24T15:50:58Z

src/components/views/messages/DisambiguatedProfile.tsx

@@ -40,7 +40,7 @@ export default class DisambiguatedProfile extends React.Component<IProps> {

        let colorClass: string | undefined;
        if (colored) {
-            colorClass = getUserNameColorClass(fallbackName);
+            colorClass = getUserNameColorClass(mxid ?? "");


Is there a test for this? I'd love to see one if not. Happy for you to merge and add it after if needed though.

I will do that! thank you 🙏

andybalaam · 2023-08-24T15:51:37Z

src/utils/FormattingUtils.ts

-    const colorNumber = (hashCode(userId) % 8) + 1;
-    return `mx_Username_color${colorNumber}`;
+export function getUserNameColorClass(userId: string): string {
+    // eslint-disable-next-line react-hooks/rules-of-hooks


Can I have a comment explaining why this is OK to disable?

Same comment about a test as above.

The function starts with use but isn't actually a hook. The underlying class is tested within Compound but not here. I might land this to fix the dev build and get back to it

Great, can we have that comment in the code please?

@kerryarchibald

Changes in [1.11.45](https://github.com/vector-im/element-web/releases/tag/v1.11.45) (2023-09-29) ================================================================================================= ## 🐛 Bug Fixes * Fix Emoji font on Safari 17 ([\#11673](matrix-org/matrix-react-sdk#11673)). Changes in [1.11.44](https://github.com/vector-im/element-web/releases/tag/v1.11.44) (2023-09-26) ================================================================================================= ## ✨ Features * Make video & voice call buttons pin conference widget if unpinned ([\#11576](matrix-org/matrix-react-sdk#11576)). Fixes vector-im/customer-retainer#72. * OIDC: persist refresh token ([\#11249](matrix-org/matrix-react-sdk#11249)). Contributed by @kerryarchibald. * ElementR: Cross user verification ([\#11364](matrix-org/matrix-react-sdk#11364)). Fixes #25752. Contributed by @florianduros. * Default intentional mentions ([\#11602](matrix-org/matrix-react-sdk#11602)). * Notify users about denied access on ask-to-join rooms ([\#11480](matrix-org/matrix-react-sdk#11480)). Contributed by @nurjinjafar. * Allow setting knock room directory visibility ([\#11529](matrix-org/matrix-react-sdk#11529)). Contributed by @charlynguyen. ## 🐛 Bug Fixes * Revert "Fix regression around FacePile with overflow (#11527)" ([\#11634](matrix-org/matrix-react-sdk#11634)). Fixes #26209. * Escape placeholder before injecting it into the style ([\#11607](matrix-org/matrix-react-sdk#11607)). * Move ViewUser action callback to RoomView ([\#11495](matrix-org/matrix-react-sdk#11495)). Fixes #26040. * Fix room timeline search toggling behaviour edge case ([\#11605](matrix-org/matrix-react-sdk#11605)). Fixes #26105. * Avoid rendering view-message link in RoomKnocksBar unnecessarily ([\#11598](matrix-org/matrix-react-sdk#11598)). Contributed by @charlynguyen. * Use knock rooms sync to reflect the knock state ([\#11596](matrix-org/matrix-react-sdk#11596)). Fixes #26043 and #26044. Contributed by @charlynguyen. * Fix avatar in right panel not using the correct font ([\#11593](matrix-org/matrix-react-sdk#11593)). Fixes #26061. Contributed by @MidhunSureshR. * Add waits in Spotlight Cypress tests, hoping this unflakes them ([\#11590](matrix-org/matrix-react-sdk#11590)). Fixes #26053, #26140 #26139 and #26138. Contributed by @andybalaam. * Fix vertical alignment of default avatar font ([\#11582](matrix-org/matrix-react-sdk#11582)). Fixes #26081. * Fix avatars in public room & space search being flex shrunk ([\#11580](matrix-org/matrix-react-sdk#11580)). Fixes #26133. * Fix EventTile avatars being rendered with a size of 0 instead of hidden ([\#11558](matrix-org/matrix-react-sdk#11558)). Fixes #26075. Changes in [1.11.43](https://github.com/vector-im/element-web/releases/tag/v1.11.43) (2023-09-15) ================================================================================================= (No changes - bumping the version number for an element-desktop release.) Changes in [1.11.42](https://github.com/vector-im/element-web/releases/tag/v1.11.42) (2023-09-13) ================================================================================================= ## 🐛 Bug Fixes * Update Compound to fix Firefox-specific avatar regression ([\#11604](matrix-org/matrix-react-sdk#11604)). Fixes #26155. Changes in [1.11.41](https://github.com/vector-im/element-web/releases/tag/v1.11.41) (2023-09-12) ================================================================================================= ## 🦖 Deprecations * Deprecate customisations in favour of Module API ([\#25736](element-hq/element-web#25736)). Fixes #25733. ## ✨ Features * Make SVGR icons use forward ref ([\#26082](element-hq/element-web#26082)). * Add support for rendering a custom wrapper around Element ([\#25537](element-hq/element-web#25537)). Contributed by @maheichyk. * Allow creating public knock rooms ([\#11481](matrix-org/matrix-react-sdk#11481)). Contributed by @charlynguyen. * Render custom images in reactions according to MSC4027 ([\#11087](matrix-org/matrix-react-sdk#11087)). Contributed by @sumnerevans. * Introduce room knocks bar ([\#11475](matrix-org/matrix-react-sdk#11475)). Contributed by @charlynguyen. * Room header UI updates ([\#11507](matrix-org/matrix-react-sdk#11507)). Fixes #25892. * Remove green "verified" bar for encrypted events ([\#11496](matrix-org/matrix-react-sdk#11496)). * Update member count on room summary update ([\#11488](matrix-org/matrix-react-sdk#11488)). * Support for E2EE in Element Call ([\#11492](matrix-org/matrix-react-sdk#11492)). * Allow requesting to join knock rooms via spotlight ([\#11482](matrix-org/matrix-react-sdk#11482)). Contributed by @charlynguyen. * Lock out the first tab if Element is opened in a second tab. ([\#11425](matrix-org/matrix-react-sdk#11425)). Fixes #25157. * Change avatar to use Compound implementation ([\#11448](matrix-org/matrix-react-sdk#11448)). ## 🐛 Bug Fixes * Fix vertical alignment of default avatar font ([\#11582](matrix-org/matrix-react-sdk#11582)). Fixes #26081. * Fix avatars in public room & space search being flex shrunk ([\#11580](matrix-org/matrix-react-sdk#11580)). Fixes #26133. * Fix EventTile avatars being rendered with a size of 0 instead of hidden ([\#11558](matrix-org/matrix-react-sdk#11558)). Fixes #26075. * Fix compound external assets path in bundle ([\#26069](element-hq/element-web#26069)). * Use RoomStateEvent.Update for knocks ([\#11516](matrix-org/matrix-react-sdk#11516)). Contributed by @charlynguyen. * Prevent event propagation when clicking icon buttons ([\#11515](matrix-org/matrix-react-sdk#11515)). * Only display RoomKnocksBar when feature flag is enabled ([\#11513](matrix-org/matrix-react-sdk#11513)). Contributed by @andybalaam. * Fix avatars of knock members for people tab of room settings ([\#11506](matrix-org/matrix-react-sdk#11506)). Fixes #26083. Contributed by @charlynguyen. * Fixes read receipt avatar offset ([\#11483](matrix-org/matrix-react-sdk#11483)). Fixes #26067, #26064 #26059 and #26061. * Fix avatar defects ([\#11473](matrix-org/matrix-react-sdk#11473)). Fixes #26051 and #26046. * Fix consistent avatar output for Percy ([\#11472](matrix-org/matrix-react-sdk#11472)). Fixes #26049 and #26052. * Fix colour of avatar and colour matching with username ([\#11470](matrix-org/matrix-react-sdk#11470)). Fixes #26042. * Fix incompatibility of Soft Logout with Element-R ([\#11468](matrix-org/matrix-react-sdk#11468)). * Fix instances of double translation and guard translation calls using typescript ([\#11443](matrix-org/matrix-react-sdk#11443)).

Germain added 2 commits August 24, 2023 14:55

Use consistent colouring of username with avatar

e3df662

Upgrade Compound to fix Firefox issue

ec16765

germain-gg added the T-Defect Bugs, crashes, hangs, vulnerabilities, or other reported problems label Aug 24, 2023

germain-gg requested review from a team as code owners August 24, 2023 14:13

germain-gg requested review from kerryarchibald and andybalaam August 24, 2023 14:13

github-actions bot deployed to Netlify August 24, 2023 14:18 View deployment

Germain added 2 commits August 24, 2023 15:22

Use the approapriate color shade for usernames

e580440

Use the approapriate color shade for usernames

45e9671

github-actions bot deployed to Netlify August 24, 2023 14:29 View deployment

Germain added 2 commits August 24, 2023 15:53

Merge branch 'develop' into germain-gg/tooltip-fix

d8129e5

Merge branch 'develop' into germain-gg/tooltip-fix

57e055b

andybalaam approved these changes Aug 24, 2023

View reviewed changes

Germain added 2 commits August 24, 2023 16:54

Upgrade Compound

f1ab043

Fix tests

c2ad167

germain-gg enabled auto-merge August 24, 2023 16:05

github-actions bot deployed to Netlify August 24, 2023 16:07 View deployment

germain-gg added this pull request to the merge queue Aug 24, 2023

Merged via the queue into develop with commit 23897df Aug 24, 2023

germain-gg deleted the germain-gg/tooltip-fix branch August 24, 2023 17:45

robintown mentioned this pull request Aug 26, 2023

Consider unifying user colours with avatars element-hq/element-web#13490

Closed

olmari mentioned this pull request Sep 13, 2023

Element-web/desktop 1.11.41 nickname & default avatar colors changed to way bright in dark theme element-hq/element-meta#2046

Open

richvdh mentioned this pull request Oct 9, 2023

Fix alignment and poor contrast on user pills in invite dialog #11722

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix colour of avatar and colour matching with username #11470

Fix colour of avatar and colour matching with username #11470

germain-gg commented Aug 24, 2023 •

edited by github-actions bot

Loading

andybalaam left a comment

andybalaam Aug 24, 2023

germain-gg Aug 24, 2023

andybalaam Aug 24, 2023

andybalaam Aug 24, 2023

germain-gg Aug 24, 2023

andybalaam Aug 24, 2023

Fix colour of avatar and colour matching with username #11470

Fix colour of avatar and colour matching with username #11470

Conversation

germain-gg commented Aug 24, 2023 • edited by github-actions bot Loading

Checklist

🐛 Bug Fixes

andybalaam left a comment

Choose a reason for hiding this comment

andybalaam Aug 24, 2023

Choose a reason for hiding this comment

germain-gg Aug 24, 2023

Choose a reason for hiding this comment

andybalaam Aug 24, 2023

Choose a reason for hiding this comment

andybalaam Aug 24, 2023

Choose a reason for hiding this comment

germain-gg Aug 24, 2023

Choose a reason for hiding this comment

andybalaam Aug 24, 2023

Choose a reason for hiding this comment

germain-gg commented Aug 24, 2023 •

edited by github-actions bot

Loading