Merge remote-tracking branch 'origin/develop' into sensitive-video-fix

app/soapbox/features/ui/components/profile-fields-panel.tsx

@@ -2,7 +2,8 @@ import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl, FormattedMessage, FormatDateOptions } from 'react-intl';
 
-import { Widget, Stack, HStack, Icon, Text } from 'soapbox/components/ui';
+import Markup from 'soapbox/components/markup';
+import { Widget, Stack, HStack, Icon } from 'soapbox/components/ui';
 import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
 import { CryptoAddress } from 'soapbox/features/ui/util/async-components';
 
@@ -51,7 +52,7 @@ const ProfileField: React.FC<IProfileField> = ({ field }) => {
   return (
     <dl>
       <dt title={field.name}>
-        <Text weight='bold' tag='span' dangerouslySetInnerHTML={{ __html: field.name_emojified }} />
+        <Markup weight='bold' tag='span' dangerouslySetInnerHTML={{ __html: field.name_emojified }} />
       </dt>
 
       <dd
@@ -65,7 +66,7 @@ const ProfileField: React.FC<IProfileField> = ({ field }) => {
             </span>
           )}
 
-          <Text className='break-words overflow-hidden' tag='span' dangerouslySetInnerHTML={{ __html: field.value_emojified }} />
+          <Markup className='break-words overflow-hidden' tag='span' dangerouslySetInnerHTML={{ __html: field.value_emojified }} />
         </HStack>
       </dd>
     </dl>

app/soapbox/features/ui/components/profile-info-panel.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import Badge from 'soapbox/components/badge';
+import Markup from 'soapbox/components/markup';
 import { Icon, HStack, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification-badge';
 import { useSoapboxConfig } from 'soapbox/hooks';
@@ -139,13 +140,6 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
   return (
     <div className='mt-6 min-w-0 flex-1 sm:px-2'>
       <Stack space={2}>
-        {/* Not sure if this is actual used. */}
-        {/* <div className='profile-info-panel-content__deactivated'>
-          <FormattedMessage
-            id='account.deactivated_description' defaultMessage='This account has been deactivated.'
-          />
-        </div> */}
-
         <Stack>
           <HStack space={1} alignItems='center'>
             <Text size='lg' weight='bold' dangerouslySetInnerHTML={displayNameHtml} />
@@ -178,8 +172,8 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
 
         <ProfileStats account={account} />
 
-        {account.note.length > 0 && account.note !== '<p></p>' && (
-          <Text size='sm' dangerouslySetInnerHTML={content} />
+        {account.note.length > 0 && (
+          <Markup size='sm' dangerouslySetInnerHTML={content} />
         )}
 
         <div className='flex flex-col md:flex-row items-start md:flex-wrap md:items-center gap-2'>

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

@@ -36,13 +36,9 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
     <div className='relative'>
       <Stack space={2}>
         <Stack>
-          <div className='-mt-4 -mx-4 h-24 bg-gray-200 relative'>
+          <div className='-mt-4 -mx-4 h-24 bg-gray-200 relative overflow-hidden'>
             {header && (
-              <StillImage
-                src={account.get('header')}
-                className='absolute inset-0 object-cover'
-                alt=''
-              />
+              <StillImage src={account.header} />
             )}
           </div>