fix: update supporter badge logic (#38461)

* fix: update supporter badge logic

* fix: update snapshot

client/src/components/profile/Profile.js

@@ -20,6 +20,7 @@ const propTypes = {
       isLocked: PropTypes.bool,
       showAbout: PropTypes.bool,
       showCerts: PropTypes.bool,
+      showDonation: PropTypes.bool,
       showHeatMap: PropTypes.bool,
       showLocation: PropTypes.bool,
       showName: PropTypes.bool,
@@ -97,6 +98,7 @@ function renderProfile(user) {
     profileUI: {
       showAbout = false,
       showCerts = false,
+      showDonation = false,
       showHeatMap = false,
       showLocation = false,
       showName = false,
@@ -126,12 +128,14 @@ function renderProfile(user) {
     isDonating
   } = user;
 
+  console.log(showDonation);
+
   return (
     <Fragment>
       <Camper
         about={showAbout ? about : null}
         githubProfile={githubProfile}
-        isDonating={isDonating}
+        isDonating={showDonation ? isDonating : null}
         isGithub={isGithub}
         isLinkedIn={isLinkedIn}
         isTwitter={isTwitter}

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

@@ -20,11 +20,15 @@ exports[`<Profile/> renders correctly 1`] = `
         <div
           class="avatar-container col-xs-12"
         >
-          <img
+          <div
-            alt="string's avatar"
+            class=""
-            class="avatar img-responsive"
+          >
-            src="string"
+            <img
-          />
+              alt="string's avatar"
+              class="avatar img-responsive"
+              src="string"
+            />
+          </div>
         </div>
       </div>
       <div

client/src/components/profile/components/Camper.js

@@ -68,7 +68,6 @@ function Camper({
   const avatar = /example.com|identicon.org/.test(picture) ? (
     <Identicon
       bg={'#858591'}
-      className={`${isDonating ? 'supporter-img' : ''}`}
       count={5}
       fg={'#0A0A23'}
       padding={5}
@@ -78,7 +77,7 @@ function Camper({
   ) : (
     <Image
       alt={username + "'s avatar"}
-      className={`avatar${isDonating ? ' supporter-img' : ''}`}
+      className='avatar'
       responsive={true}
       src={picture}
     />
@@ -87,7 +86,7 @@ function Camper({
     <div>
       <Row>
         <Col className='avatar-container' xs={12}>
-          {avatar}
+          <div className={isDonating ? 'supporter-img' : ''}>{avatar}</div>
         </Col>
       </Row>
       <SocialIcons