From 55376774c095f15401e218b2ca3ecbcdf8f76c1c Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Tue, 30 May 2023 15:07:03 +0200
Subject: [PATCH] Added cover image to user details in AdminX

refs. https://github.com/TryGhost/Team/issues/3318
---
 .../components/settings/general/modals/UserDetailModal.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

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 ebea2722e3..9de0f0cba1 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
@@ -253,8 +253,11 @@ 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 flex gap-4'>
+                <div className={`relative -mx-12 -mt-12 bg-gradient-to-tr from-grey-900 to-black p-12`} style={userData.cover_image ? {backgroundImage: `url(${userData.cover_image})`, backgroundSize: 'cover'} : {}}>
+                    {userData.cover_image && (
+                        <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' />
                         <div>
                             <Heading styles='text-white'>{user.name}</Heading>