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();
+    const componentTree = create(
-    shallow.render(<AuthOrProfile {...defaultUserProps} />);
+      <AuthOrProfile {...defaultUserProps} />
-    const view = shallow.getRenderOutput();
+    ).toJSON();
-    expect(avatarHasClass(view, 'default-border')).toBeTruthy();
+    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();
+    const componentTree = create(
-    shallow.render(<AuthOrProfile {...topContributorUserProps} />);
+      <AuthOrProfile {...topContributorUserProps} />
-    const view = shallow.getRenderOutput();
+    ).toJSON();
-
+    expect(avatarHasClass(componentTree, 'blue-border')).toBeTruthy();
-    expect(avatarHasClass(view, '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 componentTree = create(
-    const view = shallow.getRenderOutput();
+      <AuthOrProfile {...topDonatingContributorUserProps} />
-    expect(avatarHasClass(view, 'purple-border')).toBeTruthy();
+    ).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' to={`/${user.username as string}`}>
-        <Link
-          className={`avatar-nav-link ${badgeColorClass}`}
-          to={`/${user.username as string}`}
-        >
         <AvatarRenderer
+          isDonating={isUserDonating}
+          isTopContributor={isTopContributor}
           picture={user.picture}
-            size='sm'
           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>
     </>
   );
 };

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

@@ -187,38 +187,26 @@
   outline-offset: -3px;
 }
 
-.navatar {
+.avatar-nav-link {
-  display: contents;
+  display: block;
-}
-
-.navatar .avatar-nav-link {
   height: 31px;
   width: 31px;
 }
 
-.navatar .avatar-nav-link:hover,
+.avatar-nav-link:hover,
-.navatar .avatar-nav-link:focus {
+.avatar-nav-link:focus {
   background-color: var(--theme-color);
 }
 
-.navatar .default-border {
+.avatar-nav-link .avatar-container {
-  border: none;
-}
-
-.navatar .avatar-container svg {
-  display: inline;
-  background: var(--secondary-background);
-}
-
-.navatar .avatar-container {
   height: 100%;
 }
 
-.navatar .avatar-container svg,
+.avatar-nav-link .avatar-container svg,
-.navatar .avatar-container img {
+.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 {

client/src/components/helpers/border-color-picker.test.ts

@@ -0,0 +1,19 @@
+import borderColorPicker from './border-color-picker';
+
+describe('Border color picker helper', () => {
+  it('should get color for non donators and non top contributors', () => {
+    expect(borderColorPicker(false, false)).toEqual('default-border');
+  });
+
+  it('should get color for donators and top contributors', () => {
+    expect(borderColorPicker(true, true)).toEqual('purple-border');
+  });
+
+  it('should get color for only donators', () => {
+    expect(borderColorPicker(true, false)).toEqual('gold-border');
+  });
+
+  it('should get color for only top contributors', () => {
+    expect(borderColorPicker(false, true)).toEqual('blue-border');
+  });
+});

client/src/components/profile/__snapshots__/Profile.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`<Profile/> renders correctly 1`] = `
         class="row"
       >
         <div
-          class="avatar-container col-xs-12"
+          class="avatar-camper col-xs-12"
         >
           <div
             class="avatar-container default-border"

client/src/components/profile/components/Camper.tsx

@@ -90,7 +90,7 @@ function Camper({
   return (
     <div>
       <Row>
-        <Col className='avatar-container' xs={12}>
+        <Col className='avatar-camper' xs={12}>
           <AvatarRenderer
             isDonating={isDonating}
             isTopContributor={yearsTopContributor.length > 0}

client/src/components/profile/components/camper.css

@@ -1,14 +1,3 @@
-.avatar-container .avatar {
-  height: 180px;
-  width: 180px;
-  object-fit: cover;
-}
-
-.avatar-container {
-  display: flex;
-  justify-content: center;
-}
-
 .username,
 .name,
 .bio,
@@ -16,22 +5,21 @@
   overflow-wrap: break-word;
 }
 
-.avatar-container div {
+.avatar-camper {
+  display: flex;
+  justify-content: center;
+}
+
+.avatar-camper .avatar {
+  height: 180px;
+  width: 180px;
+  object-fit: cover;
+}
+
+.avatar-camper div {
   height: 200px;
 }
 
-.avatar-container .gold-border {
+.avatar-camper .avatar-container {
-  border: 10px solid var(--yellow-gold);
+  border-width: 10px;
-}
-
-.avatar-container .blue-border {
-  border: 10px solid var(--blue-mid);
-}
-
-.avatar-container .purple-border {
-  border: 10px solid var(--purple-mid);
-}
-
-.avatar-container .default-border {
-  border: 10px solid transparent;
 }