feat: border on avatar and badge for donating campers (#38434)

client/src/components/layouts/variables.css

@@ -1,5 +1,6 @@
 :root {
   --theme-color: #0a0a23;
+  --yellow-gold: #ffbf00;
   --gray-00: #ffffff;
   --gray-05: #f5f6f7;
   --gray-10: #dfdfe2;

client/src/components/profile/Profile.js

@@ -48,7 +48,8 @@ const propTypes = {
     twitter: PropTypes.string,
     username: PropTypes.string,
     website: PropTypes.string,
-    yearsTopContributor: PropTypes.array
+    yearsTopContributor: PropTypes.array,
+    isDonating: PropTypes.bool
   })
 };
 
@@ -121,7 +122,8 @@ function renderProfile(user) {
     picture,
     portfolio,
     about,
-    yearsTopContributor
+    yearsTopContributor,
+    isDonating
   } = user;
 
   return (
@@ -129,6 +131,7 @@ function renderProfile(user) {
       <Camper
         about={showAbout ? about : null}
         githubProfile={githubProfile}
+        isDonating={isDonating}
         isGithub={isGithub}
         isLinkedIn={isLinkedIn}
         isTwitter={isTwitter}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Col, Row, Image } from '@freecodecamp/react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAward } from '@fortawesome/free-solid-svg-icons';
+import { faAward, faHeart } from '@fortawesome/free-solid-svg-icons';
 import Identicon from 'react-identicons';
 
 import SocialIcons from './SocialIcons';
@@ -12,6 +12,7 @@ import './camper.css';
 const propTypes = {
   about: PropTypes.string,
   githubProfile: PropTypes.string,
+  isDonating: PropTypes.bool,
   isGithub: PropTypes.bool,
   isLinkedIn: PropTypes.bool,
   isTwitter: PropTypes.bool,
@@ -54,6 +55,7 @@ function Camper({
   about,
   yearsTopContributor,
   githubProfile,
+  isDonating,
   isLinkedIn,
   isGithub,
   isTwitter,
@@ -66,6 +68,7 @@ function Camper({
   const avatar = /example.com|identicon.org/.test(picture) ? (
     <Identicon
       bg={'#858591'}
+      className={`${isDonating ? 'supporter-img' : ''}`}
       count={5}
       fg={'#0A0A23'}
       padding={5}
@@ -75,7 +78,7 @@ function Camper({
   ) : (
     <Image
       alt={username + "'s avatar"}
-      className='avatar'
+      className={`avatar${isDonating ? ' supporter-img' : ''}`}
       responsive={true}
       src={picture}
     />
@@ -102,6 +105,11 @@ function Camper({
       <h2 className='text-center username'>@{username}</h2>
       {name && <p className='text-center name'>{name}</p>}
       {location && <p className='text-center location'>{location}</p>}
+      {isDonating && (
+        <p className='text-center supporter'>
+          <FontAwesomeIcon icon={faHeart} /> Supporter
+        </p>
+      )}
       {about && <p className='bio text-center'>{about}</p>}
       {typeof points === 'number' ? (
         <p className='text-center points'>

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

@@ -13,3 +13,7 @@
 .location {
   overflow-wrap: break-word;
 }
+
+.supporter-img {
+  border: 10px solid var(--yellow-gold);
+}