Resolved Issue [#1742] Implemented MUI Tooltip for the UserAvatar com…#1743
Resolved Issue [#1742] Implemented MUI Tooltip for the UserAvatar com…#1743nitverse wants to merge 2 commits intoGreenstand:mainfrom
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: |
DylanJG01
left a comment
DylanJG01
left a comment
There was a problem hiding this comment.
The most pressing concern is fixing the tooltip to appear above the header.
| 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.
3 participants
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: