EmbedModal: improve styling

app/soapbox/features/ui/components/embed_modal.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { closeModal } from 'soapbox/actions/modals';
 import SafeEmbed from 'soapbox/components/safe-embed';
 import { Modal, Stack, Text, Input } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
 import useEmbed from 'soapbox/queries/embed';
 
 interface IEmbedModal {
@@ -11,6 +13,7 @@ interface IEmbedModal {
 }
 
 const EmbedModal: React.FC<IEmbedModal> = ({ url, onError }) => {
+  const dispatch = useAppDispatch();
   const { data: embed, error, isError } = useEmbed(url);
 
   useEffect(() => {
@@ -23,11 +26,17 @@ const EmbedModal: React.FC<IEmbedModal> = ({ url, onError }) => {
     e.currentTarget.select();
   };
 
+  const handleClose = () => {
+    dispatch(closeModal('EMBED'));
+  };
+
   return (
-    <Modal title={<FormattedMessage id='status.embed' defaultMessage='Embed' />}>
+    <Modal
+      title={<FormattedMessage id='status.embed' defaultMessage='Embed post' />}
+      onClose={handleClose}
+    >
       <Stack space={4}>
-        <Stack>
+        <Text theme='muted'>
-          <Text theme='muted' size='sm'>
           <FormattedMessage id='embed.instructions' defaultMessage='Embed this post on your website by copying the code below.' />
         </Text>
 
@@ -39,13 +48,14 @@ const EmbedModal: React.FC<IEmbedModal> = ({ url, onError }) => {
         />
       </Stack>
 
+      <hr className='my-9' />
+
       <SafeEmbed
-          className='inline-flex rounded-xl overflow-hidden max-w-full'
+        className='rounded-xl overflow-hidden w-full'
         sandbox='allow-same-origin allow-scripts'
         title='embedded-status'
         html={embed?.html}
       />
-      </Stack>
     </Modal>
   );
 };

app/soapbox/locales/en.json

@@ -986,7 +986,7 @@
   "status.delete": "Delete",
   "status.detailed_status": "Detailed conversation view",
   "status.direct": "Direct message @{name}",
-  "status.embed": "Embed",
+  "status.embed": "Embed post",
   "status.favourite": "Like",
   "status.filtered": "Filtered",
   "status.load_more": "Load more",