refactor: modal redesign and fix for transitions (#2987)

src/components/UserList/index.tsx

@@ -15,7 +15,6 @@ import type { User } from '@app/hooks/useUser';
 import { Permission, UserType, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import { Transition } from '@headlessui/react';
-import { TrashIcon } from '@heroicons/react/outline';
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -49,7 +48,7 @@ const messages = defineMessages({
   owner: 'Owner',
   admin: 'Admin',
   plexuser: 'Plex User',
-  deleteuser: 'Delete {username}',
+  deleteuser: 'Delete User',
   userdeleted: 'User deleted successfully!',
   userdeleteerror: 'Something went wrong while deleting the user.',
   deleteconfirm:
@@ -249,10 +248,8 @@ const UserList = () => {
           onCancel={() =>
             setDeleteModal({ isOpen: false, user: deleteModal.user })
           }
-          title={intl.formatMessage(messages.deleteuser, {
-            username: `${deleteModal.user?.displayName}`,
-          })}
-          iconSvg={<TrashIcon />}
+          title={intl.formatMessage(messages.deleteuser)}
+          subTitle={deleteModal.user?.displayName}
         >
           {intl.formatMessage(messages.deleteconfirm)}
         </Modal>
@@ -317,7 +314,6 @@ const UserList = () => {
             return (
               <Modal
                 title={intl.formatMessage(messages.createlocaluser)}
-                iconSvg={<UserAddIcon />}
                 onOk={() => handleSubmit()}
                 okText={
                   isSubmitting