Material Avatar

Author: HugeFrog24

frontend/src/components/ProfileImage.jsx

@@ -1,11 +1,10 @@
-import {useEffect, useState} from "react";
-import {Button, Dropdown, DropdownButton} from "react-bootstrap";
-import {faCamera, faTrash, faUpload,} from "@fortawesome/free-solid-svg-icons";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from "react";
+import { Button, Dropdown, DropdownButton } from "react-bootstrap";
+import { faCamera, faTrash, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-
-import { handleProfileImageError } from '../utils/ImageUtils';
+import Avatar from '@mui/material/Avatar';
 
 function ProfileImage({
     imageSrc,
@@ -40,7 +39,7 @@ function ProfileImage({
         setIsHovered(false);
         const timeout = setTimeout(() => {
             setShowDropdown(false);
-            }, 300);
+        }, 300);
         setHideDropdownTimeout(timeout);
     };
 
@@ -64,7 +63,7 @@ function ProfileImage({
         return () => {
             document.removeEventListener("click", handleDocumentClick);
         };
-        }, [showDropdown]);
+    }, [showDropdown]);
 
     return (
         <div
@@ -82,14 +81,14 @@ function ProfileImage({
                         cursor: showOptions ? "pointer" : "default",
                     }}
                     >
-                    <img
+                    <Avatar
                         src={imageSrc}
-                        className={`rounded-circle shadow ${isHovered ? "opacity-50" : ""}`}
                         alt={imageAlt}
-                        width={width}
-                        height={height}
-                        onError={handleProfileImageError}
-                    />
+                        sx={{ width, height }}
+                        className={`shadow ${isHovered ? "opacity-50" : ""}`}
+                    >
+                        {imageAlt.charAt(0).toUpperCase()}
+                    </Avatar>
                 </Button>
                 {isHovered && showOptions && (
                     <div className="position-absolute top-50 start-50 translate-middle">

frontend/src/components/navbar.jsx

@@ -1,6 +1,6 @@
 import React, {useContext} from "react";
 import {Link, useLocation} from "react-router-dom";
-import {Button, ButtonGroup, Dropdown, Image, Nav, Navbar} from "react-bootstrap";
+import {Button, ButtonGroup, Dropdown, Nav, Navbar} from "react-bootstrap";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {
     faBookOpen,
@@ -13,12 +13,12 @@ import {
     faSun,
     faUser,
 } from "@fortawesome/free-solid-svg-icons";
+import Avatar from '@mui/material/Avatar';
 
 import { useDarkMode } from "./contexts/DarkModeContext";
 import UserContext from "./contexts/UserContext";
 import styles from "../styles/NavigationBar.module.css";
 import { handleLogout } from '../utils/auth';
-import { handleProfileImageError } from '../utils/ImageUtils';
 
 function NavigationBar() {
     const {isDarkMode, toggleDarkMode, modeClasses} = useDarkMode();
@@ -57,14 +57,13 @@ function NavigationBar() {
                         className={`${modeClasses.bgClass} ${modeClasses.textClass}`}
                         id="dropdown-basic"
                     >
-                        <Image
-                            src={`${user.image}`}
-                            roundedCircle
-                            width="24"
-                            height="24"
-                            className="me-2"
-                            onError={handleProfileImageError}
-                        />
+                        <Avatar
+                            src={user.image}
+                            alt={user.username}
+                            sx={{ width: 24, height: 24 }}
+                        >
+                            {user.username.charAt(0).toUpperCase()}
+                        </Avatar>
                     </Dropdown.Toggle>
 
                     <Dropdown.Menu align="end"> {/* Aligns dropdown to the end (right side) of the toggle to prevent overflow */}