Set UserAvatar image size in pixels, not percents #1870
Conversation
github-actions
bot
added
the
💎 styles
goran-peoski-work
added
💪 enhancement
|
Code Climate has analyzed commit b07a4e5 and detected 0 issues on this pull request. View more on Code Climate. |
|
Visit the preview URL for this PR (updated for commit b07a4e5): https://co-reality-staging--preview-pr-1870-iel0hxin.web.app (expires Thu, 29 Jul 2021 11:00:04 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 |
| @@ -56,8 +56,7 @@ export const _UserAvatar: React.FC<UserAvatarProps> = ({ | |||
|
|
|||
| const containerClasses = classNames("UserAvatar", containerClassName, { | |||
| "UserAvatar--clickable": onClick !== undefined, | |||
| "UserAvatar--large": large, | |||
| "UserAvatar--medium": medium, | |||
| [`UserAvatar--${size}`]: size, | |||
There was a problem hiding this comment.
Size is limited to a handful values, it shouldn't be a problem either being undefined or "legacy", "small" etc.
| &--#{$modifier}, | ||
| &--#{$modifier} img { | ||
| @include square-size($size); | ||
| } |
There was a problem hiding this comment.
The syntax is shorter but the readability is not better. We should choose one and keep it consistent, I haven't seen this syntax in the project so far. And we need to communicate these things before applying them. If I start adding my own standards and styles with every PR you guys will hate me by the end of the week 😆
There was a problem hiding this comment.
I haven't seen this syntax in the project so far.
https://github.com/sparkletown/sparkle/blob/staging/src/scss/constants.scss contains mixins, functions, interpollation...
Standard SCSS syntax really https://sass-lang.com/documentation
and my view is if we don't use it as intended to make few things DRY and robust, might as well move to back to CSS.
And we need to communicate these things before applying them.
PR review process is communication, PR merge is application, so we're good I think.
you guys will hate me by the end of the week
Not really. Not a fan of setting things in stone.
|
My safe formula for the avatar sizes would be:
|
Fix issue where
<UserAvatar>would display oval (not circular) image due to using%instead ofpxin SCSS.Suplemental to #1263
While #1263 tries to adjust for the image source (
srcprop) itself not being square size or even missing, this PR deals only with the<img>element size not being square when using percents.BEFORE:
AFTER:
