Merge branch 'delete-modal-fix' into 'develop'

Fix account deletion modal

See merge request soapbox-pub/soapbox!1794

app/soapbox/actions/moderation.tsx

@@ -5,6 +5,8 @@ import { fetchAccountByUsername } from 'soapbox/actions/accounts';
 import { deactivateUsers, deleteUsers, deleteStatus, toggleStatusSensitivity } from 'soapbox/actions/admin';
 import { openModal } from 'soapbox/actions/modals';
 import snackbar from 'soapbox/actions/snackbar';
+import OutlineBox from 'soapbox/components/outline-box';
+import { Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 import { isLocal } from 'soapbox/utils/accounts';
 
@@ -43,10 +45,22 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm =
     const acct = state.accounts.get(accountId)!.acct;
     const name = state.accounts.get(accountId)!.username;
 
+    const message = (
+      <Stack space={4}>
+        <OutlineBox>
+          <AccountContainer id={accountId} />
+        </OutlineBox>
+
+        <Text>
+          {intl.formatMessage(messages.deactivateUserPrompt, { acct })}
+        </Text>
+      </Stack>
+    );
+
     dispatch(openModal('CONFIRM', {
       icon: require('@tabler/icons/user-off.svg'),
       heading: intl.formatMessage(messages.deactivateUserHeading, { acct }),
-      message: intl.formatMessage(messages.deactivateUserPrompt, { acct }),
+      message,
       confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }),
       onConfirm: () => {
         dispatch(deactivateUsers([accountId])).then(() => {
@@ -64,22 +78,21 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
     const account = state.accounts.get(accountId)!;
     const acct = account.acct;
     const name = account.username;
-    const favicon = account.pleroma.get('favicon');
     const local = isLocal(account);
 
-    const message = (<>
-      <AccountContainer id={accountId} />
-      {intl.formatMessage(messages.deleteUserPrompt, { acct })}
-    </>);
+    const message = (
+      <Stack space={4}>
+        <OutlineBox>
+          <AccountContainer id={accountId} />
+        </OutlineBox>
 
-    const confirm = (<>
-      {favicon &&
-        <div className='submit__favicon'>
-          <img src={favicon} alt='' />
-        </div>}
-      {intl.formatMessage(messages.deleteUserConfirm, { name })}
-    </>);
+        <Text>
+          {intl.formatMessage(messages.deleteUserPrompt, { acct })}
+        </Text>
+      </Stack>
+    );
 
+    const confirm = intl.formatMessage(messages.deleteUserConfirm, { name });
     const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false;
 
     dispatch(openModal('CONFIRM', {

app/soapbox/components/outline-box.tsx

@@ -0,0 +1,21 @@
+import classNames from 'clsx';
+import React from 'react';
+
+interface IOutlineBox extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode,
+  className?: string,
+}
+
+/** Wraps children in a container with an outline. */
+const OutlineBox: React.FC<IOutlineBox> = ({ children, className, ...rest }) => {
+  return (
+    <div
+      className={classNames('p-4 rounded-lg border border-solid border-gray-300 dark:border-gray-800', className)}
+      {...rest}
+    >
+      {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,38 +125,41 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   }
 
   return (
-    <Stack
+    <OutlineBox
       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', {
+      className={classNames('mt-3 cursor-pointer', {
         'hover:bg-gray-100 dark:hover:bg-gray-800': !compose,
       })}
-      onClick={handleExpandClick}
     >
-      <AccountContainer
-        {...actions}
-        id={account.id}
-        timestamp={status.created_at}
-        withRelationship={false}
-        showProfileHoverCard={!compose}
-        withLinkToProfile={!compose}
-      />
+      <Stack
+        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>
   );
 };
 

app/soapbox/features/ui/components/confirmation_modal.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Modal, Text } from 'soapbox/components/ui';
-import { SimpleForm, FieldsGroup, Checkbox } from 'soapbox/features/forms';
+import List, { ListItem } from 'soapbox/components/list';
+import { Modal, Stack, Text, Toggle } from 'soapbox/components/ui';
 
 interface IConfirmationModal {
   heading: React.ReactNode,
@@ -60,23 +60,23 @@ const ConfirmationModal: React.FC<IConfirmationModal> = ({
       secondaryText={secondary}
       secondaryAction={onSecondary && handleSecondary}
     >
-      <Text>
-        {message}
-      </Text>
+      <Stack space={4}>
+        <Text>
+          {message}
+        </Text>
 
-      <div className='mt-2'>
-        {checkbox && <div className='confirmation-modal__checkbox'>
-          <SimpleForm>
-            <FieldsGroup>
-              <Checkbox
-                onChange={handleCheckboxChange}
-                label={checkbox}
+        {checkbox && (
+          <List>
+            <ListItem label={checkbox}>
+              <Toggle
                 checked={checked}
+                onChange={handleCheckboxChange}
+                required
               />
-            </FieldsGroup>
-          </SimpleForm>
-        </div>}
-      </div>
+            </ListItem>
+          </List>
+        )}
+      </Stack>
     </Modal>
   );
 };

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

app/styles/components/modal.scss

@@ -331,14 +331,6 @@
   }
 }
 
-.confirmation-modal__checkbox {
-  padding: 0 30px;
-
-  .simple_form {
-    margin-top: -14px;
-  }
-}
-
 .reply-mentions-modal__accounts {
   display: block;
   flex-direction: row;