feat: render nav conditionally

client/src/components/helpers/AvatarRenderer.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Image } from '@freecodecamp/react-bootstrap';
+import DefaultAvatar from '../../assets/icons/DefaultAvatar';
+import { defaultUserImage } from '../../../../config/misc';
+
+const propTypes = {
+  isDonating: PropTypes.bool,
+  isTopContributor: PropTypes.bool,
+  picture: PropTypes.any.isRequired,
+  userName: PropTypes.string.isRequired
+};
+
+function borderColorPicker(isDonating, isTopContributor) {
+  if (isDonating && isTopContributor) return 'purple-border';
+  else if (isTopContributor) return 'green-border';
+  else if (isDonating) return 'gold-border';
+  else return 'default-border';
+}
+
+function AvatarRenderer({ picture, userName, isDonating, isTopContributor }) {
+  let borderColor = borderColorPicker(isDonating, isTopContributor);
+  let isPlaceHolderImage =
+    /example.com|identicon.org/.test(picture) || picture === defaultUserImage;
+
+  return (
+    <div className={`avatar-container ${borderColor}`}>
+      {isPlaceHolderImage ? (
+        <DefaultAvatar className='avatar default-avatar' />
+      ) : (
+        <Image
+          alt={userName + "'s avatar"}
+          className='avatar'
+          responsive={true}
+          src={picture}
+        />
+      )}
+    </div>
+  );
+}
+
+AvatarRenderer.propTypes = propTypes;
+AvatarRenderer.displayName = 'AvatarRenderer';
+export default AvatarRenderer;

client/src/components/helpers/SkeletonSprite.js

@@ -9,9 +9,9 @@ function SkeletonSprite() {
       <svg className='sprite-svg'>
         <rect
           className='sprite'
-          fill='#ccc'
+          fill='var(--gray-75)'
           height='100%'
-          stroke='#ccc'
+          stroke='var(--gray-75)'
           width='2px'
           x='0'
           y='0'

client/src/components/helpers/borderColorPicker.js

@@ -0,0 +1,6 @@
+export default function borderColorPicker(isDonating, isTopContributor) {
+  if (isDonating && isTopContributor) return 'purple-border';
+  else if (isTopContributor) return 'green-border';
+  else if (isDonating) return 'gold-border';
+  else return 'default-border';
+}

client/src/components/helpers/index.js

@@ -7,3 +7,5 @@ export { default as Spacer } from './Spacer';
 export { default as Link } from './Link';
 export { default as CurrentChallengeLink } from './CurrentChallengeLink';
 export { default as ImageLoader } from './ImageLoader';
+export { default as AvatarRenderer } from './AvatarRenderer';
+export { default as borderColorPicker } from './borderColorPicker';

client/src/components/helpers/skeletonStyles.js

@@ -8,7 +8,7 @@ export default `
 .sprite-svg {
   height: 100%;
   width: 100%;
-  background: #aaa;
+  background: var(--theme-color);
 
 }
 
@@ -18,8 +18,15 @@ export default `
     transform: translateX(0%);
     stroke-width: 2px;
   }
+  5%{
+   opacity:100%;
+  }
   35% {
     stroke-width: 30px;
+    opacity:100%;
+  }
+  65%{
+    opacity:100%;
   }
   100% {
     -webkit-transform: translateX(100%);
@@ -36,6 +43,10 @@ export default `
   }
   35% {
     stroke-width: 30px;
+    opacity:100%;
+  }
+  65%{
+    opacity:100%;
   }
   100% {
     -webkit-transform: translateX(100%);
@@ -45,8 +56,10 @@ export default `
 }
 
 .sprite {
+  opacity:0%;
   -webkit-animation-name: shimmer;
   animation-name: shimmer;
+  animation-delay: 1s;
   width: 2px;
   -webkit-animation-duration: 2s;
   animation-duration: 2s;