Update avatar component

src/components/Event/EventChip/EventChip.tsx

@@ -110,7 +110,7 @@ export function EventChip({
           event._def.extendedProps.organizer?.cn ??
             event._def.extendedProps.organizer?.cal_address
         )
-      : { style: {}, children: null };
+      : { color: undefined, children: null };
 
     return (
       <Card
@@ -261,10 +261,9 @@ export function EventChip({
           (window as any).displayOrgAvatar && (
             <Avatar
               children={OrganizerAvatar.children}
-              style={{
-                ...OrganizerAvatar.style,
-                width: "20px",
-                height: "20px",
+              color={OrganizerAvatar.color}
+              size="xs"
+              sx={{
                 bottom: 0,
                 right: 0,
                 margin: "8px",

src/components/Event/utils/eventUtils.tsx

@@ -1,6 +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 { ThunkDispatch } from "@reduxjs/toolkit";
 import {
   emptyEventsCal,
@@ -101,7 +102,7 @@ export function stringToColor(string: string) {
 
 export function stringAvatar(name: string) {
   return {
-    style: { backgroundColor: stringToColor(name) },
+    color: stringToGradient(name),
     children: name[0],
   };
 }

src/components/Menubar/Menubar.tsx

@@ -9,6 +9,7 @@ import LogoutIcon from "@mui/icons-material/Logout";
 import "./Menubar.styl";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { stringToColor } from "../Event/utils/eventUtils";
+import { stringToGradient } from "../../utils/avatarUtils";
 import {
   Avatar,
   IconButton,
@@ -255,16 +256,14 @@ export function Menubar({
           <div className="menu-items">
             <IconButton onClick={handleUserMenuClick}>
               <Avatar
-                style={{
-                  backgroundColor: stringToColor(
-                    user && user.family_name
-                      ? user.family_name
-                      : user && user.email
-                        ? user.email
-                        : ""
-                  ),
-                }}
-                sizes="large"
+                color={stringToGradient(
+                  user && user.family_name
+                    ? user.family_name
+                    : user && user.email
+                      ? user.email
+                      : ""
+                )}
+                size="m"
                 aria-label={t("menubar.userProfile")}
               >
                 {user?.name && user?.family_name
@@ -333,17 +332,15 @@ export function Menubar({
           }}
         >
           <Avatar
-            style={{
-              backgroundColor: stringToColor(
-                user && user.family_name
-                  ? user.family_name
-                  : user && user.email
-                    ? user.email
-                    : ""
-              ),
-              marginBottom: "8px",
-            }}
-            sizes="large"
+            color={stringToGradient(
+              user && user.family_name
+                ? user.family_name
+                : user && user.email
+                  ? user.email
+                  : ""
+            )}
+            size="m"
+            sx={{ marginBottom: "8px" }}
           >
             {user?.name && user?.family_name
               ? `${user.name[0]}${user.family_name[0]}`