From a939d972c706e2a8674d71d0dca1df12ef660601 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 16 May 2022 21:30:30 -0500
Subject: [PATCH] Tombstone: improve design

---
 app/soapbox/components/tombstone.tsx  | 17 +++++++++++++++++
 app/soapbox/features/status/index.tsx |  5 +++--
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 app/soapbox/components/tombstone.tsx

diff --git a/app/soapbox/components/tombstone.tsx b/app/soapbox/components/tombstone.tsx
new file mode 100644
index 000000000..f99379315
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index f7f1a8268..33666c56b 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/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>
     );
   }