bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'fix-header-preview' into 'develop'

Browse source 
ProfilePreview: fix display of header image, code cleanup

See merge request soapbox-pub/soapbox!1929
This commit is contained in:
Alex Gleason 2022-11-23 18:24:45 +00:00
commit c4d3719918
2 changed files with 16 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/components/ui/avatar/avatar.tsx
View file

@ -25,7 +25,7 @@ const Avatar = (props: IAvatar) => {
return ( return (
<StillImage <StillImage
className={classNames('rounded-full overflow-hidden', className)} className={classNames('rounded-full', className)}
style={style} style={style}
src={src} src={src}
alt='Avatar' alt='Avatar'

27
app/soapbox/features/edit-profile/components/profile-preview.tsx
View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import StillImage from 'soapbox/components/still-image'; import StillImage from 'soapbox/components/still-image';
import { HStack, Stack, Text } from 'soapbox/components/ui'; import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
import VerificationBadge from 'soapbox/components/verification-badge'; import VerificationBadge from 'soapbox/components/verification-badge';
import { useSoapboxConfig } from 'soapbox/hooks'; import { useSoapboxConfig } from 'soapbox/hooks';
@ -17,25 +17,28 @@ const ProfilePreview: React.FC<IProfilePreview> = ({ account }) => {
return ( return (
<div className='bg-white dark:bg-gray-800 rounded-lg text-black dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden'> <div className='bg-white dark:bg-gray-800 rounded-lg text-black dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden'>
<div> <div className='relative overflow-hidden isolate w-full h-32 md:rounded-t-lg bg-gray-200 dark:bg-gray-900/50'>
<div className='relative w-full h-32 md:rounded-t-lg bg-gray-200 dark:bg-gray-900/50'> <StillImage src={account.header} />
<StillImage alt='' src={account.header} className='absolute inset-0 object-cover md:rounded-t-lg' />
</div>
</div> </div>
<HStack space={3} alignItems='center' className='p-3'> <HStack space={3} alignItems='center' className='p-3'>
<div className='relative'> <div className='relative'>
<div className='h-12 w-12 bg-gray-400 rounded-full'> <Avatar className='bg-gray-400' src={account.avatar} />
<StillImage alt='' className='h-12 w-12 rounded-full' src={account.avatar} />
</div>
{account.verified && <div className='absolute -top-1.5 -right-1.5'><VerificationBadge /></div>} {account.verified && (
<div className='absolute -top-1.5 -right-1.5'>
<VerificationBadge />
</div>
)}
</div> </div>
<Stack className='truncate'> <Stack className='truncate'>
<Text weight='medium' size='sm' truncate> <Text
{account.display_name} weight='medium'
</Text> size='sm'
truncate
dangerouslySetInnerHTML={{ __html: account.display_name_html }}
/>
<Text theme='muted' size='sm'>@{displayFqn ? account.fqn : account.acct}</Text> <Text theme='muted' size='sm'>@{displayFqn ? account.fqn : account.acct}</Text>
</Stack> </Stack>
</HStack> </HStack>