From 5831e63dcfae3421eddd67a1a872350109770509 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Tue, 30 May 2023 14:53:18 +0200
Subject: [PATCH] Added images to avatars in AdminX Settings

refs. https://github.com/TryGhost/Team/issues/3318
---
 .../src/components/settings/general/LockSite.tsx       |  8 ++++----
 .../src/components/settings/general/Users.tsx          |  4 ++--
 .../settings/general/modals/UserDetailModal.tsx        | 10 ++++++----
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx b/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx
index b4cc95a20c..02862428d9 100644
--- a/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx
@@ -33,13 +33,13 @@ const LockSite: React.FC = () => {
                 {
                     key: 'private',
                     value: passwordEnabled ? (
-                        <div className='flex items-center  '>
-                            <Icon color='yellow' name='lock-locked' />
+                        <div className='flex items-center gap-1'>
+                            <Icon color='yellow' name='lock-locked' size='sm' />
                             <span>Your site is password protected</span>
                         </div>
                     ) : (
-                        <div className='flex items-center text-grey-900 '>
-                            <Icon color='black' name='lock-unlocked' />
+                        <div className='flex items-center gap-1 text-grey-900'>
+                            <Icon color='black' name='lock-unlocked' size='sm' />
                             <span>Your site is not password protected</span>
                         </div>
                     )
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 d195282951..5e80ba2e56 100644
--- a/ghost/admin-x-settings/src/components/settings/general/Users.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/Users.tsx
@@ -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' label={getInitials(user.name)} size='lg' />
+            <Avatar bgColor='#efefef' image={user.profile_image} label={getInitials(user.name)} 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' label={getInitials(user.name)} />)}
+                        avatar={(<Avatar bgColor='#efefef' image={user.profile_image} label={getInitials(user.name)} />)}
                         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 2f69357f78..ebea2722e3 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
@@ -254,10 +254,12 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
         >
             <div>
                 <div className='-mx-12 -mt-12 bg-gradient-to-tr from-grey-900 to-black p-12'>
-                    <div className='mt-60'>
-                        <Avatar bgColor='#efefef' className='-ml-1 mb-2' label={getInitials(userData.name)} size='xl' />
-                        <Heading styles='text-white'>{user.name}</Heading>
-                        <span className='text-md font-semibold text-white'>Administrator</span>
+                    <div className='mt-60 flex gap-4'>
+                        <Avatar bgColor='#efefef' className='-ml-1' image={userData.profile_image} label={getInitials(userData.name)} size='xl' />
+                        <div>
+                            <Heading styles='text-white'>{user.name}</Heading>
+                            <span className='text-md font-semibold text-white'>Administrator</span>
+                        </div>
                     </div>
                 </div>
                 <div className='mt-10 grid grid-cols-2 gap-x-12 gap-y-20 pb-10'>