diff --git a/client/package-lock.json b/client/package-lock.json
index ecb5fdd0..99893a6c 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -45,7 +45,6 @@
"history": "^5.3.0",
"i18next": "^25.8.18",
"i18next-browser-languagedetector": "^8.2.1",
- "initials": "^3.1.2",
"javascript-time-ago": "^2.6.4",
"js-cookie": "^3.0.5",
"jwt-decode": "^4.0.0",
@@ -10586,12 +10585,6 @@
"node": ">=10"
}
},
- "node_modules/initials": {
- "version": "3.1.2",
- "resolved": "https://registry.npmjs.org/initials/-/initials-3.1.2.tgz",
- "integrity": "sha512-Sltg35nx8+GX1w4U86rmbxFEmqFiSuMJviS6cB2KChB+jcT2/8Td+nlImXD74HkqpZF5PMv8hN57AyrA/7ltXw==",
- "license": "MIT"
- },
"node_modules/inline-style-prefixer": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz",
diff --git a/client/package.json b/client/package.json
index 2dc44c2a..d648f2b3 100644
--- a/client/package.json
+++ b/client/package.json
@@ -122,7 +122,6 @@
"history": "^5.3.0",
"i18next": "^25.8.18",
"i18next-browser-languagedetector": "^8.2.1",
- "initials": "^3.1.2",
"javascript-time-ago": "^2.6.4",
"js-cookie": "^3.0.5",
"jwt-decode": "^4.0.0",
diff --git a/client/src/components/users/UserAvatar/UserAvatar.jsx b/client/src/components/users/UserAvatar/UserAvatar.jsx
index c4881230..a522b5dc 100755
--- a/client/src/components/users/UserAvatar/UserAvatar.jsx
+++ b/client/src/components/users/UserAvatar/UserAvatar.jsx
@@ -5,7 +5,6 @@
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';
-import initials from 'initials';
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
@@ -35,6 +34,19 @@ const COLORS = [
'midnight-blue',
];
+const getInitials = (name) => {
+ const words = name
+ .trim()
+ .split(/[\s-]+/)
+ .filter(Boolean);
+ if (words.length === 0) return '';
+ if (words.length === 1) return [...words[0]].slice(0, 2).join('');
+ return words
+ .slice(0, 2)
+ .map((word) => [...word][0])
+ .join('');
+};
+
const getColor = (name) => {
let sum = 0;
for (let i = 0; i < name.length; i += 1) {
@@ -78,7 +90,7 @@ const UserAvatar = React.memo(
background: avatarUrl && `url("${avatarUrl}") center / cover`,
}}
>
- {!avatarUrl && {initials(user.name).slice(0, 2)}}
+ {!avatarUrl && {getInitials(user.name)}}
{withCreatorIndicator && +}
);