Merge branch 'hover-card-avatar' into 'develop'

Fix avatar size in profile hover card

See merge request soapbox-pub/soapbox!2157

app/soapbox/features/ui/components/user-panel.tsx

@@ -26,10 +26,10 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
   const fqn = useAppSelector((state) => displayFqn(state));
 
   if (!account) return null;
-  const displayNameHtml = { __html: account.get('display_name_html') };
+  const displayNameHtml = { __html: account.display_name_html };
-  const acct = !account.get('acct').includes('@') && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
+  const acct = !account.acct.includes('@') && domain ? `${account.acct}@${domain}` : account.acct;
-  const header = account.get('header');
+  const header = account.header;
-  const verified = account.get('verified');
+  const verified = account.verified;
 
   return (
     <div className='relative'>
@@ -43,11 +43,11 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
 
           <HStack justifyContent='between'>
             <Link
-              to={`/@${account.get('acct')}`}
+              to={`/@${account.acct}`}
               title={acct}
               className='-mt-12 block'
             >
-              <Avatar src={account.avatar} className='h-20 w-20 bg-gray-50 ring-2 ring-white overflow-hidden' />
+              <Avatar src={account.avatar} size={80} className='h-20 w-20 bg-gray-50 ring-2 ring-white overflow-hidden' />
             </Link>
 
             {action && (
@@ -57,7 +57,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
         </Stack>
 
         <Stack>
-          <Link to={`/@${account.get('acct')}`}>
+          <Link to={`/@${account.acct}`}>
             <HStack space={1} alignItems='center'>
               <Text size='lg' weight='bold' dangerouslySetInnerHTML={displayNameHtml} />
 
@@ -77,11 +77,11 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
         </Stack>
 
         <HStack alignItems='center' space={3}>
-          {account.get('followers_count') >= 0 && (
+          {account.followers_count >= 0 && (
-            <Link to={`/@${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
+            <Link to={`/@${account.acct}/followers`} title={intl.formatNumber(account.followers_count)}>
               <HStack alignItems='center' space={1}>
                 <Text theme='primary' weight='bold' size='sm'>
-                  {shortNumberFormat(account.get('followers_count'))}
+                  {shortNumberFormat(account.followers_count)}
                 </Text>
                 <Text weight='bold' size='sm'>
                   <FormattedMessage id='account.followers' defaultMessage='Followers' />
@@ -90,11 +90,11 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
             </Link>
           )}
 
-          {account.get('following_count') >= 0 && (
+          {account.following_count >= 0 && (
-            <Link to={`/@${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
+            <Link to={`/@${account.acct}/following`} title={intl.formatNumber(account.following_count)}>
               <HStack alignItems='center' space={1}>
                 <Text theme='primary' weight='bold' size='sm'>
-                  {shortNumberFormat(account.get('following_count'))}
+                  {shortNumberFormat(account.following_count)}
                 </Text>
                 <Text weight='bold' size='sm'>
                   <FormattedMessage id='account.follows' defaultMessage='Follows' />