chore: new user avatar tooltip #9050
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.OpenSSF Scorecard
Scanned Files |
| const StyledTooltipAvatar = styled(Avatar)(({ theme }) => ({ | ||
| width: theme.spacing(5), | ||
| height: theme.spacing(5), | ||
| margin: 'auto', |
There was a problem hiding this comment.
out of curiosity: what's the margin auto doing here? Does ... does the avatar have some built-in margins?
There was a problem hiding this comment.
Not sure, was a copy paste from the existing styled avatar component.
| backgroundColor: theme.palette.secondary.light, | ||
| color: theme.palette.text.primary, | ||
| fontSize: theme.fontSizes.smallerBody, | ||
| fontWeight: theme.fontWeight.bold, |
There was a problem hiding this comment.
This, presumably, is to handle cases when we put letters instead of images?
There was a problem hiding this comment.
Which, ... I'm not sure we'll ever do? Because we only show this if we have src or imageurl?
There was a problem hiding this comment.
Yep, this made me rethink my approach. I'm now always showing an avatar in the tooltip with whatever content is in the original avatar, which is probably more reasonable and consistent:
| </> | ||
| <StyledTooltip> | ||
| <ConditionallyRender | ||
| condition={Boolean(src || user?.imageUrl)} |
There was a problem hiding this comment.
Isn't this condition redundant with the if check above?
There was a problem hiding this comment.
Also ... are we still using conditionally render? 🤔
There was a problem hiding this comment.
Isn't this condition redundant with the if check above?
Yep, it was. Good point.
Also ... are we still using conditionally render? 🤔
I don't know, are we? 🤷
I've dropped them in this file in the latest commit.
Co-authored-by: Thomas Heartman <[email protected]>
https://linear.app/unleash/issue/2-3109/improve-avatar-tooltip
I noticed our current user avatar tooltip is a bit poor.
This PR tries to improve it a bit using only the data we already have available, without any drastic changes.
Before
After
Other examples after the changes