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

frontend/src/components/ReviewRenterModal.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { rentalAPI } from "../services/api";
 import { Rental } from "../types";
 import SuccessModal from "./SuccessModal";
+import Avatar from "./Avatar";
 
 interface ReviewRenterModalProps {
   show: boolean;
@@ -102,26 +103,7 @@ const ReviewRenterModal: React.FC<ReviewRenterModalProps> = ({
               {rental.renter && rental.item && (
                 <div className="mb-4 text-center">
                   <div className="d-flex justify-content-center mb-3">
-                    {rental.renter.imageFilename ? (
-                      <img
-                        src={rental.renter.imageFilename}
-                        alt={`${rental.renter.firstName} ${rental.renter.lastName}`}
-                        className="rounded-circle"
-                        style={{
-                          width: "60px",
-                          height: "60px",
-                          objectFit: "cover",
-                        }}
-                      />
-                    ) : (
-                      <div
-                        className="rounded-circle bg-primary d-flex align-items-center justify-content-center text-white fw-bold"
-                        style={{ width: "60px", height: "60px" }}
-                      >
-                        {rental.renter.firstName[0]}
-                        {rental.renter.lastName[0]}
-                      </div>
-                    )}
+                    <Avatar user={rental.renter} size="xl" />
                   </div>
                   <h6 className="mb-1">
                     {rental.renter.firstName} {rental.renter.lastName}