From 2eb08aced9a4314e7b3cf7cbc6cb8c2833c7c641 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 16 Sep 2022 12:24:33 -0500
Subject: [PATCH] Create OutlineBox component Visual container for QuotedStatus
 and Accounts in some scenarios

---
 app/soapbox/components/outline-box.tsx        | 18 ++++++
 app/soapbox/components/quoted-status.tsx      | 60 ++++++++++---------
 .../account-moderation-modal.tsx              |  5 +-
 3 files changed, 53 insertions(+), 30 deletions(-)
 create mode 100644 app/soapbox/components/outline-box.tsx

diff --git a/app/soapbox/components/outline-box.tsx b/app/soapbox/components/outline-box.tsx
new file mode 100644
index 0000000000..91ad1c57d4
--- /dev/null
+++ b/app/soapbox/components/outline-box.tsx
@@ -0,0 +1,18 @@
+import classNames from 'clsx';
+import React from 'react';
+
+interface IOutlineBox {
+  children: React.ReactNode,
+  className?: string,
+}
+
+/** Wraps children in a container with an outline. */
+const OutlineBox: React.FC<IOutlineBox> = ({ children, className }) => {
+  return (
+    <div className={classNames('p-4 rounded-lg border border-solid border-gray-300 dark:border-gray-800', className)}>
+      {children}
+    </div>
+  );
+};
+
+export default OutlineBox;
\ No newline at end of file
diff --git a/app/soapbox/components/quoted-status.tsx b/app/soapbox/components/quoted-status.tsx
index a8809bedf4..9a758225b9 100644
--- a/app/soapbox/components/quoted-status.tsx
+++ b/app/soapbox/components/quoted-status.tsx
@@ -9,6 +9,8 @@ import AccountContainer from 'soapbox/containers/account_container';
 import { useSettings } from 'soapbox/hooks';
 import { defaultMediaVisibility } from 'soapbox/utils/status';
 
+import OutlineBox from './outline-box';
+
 import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
 const messages = defineMessages({
@@ -123,38 +125,40 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   }
 
   return (
-    <Stack
-      data-testid='quoted-status'
-      space={2}
-      className={classNames('mt-3 p-4 rounded-lg border border-solid border-gray-300 dark:border-gray-800 cursor-pointer', {
-        'hover:bg-gray-100 dark:hover:bg-gray-800': !compose,
-      })}
-      onClick={handleExpandClick}
+    <OutlineBox className={classNames('mt-3 cursor-pointer', {
+      'hover:bg-gray-100 dark:hover:bg-gray-800': !compose,
+    })}
     >
-      <AccountContainer
-        {...actions}
-        id={account.id}
-        timestamp={status.created_at}
-        withRelationship={false}
-        showProfileHoverCard={!compose}
-        withLinkToProfile={!compose}
-      />
+      <Stack
+        data-testid='quoted-status'
+        space={2}
+        onClick={handleExpandClick}
+      >
+        <AccountContainer
+          {...actions}
+          id={account.id}
+          timestamp={status.created_at}
+          withRelationship={false}
+          showProfileHoverCard={!compose}
+          withLinkToProfile={!compose}
+        />
 
-      {renderReplyMentions()}
+        {renderReplyMentions()}
 
-      <Text
-        className='break-words status__content status__content--quote'
-        size='sm'
-        dangerouslySetInnerHTML={{ __html: status.contentHtml }}
-      />
+        <Text
+          className='break-words status__content status__content--quote'
+          size='sm'
+          dangerouslySetInnerHTML={{ __html: status.contentHtml }}
+        />
 
-      <StatusMedia
-        status={status}
-        muted={compose}
-        showMedia={showMedia}
-        onToggleVisibility={handleToggleMediaVisibility}
-      />
-    </Stack>
+        <StatusMedia
+          status={status}
+          muted={compose}
+          showMedia={showMedia}
+          onToggleVisibility={handleToggleMediaVisibility}
+        />
+      </Stack>
+    </OutlineBox>
   );
 };
 
diff --git a/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx b/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
index 8f91e1d3ca..8c9f3df06d 100644
--- a/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
@@ -13,6 +13,7 @@ import snackbar from 'soapbox/actions/snackbar';
 import Account from 'soapbox/components/account';
 import List, { ListItem } from 'soapbox/components/list';
 import MissingIndicator from 'soapbox/components/missing_indicator';
+import OutlineBox from 'soapbox/components/outline-box';
 import { Button, Text, HStack, Modal, Stack, Toggle } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
@@ -109,14 +110,14 @@ const AccountModerationModal: React.FC<IAccountModerationModal> = ({ onClose, ac
       onClose={handleClose}
     >
       <Stack space={4}>
-        <div className='p-4 rounded-lg border border-solid border-gray-300 dark:border-gray-800'>
+        <OutlineBox>
           <Account
             account={account}
             showProfileHoverCard={false}
             withLinkToProfile={false}
             hideActions
           />
-        </div>
+        </OutlineBox>
 
         <List>
           {(ownAccount.admin && isLocal(account)) && (