- Replace avatar image from API with gradient avatar from twake-mui (#457)

- Display 2-letter initials (e.g., "JD" for "John Doe") instead of single letter
- Add getInitials helper function in avatarUtils for reusability
- Update Avatar in PeopleSearch, CalendarSearch, and Menubar components
- Remove avatarUrl prop usage across all Avatar components

src/components/Attendees/PeopleSearch.tsx

@@ -8,6 +8,7 @@ import {
   ListItemText,
   TextField,
 } from "@linagora/twake-mui";
+import { stringAvatar } from "../Event/utils/eventUtils";
 import {
   type ReactNode,
   useCallback,
@@ -287,7 +288,7 @@ export function PeopleSearch({
           return (
             <ListItem key={key + option?.email} {...otherProps} disableGutters>
               <ListItemAvatar>
-                <Avatar src={option.avatarUrl} alt={option.displayName} />
+                <Avatar {...stringAvatar(option.displayName || option.email)} />
               </ListItemAvatar>
               <ListItemText
                 primary={option.displayName}

src/components/Calendar/CalendarSearch.tsx

@@ -9,6 +9,7 @@ import {
   useTheme,
 } from "@linagora/twake-mui";
 import { useI18n } from "twake-i18n";
+import { stringAvatar } from "../Event/utils/eventUtils";
 import { useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { getCalendars } from "../../features/Calendars/CalendarApi";
@@ -50,8 +51,7 @@ function CalendarItem({
     >
       <Box display="flex" alignItems="center" gap={2}>
         <Avatar
-          src={cal.owner.avatarUrl}
-          alt={cal.owner.email}
+          {...stringAvatar(cal.owner.displayName || cal.owner.email)}
           style={{
             border: `2px solid ${cal.cal["apple:color"] || defaultColors[0].light}`,
             boxShadow: cal.cal["apple:color"]

src/components/Event/utils/eventUtils.tsx

@@ -1,7 +1,7 @@
 import CancelIcon from "@mui/icons-material/Cancel";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import { Avatar, Badge, Box, Typography } from "@linagora/twake-mui";
-import { stringToGradient } from "../../../utils/avatarUtils";
+import { stringToGradient, getInitials } from "../../../utils/avatarUtils";
 import { ThunkDispatch } from "@reduxjs/toolkit";
 import { emptyEventsCal } from "../../../features/Calendars/CalendarSlice";
 import { getCalendarsListAsync } from "../../../features/Calendars/services/getCalendarsListAsync";
@@ -103,7 +103,7 @@ export function stringToColor(string: string) {
 export function stringAvatar(name: string) {
   return {
     color: stringToGradient(name),
-    children: name[0],
+    children: getInitials(name),
   };
 }
 

src/components/Menubar/Menubar.tsx

@@ -8,7 +8,7 @@ import SettingsIcon from "@mui/icons-material/Settings";
 import LogoutIcon from "@mui/icons-material/Logout";
 import "./Menubar.styl";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import { stringToGradient } from "../../utils/avatarUtils";
+import { stringToGradient, getInitials } from "../../utils/avatarUtils";
 import {
   Avatar,
   IconButton,
@@ -262,19 +262,11 @@ export function Menubar({
           <div className="menu-items">
             <IconButton onClick={handleUserMenuClick}>
               <Avatar
-                color={stringToGradient(
-                  user && user.family_name
-                    ? user.family_name
-                    : user && user.email
-                      ? user.email
-                      : ""
-                )}
+                color={stringToGradient(getUserDisplayName(user))}
                 size="m"
                 aria-label={t("menubar.userProfile")}
               >
-                {user?.name && user?.family_name
-                  ? `${user.name[0]}${user.family_name[0]}`
-                  : (user?.email?.[0] ?? "")}
+                {getInitials(getUserDisplayName(user))}
               </Avatar>
             </IconButton>
           </div>
@@ -338,19 +330,11 @@ export function Menubar({
           }}
         >
           <Avatar
-            color={stringToGradient(
-              user && user.family_name
-                ? user.family_name
-                : user && user.email
-                  ? user.email
-                  : ""
-            )}
+            color={stringToGradient(getUserDisplayName(user))}
             size="m"
             sx={{ marginBottom: "8px" }}
           >
-            {user?.name && user?.family_name
-              ? `${user.name[0]}${user.family_name[0]}`
-              : (user?.email?.[0] ?? "")}
+            {getInitials(getUserDisplayName(user))}
           </Avatar>
           <Typography variant="body1" sx={{ fontWeight: 500 }}>
             {getUserDisplayName(user)}