From 393f6a9b608e67c1f69ff9a77511c9f51743825d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 22 Aug 2022 12:08:30 -0500
Subject: [PATCH] EmbedModal: improve styling

---
 .../features/ui/components/embed_modal.tsx    | 46 +++++++++++--------
 app/soapbox/locales/en.json                   |  2 +-
 2 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/app/soapbox/features/ui/components/embed_modal.tsx b/app/soapbox/features/ui/components/embed_modal.tsx
index ce1fb5911..29a65db6d 100644
--- a/app/soapbox/features/ui/components/embed_modal.tsx
+++ b/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,29 +26,36 @@ 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' size='sm'>
-            <FormattedMessage id='embed.instructions' defaultMessage='Embed this post on your website by copying the code below.' />
-          </Text>
+        <Text theme='muted'>
+          <FormattedMessage id='embed.instructions' defaultMessage='Embed this post on your website by copying the code below.' />
+        </Text>
 
-          <Input
-            type='text'
-            readOnly
-            value={embed?.html || ''}
-            onClick={handleInputClick}
-          />
-        </Stack>
-
-        <SafeEmbed
-          className='inline-flex rounded-xl overflow-hidden max-w-full'
-          sandbox='allow-same-origin allow-scripts'
-          title='embedded-status'
-          html={embed?.html}
+        <Input
+          type='text'
+          readOnly
+          value={embed?.html || ''}
+          onClick={handleInputClick}
         />
       </Stack>
+
+      <hr className='my-9' />
+
+      <SafeEmbed
+        className='rounded-xl overflow-hidden w-full'
+        sandbox='allow-same-origin allow-scripts'
+        title='embedded-status'
+        html={embed?.html}
+      />
     </Modal>
   );
 };
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index 94e50c152..a30103589 100644
--- a/app/soapbox/locales/en.json
+++ b/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",