From 9657556265b45cdc80eec88c6f3ca5147f8f0c98 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Tue, 30 May 2023 15:16:49 +0200
Subject: [PATCH] Added avatar color generator helper in AdminX

refs. https://github.com/TryGhost/Team/issues/3318
---
 .../src/components/settings/general/Users.tsx        |  6 +++---
 .../settings/general/modals/UserDetailModal.tsx      |  4 ++--
 ghost/admin-x-settings/src/utils/helpers.ts          | 12 ++++++++++++
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/ghost/admin-x-settings/src/components/settings/general/Users.tsx b/ghost/admin-x-settings/src/components/settings/general/Users.tsx
index 5e80ba2e56..75f7728291 100644
--- a/ghost/admin-x-settings/src/components/settings/general/Users.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/Users.tsx
@@ -11,7 +11,7 @@ import TabView from '../../../admin-x-ds/global/TabView';
 import UserDetailModal from './modals/UserDetailModal';
 import useStaffUsers from '../../../hooks/useStaffUsers';
 import {User} from '../../../types/api';
-import {getInitials} from '../../../utils/helpers';
+import {generateAvatarColor, getInitials} from '../../../utils/helpers';
 
 const Owner: React.FC<{user: User}> = ({user}) => {
     const showDetailModal = () => {
@@ -24,7 +24,7 @@ const Owner: React.FC<{user: User}> = ({user}) => {
 
     return (
         <div className='group flex gap-3 hover:cursor-pointer' onClick={showDetailModal}>
-            <Avatar bgColor='#efefef' image={user.profile_image} label={getInitials(user.name)} size='lg' />
+            <Avatar bgColor={generateAvatarColor((user.name ? user.name : user.email))} image={user.profile_image} label={getInitials(user.name)} labelColor='white' size='lg' />
             <div className='flex flex-col'>
                 <span>{user.name} &mdash; <strong>Owner</strong> <span className='invisible ml-2 inline-block text-sm font-bold text-green group-hover:visible'>Edit</span></span>
                 <span className='text-xs text-grey-700'>{user.email}</span>
@@ -58,7 +58,7 @@ const UsersList: React.FC<UsersListProps> = ({users, updateUser}) => {
                     <ListItem
                         key={user.id}
                         action={<Button color='green' label='Edit' link={true} onClick={() => showDetailModal(user)}/>}
-                        avatar={(<Avatar bgColor='#efefef' image={user.profile_image} label={getInitials(user.name)} />)}
+                        avatar={(<Avatar bgColor={generateAvatarColor((user.name ? user.name : user.email))} image={user.profile_image} label={getInitials(user.name)} labelColor='white' />)}
                         detail={user.email}
                         hideActions={true}
                         id={`list-item-${user.id}`}
diff --git a/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx b/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx
index 9de0f0cba1..dc72354c2e 100644
--- a/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx
@@ -11,7 +11,7 @@ import TextField from '../../../../admin-x-ds/global/TextField';
 import Toggle from '../../../../admin-x-ds/global/Toggle';
 import useRoles from '../../../../hooks/useRoles';
 import {User} from '../../../../types/api';
-import {getInitials} from '../../../../utils/helpers';
+import {generateAvatarColor, getInitials} from '../../../../utils/helpers';
 
 interface CustomHeadingProps {
     children?: React.ReactNode;
@@ -258,7 +258,7 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
                         <div className='absolute inset-0 z-0 block bg-gradient-to-tr from-[rgba(0,0,0,0.5)] to-[rgba(0,0,0,0.01)]'></div>
                     )}
                     <div className='relative z-10 mt-60 flex gap-4'>
-                        <Avatar bgColor='#efefef' className='-ml-1' image={userData.profile_image} label={getInitials(userData.name)} size='xl' />
+                        <Avatar bgColor={generateAvatarColor((userData.name ? userData.name : userData.email))} className='-ml-1' image={userData.profile_image} label={getInitials(userData.name)} labelColor='white' size='xl' />
                         <div>
                             <Heading styles='text-white'>{user.name}</Heading>
                             <span className='text-md font-semibold text-white'>Administrator</span>
diff --git a/ghost/admin-x-settings/src/utils/helpers.ts b/ghost/admin-x-settings/src/utils/helpers.ts
index fd0c31aab5..c3622c8862 100644
--- a/ghost/admin-x-settings/src/utils/helpers.ts
+++ b/ghost/admin-x-settings/src/utils/helpers.ts
@@ -45,4 +45,16 @@ export function getInitials(name: string) {
     ).toUpperCase();
 
     return initials;
+}
+
+export function generateAvatarColor(name: string) {
+    const s = 70;
+    const l = 40;
+    let hash = 0;
+    for (var i = 0; i < name.length; i++) {
+        hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+
+    const h = hash % 360;
+    return 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
 }
\ No newline at end of file