Refactor <DomainBlocks> to TypeScript (#34347)

Co-authored-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/mastodon/components/domain.tsx

@@ -1,24 +1,15 @@
 import { useCallback } from 'react';
 
-import { defineMessages, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
-import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
 import { unblockDomain } from 'mastodon/actions/domain_blocks';
 import { useAppDispatch } from 'mastodon/store';
 
-import { IconButton } from './icon_button';
-
-const messages = defineMessages({
-  unblockDomain: {
-    id: 'account.unblock_domain',
-    defaultMessage: 'Unblock domain {domain}',
-  },
-});
+import { Button } from './button';
 
 export const Domain: React.FC<{
   domain: string;
 }> = ({ domain }) => {
-  const intl = useIntl();
   const dispatch = useAppDispatch();
 
   const handleDomainUnblock = useCallback(() => {
@@ -27,20 +18,17 @@ export const Domain: React.FC<{
 
   return (
     <div className='domain'>
-      <div className='domain__wrapper'>
-        <span className='domain__domain-name'>
-          <strong>{domain}</strong>
-        </span>
+      <div className='domain__domain-name'>
+        <strong>{domain}</strong>
+      </div>
 
-        <div className='domain__buttons'>
-          <IconButton
-            active
-            icon='unlock'
-            iconComponent={LockOpenIcon}
-            title={intl.formatMessage(messages.unblockDomain, { domain })}
-            onClick={handleDomainUnblock}
+      <div className='domain__buttons'>
+        <Button onClick={handleDomainUnblock}>
+          <FormattedMessage
+            id='account.unblock_domain_short'
+            defaultMessage='Unblock'
           />
-        </div>
+        </Button>
       </div>
     </div>
   );