feat: user profile customization: username, password, and avatar (#315)

frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx

@@ -1,7 +1,6 @@
 'use client';
 import { useState, useEffect, useContext } from 'react';
 import { Button, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@heroui/react';
-import Avatar from 'boring-avatars';
 import { Pencil, Trash } from 'lucide-react';
 import { SettingsMessages } from '@/types/settings';
 import { TokenContext } from '@/utils/TokenProvider';
@@ -13,6 +12,7 @@ import ProjectDialog from '@/components/ProjectDialog';
 import { UserType } from '@/types/user';
 import { findUser } from '@/utils/usersControl';
 import { logError } from '@/utils/errorHandler';
+import UserAvatar from '@/components/UserAvatar';
 
 type Props = {
   projectId: string;
@@ -130,12 +130,7 @@ export default function SettingsPage({ projectId, messages, projectDialogMessage
               <TableCell>{messages.projectOwner}</TableCell>
               <TableCell>
                 <div className="flex gap-2 items-center">
-                  <Avatar
-                    size={24}
-                    name={owner.username}
-                    variant="beam"
-                    colors={['#0A0310', '#49007E', '#FF005B', '#FF7D10', '#FFB238']}
-                  />
+                  <UserAvatar size={24} username={owner.username} avatarPath={owner.avatarPath} />
                   <p className="">{owner.username}</p>
                 </div>
               </TableCell>