avatar styling fixed (#2906)

Co-authored-by: tomekstepien <tomasz.stepien@elliptic.co>
Joystream · Apr 25, 2022 · 8146339 · 8146339 · vercel · Apr 25, 2022
1 parent 9cac43b
commit 8146339
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/ui/src/memberships/components/Avatar.tsx b/packages/ui/src/memberships/components/Avatar.tsx
@@ -71,7 +71,7 @@ export const MemberInfoAvatar = React.memo(
     return (
       <Tooltip forBig={forBig} popupContent={<MemberInfo member={member} isOnDark isLead={isLead} />}>
         <MemberPhoto small={small} noArea={noArea}>
-          <MemberPhotoContainer small={fixedSize}>
+          <MemberPhotoContainer fixedSize={fixedSize}>
             <Avatar avatarUri={avatarUri} className={className} />
           </MemberPhotoContainer>
         </MemberPhoto>

diff --git a/packages/ui/src/memberships/components/components.tsx b/packages/ui/src/memberships/components/components.tsx
@@ -48,15 +48,16 @@ export const MemberId = styled(TextInlineSmall)`
 interface MemberPhotoProps {
   small?: boolean
   noArea?: boolean
+  fixedSize?: boolean
 }
 
 export const MemberPhoto = styled.div<MemberPhotoProps>`
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
-  min-width: ${({ small }) => (small ? '24px' : '40px')};
-  min-height: ${({ small }) => (small ? '24px' : '40px')};
+  max-width: ${({ small }) => (small ? '24px' : '40px')};
+  max-height: ${({ small }) => (small ? '24px' : '40px')};
   ${({ noArea }) =>
     !noArea &&
     css`
@@ -83,8 +84,8 @@ export const MemberPhotoContainer = styled.div<MemberPhotoProps>`
   display: flex;
   justify-content: center;
   align-items: center;
-  max-width: ${({ small }) => (small ? '24px' : '100%')};
-  max-height: ${({ small }) => (small ? '24px' : '100%')};
+  width: ${({ fixedSize }) => (fixedSize ? '24px' : '100%')};
+  height: ${({ fixedSize }) => (fixedSize ? '24px' : '100%')};
   border-radius: ${BorderRad.round};
   overflow: hidden;
 `