consistent profile image, initials with background color as backup, better profile image editing

frontend/src/pages/ItemDetail.tsx

@@ -7,6 +7,7 @@ import { getPublicImageUrl } from "../services/uploadService";
 import GoogleMapWithRadius from "../components/GoogleMapWithRadius";
 import ItemReviews from "../components/ItemReviews";
 import ConfirmationModal from "../components/ConfirmationModal";
+import Avatar from "../components/Avatar";
 
 const ItemDetail: React.FC = () => {
   const { id } = useParams<{ id: string }>();
@@ -480,28 +481,7 @@ const ItemDetail: React.FC = () => {
                   onClick={() => navigate(`/users/${item.ownerId}`)}
                   style={{ cursor: "pointer" }}
                 >
-                  {item.owner.imageFilename ? (
-                    <img
-                      src={item.owner.imageFilename}
-                      alt={`${item.owner.firstName} ${item.owner.lastName}`}
-                      className="rounded-circle me-2"
-                      style={{
-                        width: "30px",
-                        height: "30px",
-                        objectFit: "cover",
-                      }}
-                    />
-                  ) : (
-                    <div
-                      className="rounded-circle bg-secondary d-flex align-items-center justify-content-center me-2"
-                      style={{ width: "30px", height: "30px" }}
-                    >
-                      <i
-                        className="bi bi-person-fill text-white"
-                        style={{ fontSize: "0.8rem" }}
-                      ></i>
-                    </div>
-                  )}
+                  <Avatar user={item.owner} size="xs" className="me-2" />
                   <span className="text-muted">
                     {item.owner.firstName} {item.owner.lastName}
                   </span>