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

src/components/UserList/BulkEditModal.tsx

@@ -3,7 +3,6 @@ import PermissionEdit from '@app/components/PermissionEdit';
 import type { User } from '@app/hooks/useUser';
 import { useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
-import { PencilIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -86,7 +85,6 @@ const BulkEditModal = ({
   return (
     <Modal
       title={intl.formatMessage(messages.edituser)}
-      iconSvg={<PencilIcon />}
       onOk={() => {
         updateUsers();
       }}

src/components/UserList/PlexImportModal.tsx

@@ -2,7 +2,6 @@ import Alert from '@app/components/Common/Alert';
 import Modal from '@app/components/Common/Modal';
 import useSettings from '@app/hooks/useSettings';
 import globalMessages from '@app/i18n/globalMessages';
-import { InboxInIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -105,7 +104,6 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
     <Modal
       loading={!data && !error}
       title={intl.formatMessage(messages.importfromplex)}
-      iconSvg={<InboxInIcon />}
       onOk={() => {
         importUsers();
       }}

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