From 4a47991a486841dbb26521f9392e306300655e6d Mon Sep 17 00:00:00 2001 From: Goran Peoski <79229621+goran-peoski-work@users.noreply.github.com> Date: Wed, 21 Jul 2021 08:46:01 +0200 Subject: [PATCH 1/3] Set UserAvatar image size in pixels, not percents --- .../atoms/UserAvatar/UserAvatar.scss | 40 ++++++++----------- src/scss/constants.scss | 9 +++++ 2 files changed, 26 insertions(+), 23 deletions(-) diff --git a/src/components/atoms/UserAvatar/UserAvatar.scss b/src/components/atoms/UserAvatar/UserAvatar.scss index 4a56415677..9375864ad3 100644 --- a/src/components/atoms/UserAvatar/UserAvatar.scss +++ b/src/components/atoms/UserAvatar/UserAvatar.scss @@ -1,9 +1,15 @@ @import "scss/constants"; .UserAvatar { + $sizes-map: ( + small: 25px, + medium: 40px, + large: 54px, + ); + $default-size: 25px; + + @include square-size($default-size); position: relative; - width: 25px; - height: 25px; &:hover { .UserAvatar__nametag--hover { @@ -19,8 +25,7 @@ } &__image { - height: 100%; - width: 100%; + @include square-size($default-size); border-radius: 50%; vertical-align: unset; } @@ -30,14 +35,12 @@ bottom: -1px; right: -1px; border-radius: 50%; - height: 8px; - width: 8px; z-index: z(user-avatar-status-indicator); display: block; + @include square-size(8px); &--large { - height: 12px; - width: 12px; + @include square-size(12px); } } @@ -49,19 +52,11 @@ } } - &--small { - width: 25px; - height: 25px; - } - - &--medium { - height: 40px; - width: 40px; - } - - &--large { - height: 54px; - width: 54px; + @each $modifier, $size in $sizes-map { + &--#{$modifier}, + &--#{$modifier} img { + @include square-size($size); + } } &__nametag { @@ -74,12 +69,11 @@ text-align: center; - margin: 0 auto; + margin: 0 -50% 0 auto; padding: 0 $spacing--xs; bottom: 10%; left: 50%; - margin-right: -50%; border-radius: $border-radius--md; diff --git a/src/scss/constants.scss b/src/scss/constants.scss index efcf7e22df..379d30e6d7 100644 --- a/src/scss/constants.scss +++ b/src/scss/constants.scss @@ -240,3 +240,12 @@ $z-layers: ( overflow: hidden; text-overflow: ellipsis; } + +@mixin square-size($size: 1, $min: null, $max: null) { + height: $size; + width: $size; + min-height: $min; + min-width: $min; + max-height: $max; + max-width: $max; +} From b40bc48846f23c0b8cebb8e9f7f5941bfc5b29bf Mon Sep 17 00:00:00 2001 From: Goran Peoski <79229621+goran-peoski-work@users.noreply.github.com> Date: Wed, 21 Jul 2021 16:28:48 +0200 Subject: [PATCH 2/3] Rework UserAvatar size prop --- .../atoms/UserAvatar/UserAvatar.scss | 35 +++++++++++++------ .../atoms/UserAvatar/UserAvatar.tsx | 13 ++++--- src/components/molecules/NavBar/NavBar.tsx | 2 +- .../UserInformationContent.tsx | 2 +- 4 files changed, 33 insertions(+), 19 deletions(-) diff --git a/src/components/atoms/UserAvatar/UserAvatar.scss b/src/components/atoms/UserAvatar/UserAvatar.scss index 9375864ad3..7e27cfe378 100644 --- a/src/components/atoms/UserAvatar/UserAvatar.scss +++ b/src/components/atoms/UserAvatar/UserAvatar.scss @@ -1,14 +1,27 @@ @import "scss/constants"; .UserAvatar { - $sizes-map: ( + $avatar-sizes-map: ( + // NOTE: legacy not added because it is the default small: 25px, medium: 40px, large: 54px, + full: 100% ); - $default-size: 25px; + $indicator-sizes-map: ( + // NOTE: legacy not added because it is the default + small: 8px, + medium: 10px, + large: 12px, + full: 25% + ); + + // NOTE: parent and img mismatch due to legacy reasons + $default-avatar-size: 25px; + $default-image-size: 100%; + $default-indicator-size: 8px; - @include square-size($default-size); + @include square-size($default-avatar-size); position: relative; &:hover { @@ -25,22 +38,24 @@ } &__image { - @include square-size($default-size); + @include square-size($default-image-size); border-radius: 50%; vertical-align: unset; } &__status-indicator { position: absolute; - bottom: -1px; - right: -1px; + bottom: 0; + right: 0; border-radius: 50%; z-index: z(user-avatar-status-indicator); display: block; - @include square-size(8px); + @include square-size($default-indicator-size); - &--large { - @include square-size(12px); + @each $modifier, $size in $indicator-sizes-map { + &--#{$modifier} { + @include square-size($size); + } } } @@ -52,7 +67,7 @@ } } - @each $modifier, $size in $sizes-map { + @each $modifier, $size in $avatar-sizes-map { &--#{$modifier}, &--#{$modifier} img { @include square-size($size); diff --git a/src/components/atoms/UserAvatar/UserAvatar.tsx b/src/components/atoms/UserAvatar/UserAvatar.tsx index b32bcaa080..3e8aca5258 100644 --- a/src/components/atoms/UserAvatar/UserAvatar.tsx +++ b/src/components/atoms/UserAvatar/UserAvatar.tsx @@ -14,6 +14,8 @@ import { useVenueId } from "hooks/useVenueId"; import "./UserAvatar.scss"; +export type UserAvatarSize = "legacy" | "small" | "medium" | "large" | "full"; + export interface UserAvatarProps { user?: WithId; containerClassName?: string; @@ -21,8 +23,7 @@ export interface UserAvatarProps { showNametag?: UsernameVisibility; showStatus?: boolean; onClick?: () => void; - large?: boolean; - medium?: boolean; + size?: UserAvatarSize; } // @debt the UserProfilePicture component serves a very similar purpose to this, we should unify them as much as possible @@ -33,8 +34,7 @@ export const _UserAvatar: React.FC = ({ showNametag, onClick, showStatus, - large, - medium, + size = "legacy", }) => { const venueId = useVenueId(); @@ -56,8 +56,7 @@ export const _UserAvatar: React.FC = ({ const containerClasses = classNames("UserAvatar", containerClassName, { "UserAvatar--clickable": onClick !== undefined, - "UserAvatar--large": large, - "UserAvatar--medium": medium, + [`UserAvatar--${size}`]: size, }); const isOnline = useMemo( @@ -76,7 +75,7 @@ export const _UserAvatar: React.FC = ({ const statusIndicatorClasses = classNames("UserAvatar__status-indicator", { "UserAvatar__status-indicator--online": isOnline, [`UserAvatar__status-indicator--${status}`]: isOnline && status, - "UserAvatar__status-indicator--large": large, + [`UserAvatar__status-indicator--${size}`]: size, }); const statusIndicatorStyles = useMemo( diff --git a/src/components/molecules/NavBar/NavBar.tsx b/src/components/molecules/NavBar/NavBar.tsx index 575be99f42..602440a318 100644 --- a/src/components/molecules/NavBar/NavBar.tsx +++ b/src/components/molecules/NavBar/NavBar.tsx @@ -313,7 +313,7 @@ export const NavBar: React.FC = ({ hasBackButton = true }) => { overlay={ProfilePopover} rootClose={true} > - + )} diff --git a/src/components/organisms/ProfileModal/UserInformationContent/UserInformationContent.tsx b/src/components/organisms/ProfileModal/UserInformationContent/UserInformationContent.tsx index c0e1e88889..fa65b2436a 100644 --- a/src/components/organisms/ProfileModal/UserInformationContent/UserInformationContent.tsx +++ b/src/components/organisms/ProfileModal/UserInformationContent/UserInformationContent.tsx @@ -133,7 +133,7 @@ export const UserInformationContent: React.FunctionComponentMy Profile
- +

From 76220e8c2aab97e736091f15773d4ae204e4ddd7 Mon Sep 17 00:00:00 2001 From: Goran Peoski <79229621+goran-peoski-work@users.noreply.github.com> Date: Thu, 22 Jul 2021 12:19:05 +0200 Subject: [PATCH 3/3] Remove 'legacy' value from UserAvatar size prop --- src/components/atoms/UserAvatar/UserAvatar.scss | 6 ++---- src/components/atoms/UserAvatar/UserAvatar.tsx | 4 ++-- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/atoms/UserAvatar/UserAvatar.scss b/src/components/atoms/UserAvatar/UserAvatar.scss index 7e27cfe378..4cd4331caf 100644 --- a/src/components/atoms/UserAvatar/UserAvatar.scss +++ b/src/components/atoms/UserAvatar/UserAvatar.scss @@ -2,18 +2,16 @@ .UserAvatar { $avatar-sizes-map: ( - // NOTE: legacy not added because it is the default small: 25px, medium: 40px, large: 54px, - full: 100% + full: 100%, ); $indicator-sizes-map: ( - // NOTE: legacy not added because it is the default small: 8px, medium: 10px, large: 12px, - full: 25% + full: 25%, ); // NOTE: parent and img mismatch due to legacy reasons diff --git a/src/components/atoms/UserAvatar/UserAvatar.tsx b/src/components/atoms/UserAvatar/UserAvatar.tsx index 3e8aca5258..48630adb12 100644 --- a/src/components/atoms/UserAvatar/UserAvatar.tsx +++ b/src/components/atoms/UserAvatar/UserAvatar.tsx @@ -14,7 +14,7 @@ import { useVenueId } from "hooks/useVenueId"; import "./UserAvatar.scss"; -export type UserAvatarSize = "legacy" | "small" | "medium" | "large" | "full"; +export type UserAvatarSize = "small" | "medium" | "large" | "full"; export interface UserAvatarProps { user?: WithId; @@ -34,7 +34,7 @@ export const _UserAvatar: React.FC = ({ showNametag, onClick, showStatus, - size = "legacy", + size, }) => { const venueId = useVenueId();