Use Boring Avatar to show user avatar

frontend/src/app/[locale]/account/AccountPage.tsx

@@ -1,7 +1,8 @@
 'use client';
 import { useContext } from 'react';
-import { Avatar, Card, CardHeader, CardBody, Divider } from '@nextui-org/react';
+import { Card, CardHeader, CardBody, Divider } from '@nextui-org/react';
 import { TokenContext } from '../TokenProvider';
+import Avatar from 'boring-avatars';
 
 type AccountPageMessages = {
   yourProjects: string;
@@ -20,7 +21,12 @@ export default function AccountPage({ messages, locale }: Props) {
       {context.token && context.token.user && (
         <Card className="w-[600px] mt-16 mx-3">
           <CardHeader className="flex gap-6">
-            <Avatar isBordered radius="full" className="w-16 h-16 text-large" src={context.token.user.avatarPath} />
+            <Avatar
+              size={48}
+              name={context.token.user.username}
+              variant="beam"
+              colors={['#0A0310', '#49007E', '#FF005B', '#FF7D10', '#FFB238']}
+            />
             <div className="flex flex-col">
               <p className="text-2xl font-bold">{context.token.user.username}</p>
               <p className="text-lg text-default-500">{context.token.user.email}</p>