Create OutlineBox component

Visual container for QuotedStatus and Accounts in some scenarios

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;

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,12 +125,13 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   }
 
   return (
+    <OutlineBox className={classNames('mt-3 cursor-pointer', {
+      'hover:bg-gray-100 dark:hover:bg-gray-800': !compose,
+    })}
+    >
       <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}
       >
         <AccountContainer
@@ -155,6 +158,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
           onToggleVisibility={handleToggleMediaVisibility}
         />
       </Stack>
+    </OutlineBox>
   );
 };
 

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)) && (