[#530]: Profile avatar is now either Github profile picture, or capitalized first letter of username

frontend/src/components/Avatar/index.jsx

@@ -25,11 +25,11 @@ function Avatar({ username }) {
           style={{
             fontSize: '20px',
             fontWeight: 300,
-            letterSpacing: '-2px',
             pointerEvents: 'none',
           }}
-          x="20%"
-          y="50%"
+          textAnchor="middle"
+          x="50%"
+          y="52%"
         >
           {username}
         </text>

frontend/src/components/Navigation/UserMenu.jsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -26,6 +27,28 @@ function UserMenu() {
     dispatch(actions.openModal({ type: 'newSnippet' }));
   };
 
+  // The following code checks if the Github profile picture exists
+  const imageExists = (url) => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => resolve(true);
+      img.onerror = () => resolve(false);
+      img.src = url;
+    });
+  };
+
+  const [githubImageExists, setGithubExists] = useState(false);
+
+  useEffect(() => {
+    const url = `https://github.com/${username}.png`;
+    imageExists(url).then((exists) => setGithubExists(exists));
+  }, [username]);
+
+  // This function takes the first letter of the username and converts it to uppercase
+  const capitalizeFirstLetter = (string) => {
+    return string.charAt(0).toUpperCase();
+  };
+
   return (
     <Dropdown align="end" as="li" title="User Menu">
       <Dropdown.Toggle
@@ -34,7 +57,20 @@ function UserMenu() {
         variant="link"
       >
         <div className="logo-height">
-          <Avatar username={username} />
+          {githubImageExists ? (
+            <img
+              alt="Github Profile"
+              src={`https://github.com/${username}.png`}
+              style={{
+                position: 'relative',
+                width: '32px',
+                height: '32px',
+                borderRadius: '50%',
+              }}
+            />
+          ) : (
+            <Avatar username={capitalizeFirstLetter(username)} />
+          )}
         </div>
         <span className="visually-hidden">{tPA('header')}</span>
       </Dropdown.Toggle>