Web: Client: NavMenu: fix avatar size

web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-menu.js

@@ -96,8 +96,6 @@ const commonStyle = css`
   font-family: "Open Sans", sans-serif, Arial;
   font-style: normal;
   color: ${(props) => props.theme.menuContainer.color};
-  margin-left: 60px;
-  margin-top: -3px;
   max-width: 300px;
   white-space: nowrap;
   overflow: hidden;
@@ -114,6 +112,10 @@ export const StyledProfileMenu = styled(DropDownItem)`
 `;
 
 export const MenuContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
   position: relative;
   height: 76px;
   background: ${(props) => props.theme.menuContainer.background};
@@ -121,15 +123,15 @@ export const MenuContainer = styled.div`
   padding: 16px;
   cursor: default;
   box-sizing: border-box;
+
+  .avatar {
+    height: 40px;
+    width: 40px;
+  }
 `;
 
 MenuContainer.defaultProps = { theme: Base };
 
-export const AvatarContainer = styled.div`
-  display: inline-block;
-  float: left;
-`;
-
 export const MainLabelContainer = styled.div`
   font-size: 16px;
   line-height: 28px;
@@ -178,19 +180,20 @@ class ProfileMenu extends React.Component {
       >
         <StyledProfileMenu>
           <MenuContainer>
-            <AvatarContainer>
-              <Avatar
-                size="medium"
-                role={avatarRole}
-                source={avatarSource}
-                userName={displayName}
-              />
-            </AvatarContainer>
-            <MainLabelContainer>{displayName}</MainLabelContainer>
-            <LabelContainer>{email}</LabelContainer>
-            <StyledControlContainer onClick={clickOutsideAction}>
-              <StyledCrossIcon />
-            </StyledControlContainer>
+            <Avatar
+              className="avatar"
+              size="medium"
+              role={avatarRole}
+              source={avatarSource}
+              userName={displayName}
+            />
+            <div>
+              <MainLabelContainer>{displayName}</MainLabelContainer>
+              <LabelContainer>{email}</LabelContainer>
+              <StyledControlContainer onClick={clickOutsideAction}>
+                <StyledCrossIcon />
+              </StyledControlContainer>
+            </div>
           </MenuContainer>
         </StyledProfileMenu>
         {children}