diff --git a/app/soapbox/actions/moderation.tsx b/app/soapbox/actions/moderation.tsx index ea5861eca1..08f8fb9a29 100644 --- a/app/soapbox/actions/moderation.tsx +++ b/app/soapbox/actions/moderation.tsx @@ -9,6 +9,8 @@ import AccountContainer from 'soapbox/containers/account_container'; import { isLocal } from 'soapbox/utils/accounts'; import type { AppDispatch, RootState } from 'soapbox/store'; +import { Stack, Text } from 'soapbox/components/ui'; +import OutlineBox from 'soapbox/components/outline-box'; const messages = defineMessages({ deactivateUserHeading: { id: 'confirmations.admin.deactivate_user.heading', defaultMessage: 'Deactivate @{acct}' }, @@ -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 = ( + + + + + + + {intl.formatMessage(messages.deactivateUserPrompt, { acct })} + + + ); + 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 = (<> - - {intl.formatMessage(messages.deleteUserPrompt, { acct })} - ); + const message = ( + + + + - const confirm = (<> - {favicon && -
- -
} - {intl.formatMessage(messages.deleteUserConfirm, { name })} - ); + + {intl.formatMessage(messages.deleteUserPrompt, { acct })} + +
+ ); + const confirm = intl.formatMessage(messages.deleteUserConfirm, { name }); const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false; dispatch(openModal('CONFIRM', { diff --git a/app/soapbox/features/ui/components/confirmation_modal.tsx b/app/soapbox/features/ui/components/confirmation_modal.tsx index fefe57396a..f21478d9e8 100644 --- a/app/soapbox/features/ui/components/confirmation_modal.tsx +++ b/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 = ({ secondaryText={secondary} secondaryAction={onSecondary && handleSecondary} > - - {message} - + + + {message} + -
- {checkbox &&
- - - + + - - -
} -
+ + + )} +
); }; diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index 6d4e3d6118..435c07c656 100644 --- a/app/styles/components/modal.scss +++ b/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;