Resolved Issue [#1742] Implemented MUI Tooltip for the UserAvatar com… #1743
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,45 @@ | ||
| import { Box, Link, Avatar, Typography, Tooltip } from '@mui/material'; | ||
|
|
||
| function UserAvatar({ auth }) { | ||
| if (!auth?.isAuthenticated) { | ||
| return null; | ||
| } | ||
|
|
||
| const userName = auth?.user?.profile.preferred_username[0] || null; | ||
|
|
||
| return ( | ||
| <Tooltip title={userName} arrow> | ||
|
Member
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 ? |
||
| <Box> | ||
| <Link | ||
| href="https://dev-k8s.treetracker.org/keycloak/realms/treetracker/account/#/personal-info" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| sx={{ | ||
| color: ({ palette }) => palette.text.primary, | ||
| }} | ||
| > | ||
| <Avatar | ||
| sx={{ | ||
| width: 24, | ||
| height: 24, | ||
| background: ({ palette }) => palette.background.greenGradient, | ||
| }} | ||
| > | ||
| <Typography | ||
| variant="caption" | ||
| sx={{ | ||
| textTransform: 'uppercase', | ||
| fontSize: 16, | ||
| textDecoration: 'none', | ||
| color: ({ palette }) => palette.text.contrast, | ||
| }} | ||
| > | ||
| {userName} | ||
|
Member
There was a problem hiding this comment. We can change this to {userName ? userName[0] : null} to conform with the idea on line 8. |
||
| </Typography> | ||
| </Avatar> | ||
| </Link> | ||
| </Box> | ||
| </Tooltip> | ||
| ); | ||
| } | ||
|
|
||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.