fix(client): update display prop on element (#42912)

* fix: profile menu icon overlapping content

* refactor: profile icon usage

client/src/components/Header/Header.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { create } from 'react-test-renderer';
 import ShallowRenderer from 'react-test-renderer/shallow';
 
 import { UniversalNav } from './components/universal-nav';
@@ -129,10 +130,10 @@ describe('<AuthOrProfile />', () => {
       pathName: '/learn'
     };
 
-    const shallow = new ShallowRenderer();
-    shallow.render(<AuthOrProfile {...defaultUserProps} />);
-    const view = shallow.getRenderOutput();
-    expect(avatarHasClass(view, 'default-border')).toBeTruthy();
+    const componentTree = create(
+      <AuthOrProfile {...defaultUserProps} />
+    ).toJSON();
+    expect(avatarHasClass(componentTree, 'default-border')).toBeTruthy();
   });
 
   it('has avatar with gold border for donating users', () => {
@@ -145,11 +146,11 @@ describe('<AuthOrProfile />', () => {
       pending: false,
       pathName: '/learn'
     };
-    const shallow = new ShallowRenderer();
-    shallow.render(<AuthOrProfile {...donatingUserProps} />);
-    const view = shallow.getRenderOutput();
 
-    expect(avatarHasClass(view, 'gold-border')).toBeTruthy();
+    const componentTree = create(
+      <AuthOrProfile {...donatingUserProps} />
+    ).toJSON();
+    expect(avatarHasClass(componentTree, 'gold-border')).toBeTruthy();
   });
 
   it('has avatar with blue border for top contributors', () => {
@@ -163,12 +164,12 @@ describe('<AuthOrProfile />', () => {
       pathName: '/learn'
     };
 
-    const shallow = new ShallowRenderer();
-    shallow.render(<AuthOrProfile {...topContributorUserProps} />);
-    const view = shallow.getRenderOutput();
-
-    expect(avatarHasClass(view, 'blue-border')).toBeTruthy();
+    const componentTree = create(
+      <AuthOrProfile {...topContributorUserProps} />
+    ).toJSON();
+    expect(avatarHasClass(componentTree, 'blue-border')).toBeTruthy();
   });
+
   it('has avatar with purple border for donating top contributors', () => {
     const topDonatingContributorUserProps = {
       user: {
@@ -180,10 +181,11 @@ describe('<AuthOrProfile />', () => {
       pending: false,
       pathName: '/learn'
     };
-    const shallow = new ShallowRenderer();
-    shallow.render(<AuthOrProfile {...topDonatingContributorUserProps} />);
-    const view = shallow.getRenderOutput();
-    expect(avatarHasClass(view, 'purple-border')).toBeTruthy();
+
+    const componentTree = create(
+      <AuthOrProfile {...topDonatingContributorUserProps} />
+    ).toJSON();
+    expect(avatarHasClass(componentTree, 'purple-border')).toBeTruthy();
   });
 });
 
@@ -194,7 +196,7 @@ const navigationLinks = (component, key) => {
   return target.props;
 };
 
-const profileNavItem = component => component.props.children;
+const profileNavItem = component => component.children[0];
 
 const hasDonateNavItem = component => {
   const { children, to } = navigationLinks(component, 'donate');
@@ -282,9 +284,10 @@ const hasSignOutNavItem = component => {
 const hasSignInButton = component =>
   component.props.children[1].props.children === 'buttons.sign-in';
 */
+
 const avatarHasClass = (componentTree, classes) => {
   return (
     profileNavItem(componentTree).props.className ===
-    'avatar-nav-link ' + classes
+    'avatar-container ' + classes
   );
 };

client/src/components/Header/components/auth-or-profile.tsx

@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 // @ts-nocheck
 import React from 'react';
-import { Link, borderColorPicker, AvatarRenderer } from '../../helpers';
+import { Link, AvatarRenderer } from '../../helpers';
 import { useTranslation } from 'react-i18next';
 import Login from './Login';
 
@@ -17,26 +17,20 @@ const AuthOrProfile = ({ user }: AuthOrProfileProps): JSX.Element => {
   const isTopContributor =
     user && user.yearsTopContributor && user.yearsTopContributor.length > 0;
 
-  const badgeColorClass = borderColorPicker(isUserDonating, isTopContributor);
-
   if (!isUserSignedIn) {
     return (
       <Login data-test-label='landing-small-cta'>{t('buttons.sign-in')}</Login>
     );
   } else {
     return (
-      <>
-        <Link
-          className={`avatar-nav-link ${badgeColorClass}`}
-          to={`/${user.username as string}`}
-        >
-          <AvatarRenderer
-            picture={user.picture}
-            size='sm'
-            userName={user.username}
-          />
-        </Link>
-      </>
+      <Link className='avatar-nav-link' to={`/${user.username as string}`}>
+        <AvatarRenderer
+          isDonating={isUserDonating}
+          isTopContributor={isTopContributor}
+          picture={user.picture}
+          userName={user.username}
+        />
+      </Link>
     );
   }
 };

client/src/components/Header/components/menu-button.tsx

@@ -30,9 +30,7 @@ const MenuButton = ({
       >
         {t('buttons.menu')}
       </button>
-      <span className='navatar'>
-        <AuthOrProfile user={user} />
-      </span>
+      <AuthOrProfile user={user} />
     </>
   );
 };

client/src/components/Header/components/universal-nav.css

@@ -187,38 +187,26 @@
   outline-offset: -3px;
 }
 
-.navatar {
-  display: contents;
-}
-
-.navatar .avatar-nav-link {
+.avatar-nav-link {
+  display: block;
   height: 31px;
   width: 31px;
 }
 
-.navatar .avatar-nav-link:hover,
-.navatar .avatar-nav-link:focus {
+.avatar-nav-link:hover,
+.avatar-nav-link:focus {
   background-color: var(--theme-color);
 }
 
-.navatar .default-border {
-  border: none;
-}
-
-.navatar .avatar-container svg {
-  display: inline;
-  background: var(--secondary-background);
-}
-
-.navatar .avatar-container {
+.avatar-nav-link .avatar-container {
   height: 100%;
 }
 
-.navatar .avatar-container svg,
-.navatar .avatar-container img {
+.avatar-nav-link .avatar-container svg,
+.avatar-nav-link .avatar-container img {
+  height: 100%;
   object-fit: cover;
   width: 100%;
-  height: 100%;
 }
 
 .gold-border {
@@ -234,7 +222,7 @@
 }
 
 .default-border {
-  border: 2px solid transparent;
+  border: 2px solid var(--gray-15);
 }
 
 .expand-nav {