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],
   };
 }