Added backDropClick param. to modals in AdminX

refs. https://github.com/TryGhost/Team/issues/3351

ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx

@@ -2,6 +2,7 @@ import Button, {IButton} from './Button';
 import ButtonGroup from './ButtonGroup';
 import Heading from './Heading';
 import React from 'react';
+import clsx from 'clsx';
 import {useModal} from '@ebay/nice-modal-react';
 
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'bleed' | number;
@@ -24,6 +25,7 @@ export interface ModalProps {
     onCancel?: () => void;
     children?: React.ReactNode;
     backDrop?: boolean;
+    backDropClick?: boolean;
 }
 
 const Modal: React.FC<ModalProps> = ({
@@ -38,7 +40,8 @@ const Modal: React.FC<ModalProps> = ({
     okColor = 'black',
     onCancel,
     children,
-    backDrop = true
+    backDrop = true,
+    backDropClick = true
 }) => {
     const modal = useModal();
 
@@ -102,7 +105,7 @@ const Modal: React.FC<ModalProps> = ({
     }
 
     const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
-        if (e.target === e.currentTarget && backDrop) {
+        if (e.target === e.currentTarget && backDropClick) {
             modal.remove();
         }
     };
@@ -113,7 +116,10 @@ const Modal: React.FC<ModalProps> = ({
 
     return (
         <div className={backdropClasses} id='modal-backdrop' onClick={handleBackdropClick}>
-            <div className={`pointer-events-none fixed inset-0 z-0 bg-[rgba(98,109,121,0.15)] backdrop-blur-[3px]`}></div>
+            <div className={clsx(
+                'pointer-events-none fixed inset-0 z-0',
+                backDrop && 'bg-[rgba(98,109,121,0.15)] backdrop-blur-[3px]'
+            )}></div>
             <section className={modalClasses} style={modalStyles}>
                 <div className='h-full'>
                     {title && <Heading level={4}>{title}</Heading>}

ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx

@@ -589,6 +589,7 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
 
     return (
         <Modal
+            backDropClick={false}
             okColor='green'
             okLabel={okLabel}
             size='lg'