Resolved Issue [#1742] Implemented MUI Tooltip for the UserAvatar com… #1743
Conversation
…Avatar component, displays the user's name on hover.
|
@nitverse thank you for you contribution, can you fix the eslint error in the ci: |
|
|
||
| function UserAvatar({ auth }) { | ||
| if (!auth?.isAuthenticated) { | ||
| return null; | ||
| } | ||
|
|
||
| const userName = auth?.user?.profile.preferred_username[0] || null; |
There was a problem hiding this comment.
I think userName should be set to auth?.user?.profile.preferred_username || null.
That way, when you highlight the tooltip--which is currently just the first letter of their username--it will give new information, instead of repeating information the user already has.
| }} | ||
| > | ||
| <Avatar | ||
| <Tooltip title={userName} arrow> |
There was a problem hiding this comment.
Currently the arrow tooltip will show up behind the header/banner of the website. This is likely due to the header having a z-index of '9999'.
I am hesitant to suggest changing the header zindex to anything lower in the event it ruins the format in some place I'm unaware of. I am open to suggestions or ideas. @dadiorchen ?
| color: ({ palette }) => palette.text.contrast, | ||
| }} | ||
| > | ||
| {userName} |
There was a problem hiding this comment.
We can change this to {userName ? userName[0] : null} to conform with the idea on line 8.
Description
Implemented MUI Tooltip in the
UserAvatarcomponent, enhancing the user experience by displaying the user's name on hover.Type of change
How Has This Been Tested?
Checklist: