Update avatar component

__test__/features/Events/EventDisplay.test.tsx

@@ -1957,7 +1957,8 @@ describe("Helper functions", () => {
   it("stringAvatar returns correct props", () => {
     const result = stringAvatar("Alice");
     expect(result.children).toBe("A");
-    expect(result.style.backgroundColor).toMatch(/^#/);
+    expect(result.color).toBeDefined();
+    expect(typeof result.color).toBe("string");
   });
 
   it("InfoRow renders text and link if url is valid", () => {

package-lock.json

@@ -17,7 +17,7 @@
         "@fullcalendar/moment-timezone": "^6.1.19",
         "@fullcalendar/react": "^6.1.17",
         "@fullcalendar/timegrid": "^6.1.17",
-        "@linagora/twake-mui": "1.1.0",
+        "@linagora/twake-mui": "1.1.1",
         "@mui/icons-material": "^7.1.2",
         "@mui/material": "^7.1.2",
         "@mui/x-date-pickers": "^8.14.0",
@@ -82,7 +82,6 @@
     "../twake-ui/packages/twake-mui": {
       "name": "@linagora/twake-mui",
       "version": "1.1.0",
-      "extraneous": true,
       "license": "MIT",
       "dependencies": {
         "react": "^18.2.0",
@@ -3165,23 +3164,8 @@
       }
     },
     "node_modules/@linagora/twake-mui": {
-      "version": "1.1.0",
+      "resolved": "../twake-ui/packages/twake-mui",
-      "resolved": "https://npm.pkg.github.com/download/@linagora/twake-mui/1.1.0/1c08eca803bbaec80c54c317427cb6090600a27c",
+      "link": true
-      "integrity": "sha512-ryO3L0cgokp1ald3DdviY/QFjkSEfjqADZYeKaG52aE0ubHVY4eV73usIIJ0QDny5IaSZ8dHk38YPWVEOgtUNQ==",
-      "dependencies": {
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-      },
-      "engines": {
-        "node": "24.x"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.14.0",
-        "@emotion/styled": "^11.14.1",
-        "@mui/material": "^7.1.2",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-      }
     },
     "node_modules/@module-federation/error-codes": {
       "version": "0.21.6",

package.json

@@ -12,7 +12,7 @@
     "@fullcalendar/moment-timezone": "^6.1.19",
     "@fullcalendar/react": "^6.1.17",
     "@fullcalendar/timegrid": "^6.1.17",
-    "@linagora/twake-mui": "1.1.0",
+    "@linagora/twake-mui": "1.1.1",
     "@mui/icons-material": "^7.1.2",
     "@mui/material": "^7.1.2",
     "@mui/x-date-pickers": "^8.14.0",

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={{
+              color={OrganizerAvatar.color}
-                ...OrganizerAvatar.style,
+              size="xs"
-                width: "20px",
+              sx={{
-                height: "20px",
                 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={{
+                color={stringToGradient(
-                  backgroundColor: stringToColor(
+                  user && user.family_name
-                    user && user.family_name
+                    ? user.family_name
-                      ? user.family_name
+                    : user && user.email
-                      : user && user.email
+                      ? user.email
-                        ? user.email
+                      : ""
-                        : ""
+                )}
-                  ),
+                size="m"
-                }}
-                sizes="large"
                 aria-label={t("menubar.userProfile")}
               >
                 {user?.name && user?.family_name
@@ -333,17 +332,15 @@ export function Menubar({
           }}
         >
           <Avatar
-            style={{
+            color={stringToGradient(
-              backgroundColor: stringToColor(
+              user && user.family_name
-                user && user.family_name
+                ? user.family_name
-                  ? user.family_name
+                : user && user.email
-                  : user && user.email
+                  ? user.email
-                    ? user.email
+                  : ""
-                    : ""
+            )}
-              ),
+            size="m"
-              marginBottom: "8px",
+            sx={{ marginBottom: "8px" }}
-            }}
-            sizes="large"
           >
             {user?.name && user?.family_name
               ? `${user.name[0]}${user.family_name[0]}`

src/features/Settings/SettingsPage.tsx

@@ -418,11 +418,7 @@ export default function SettingsPage() {
               )}
               {activeSettingsSubTab === "notifications" && (
                 <Box className="settings-tab-content">
-                  <Typography
+                  <Typography variant="h6" sx={{ mb: 3 }}>
-                    variant="body2"
-                    color="text.secondary"
-                    sx={{ mb: 3 }}
-                  >
                     {t("settings.notifications.deliveryMethod") ||
                       "Delivery method"}
                   </Typography>

src/utils/avatarUtils.ts

@@ -0,0 +1,11 @@
+import { nameToColor } from "@linagora/twake-mui";
+
+/**
+ * Generate a gradient color from a string
+ * @param str - String to generate color from
+ * @returns Color name for gradient
+ */
+export function stringToGradient(str: string): string | undefined {
+  if (!str) return undefined;
+  return nameToColor(str);
+}