Merge branch 'tombstone-design' into 'develop'

Tombstone: improve design

See merge request soapbox-pub/soapbox-fe!1403

app/soapbox/components/tombstone.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Text } from 'soapbox/components/ui';
+
+/** Represents a deleted item. */
+const Tombstone: React.FC = () => {
+  return (
+    <div className='my-4 p-9 flex items-center justify-center sm:rounded-xl bg-gray-100 border border-solid border-gray-200 dark:bg-slate-900 dark:border-slate-700'>
+      <Text>
+        <FormattedMessage id='statuses.tombstone' defaultMessage='One or more posts is unavailable.' />
+      </Text>
+    </div>
+  );
+};
+
+export default Tombstone;

app/soapbox/features/status/index.tsx

@@ -19,6 +19,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import ScrollableList from 'soapbox/components/scrollable_list';
 import SubNavigation from 'soapbox/components/sub_navigation';
+import Tombstone from 'soapbox/components/tombstone';
 import { Column, Stack } from 'soapbox/components/ui';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
 import PendingStatus from 'soapbox/features/ui/components/pending_status';
@@ -560,8 +561,8 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
 
   renderTombstone(id: string) {
     return (
-      <div className='tombstone' key={id}>
-        <p><FormattedMessage id='statuses.tombstone' defaultMessage='One or more posts is unavailable.' /></p>
+      <div className='pb-4'>
+        <Tombstone key={id} />
       </div>
     );
   }