Added images to avatars in AdminX Settings

refs. https://github.com/TryGhost/Team/issues/3318
This commit is contained in:
Peter Zimon 2023-05-30 14:53:18 +02:00
parent 2aa0bba8d4
commit 5831e63dcf
3 changed files with 12 additions and 10 deletions

View File

@ -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>
)

View File

@ -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}`}

View File

@ -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'>