diff --git a/app/javascript/components/admin/manage_users/ManageUserRow.jsx b/app/javascript/components/admin/manage_users/ManageUserRow.jsx index 3772c09052d31a6704c2a2ae8d2390d5e8db1642..fe3b15f6c89097b0fd3adacda809b54aba29e433 100644 --- a/app/javascript/components/admin/manage_users/ManageUserRow.jsx +++ b/app/javascript/components/admin/manage_users/ManageUserRow.jsx @@ -58,7 +58,6 @@ export default function ManageUserRow({ user }) { </Dropdown.Item> <Modal modalButton={<Dropdown.Item><TrashIcon className="hi-s me-2" />{ t('delete') }</Dropdown.Item>} - title={t('admin.manage_users.delete_user')} body={<DeleteUserForm user={user} />} /> </Dropdown.Menu> diff --git a/app/javascript/components/admin/manage_users/forms/DeleteUserForm.jsx b/app/javascript/components/admin/manage_users/forms/DeleteUserForm.jsx index 5a58ee0d0f446ed7ba429f31beece5c9829c2204..02b3f58da6786963a10ea909df2393c41a199783 100644 --- a/app/javascript/components/admin/manage_users/forms/DeleteUserForm.jsx +++ b/app/javascript/components/admin/manage_users/forms/DeleteUserForm.jsx @@ -5,6 +5,7 @@ import { } from 'react-bootstrap'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; +import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'; import Form from '../../../shared_components/forms/Form'; import useDeleteUser from '../../../../hooks/mutations/admin/manage_users/useDeleteUser'; @@ -17,10 +18,14 @@ export default function DeleteUserForm({ user, handleClose }) { return ( <> - <p className="text-center"> { t('admin.manage_users.are_you_sure_delete_account', { user }) } - <br /> - { t('admin.manage_users.delete_account_warning') } - </p> + <Stack direction="horizontal" className="mb-3"> + <ExclamationTriangleIcon className="text-danger hi-xl" /> + <Stack direction="vertical" className="ps-3"> + <h3> {t('admin.manage_users.delete_user')} </h3> + <p className="mb-0">{ t('admin.manage_users.are_you_sure_delete_account', { user }) }</p> + <p className="mt-0"><strong> { t('action_permanent') } </strong></p> + </Stack> + </Stack> <Form methods={methods} onSubmit={deleteUserAPI.mutate}> <Stack direction="horizontal" gap={1} className="float-end"> <Button variant="neutral" onClick={handleClose}>