Added confirmation dialogs to user details

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

ghost/admin-x-settings/src/admin-x-ds/global/Button.stories.tsx

@@ -22,6 +22,14 @@ export const Default: Story = {
     }
 };
 
+export const Small: Story = {
+    args: {
+        size: 'sm',
+        label: 'Button',
+        color: 'black'
+    }
+};
+
 export const Black: Story = {
     args: {
         label: 'Button',
@@ -51,9 +59,17 @@ export const LinkButton: Story = {
     }
 };
 
-export const IconButton: Story = {
+export const Icon: Story = {
     args: {
         icon: 'menu-horizontal',
         color: 'green'
     }
+};
+
+export const IconSmall: Story = {
+    args: {
+        size: 'sm',
+        icon: 'menu-horizontal',
+        color: 'green'
+    }
 };

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

@@ -1,9 +1,11 @@
 import Icon from './Icon';
 import React from 'react';
 
-export type ButtonColor = 'clear' | 'grey' | 'black' | 'green' | 'red';
+export type ButtonColor = 'clear' | 'grey' | 'black' | 'green' | 'red' | 'white';
+export type ButtonSize = 'sm' | 'md';
 
 export interface IButton {
+    size?: ButtonSize;
     label?: string;
     icon?: string;
     key?: string;
@@ -16,6 +18,7 @@ export interface IButton {
 }
 
 const Button: React.FC<IButton> = ({
+    size = 'md',
     label = '',
     icon = '',
     color = 'clear',
@@ -34,7 +37,7 @@ const Button: React.FC<IButton> = ({
     
     styles += ' transition whitespace-nowrap flex items-center justify-center rounded-sm text-sm';
     styles += ((link && color !== 'clear' && color !== 'black') || (!link && color !== 'clear')) ? ' font-bold' : ' font-semibold';
-    styles += !link ? ' px-4 h-9' : '';
+    styles += !link ? `${size === 'sm' ? ' px-3 h-7 ' : ' px-4 h-9 '}` : '';
 
     switch (color) {
     case 'black':
@@ -49,6 +52,9 @@ const Button: React.FC<IButton> = ({
     case 'red':
         styles += link ? ' text-red hover:text-red-400' : ' bg-red text-white hover:bg-red-400';
         break;
+    case 'white':
+        styles += link ? ' text-white hover:text-white' : ' bg-white text-black';
+        break;
     default:
         styles += link ? ' text-black hover:text-grey-800' : ' bg-transparent text-black hover:text-grey-800';
         break;
@@ -65,7 +71,7 @@ const Button: React.FC<IButton> = ({
             onClick={onClick}
             {...props}
         >
-            {icon && <Icon color={(color === 'clear' || color === 'grey' ? 'black' : 'white')} name={icon} />}
+            {icon && <Icon color={(color === 'clear' || color === 'grey' || color === 'white' ? 'black' : 'white')} name={icon} size={size === 'sm' ? 'sm' : 'md'} />}
             {label}
         </button>
     );

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

@@ -1,5 +1,6 @@
 import Avatar from '../../../../admin-x-ds/global/Avatar';
 import Button from '../../../../admin-x-ds/global/Button';
+import ConfirmationModal from '../../../../admin-x-ds/global/ConfirmationModal';
 import Heading from '../../../../admin-x-ds/global/Heading';
 import Icon from '../../../../admin-x-ds/global/Icon';
 import Menu from '../../../../admin-x-ds/global/Menu';
@@ -295,9 +296,45 @@ interface UserDetailModalProps {
 }
 
 const UserMenuTrigger = () => (
-    <Button color='grey' icon='menu-horizontal' />
+    <Button color='white' icon='menu-horizontal' size='sm' />
 );
 
+const confirmMakeOwner = () => {
+    NiceModal.show(ConfirmationModal, {
+        title: 'Transfer Ownership',
+        prompt: 'Are you sure you want to transfer the ownership of this blog? You will not be able to undo this action.',
+        okLabel: 'Yep — I\'m sure',
+        okColor: 'red'
+    });
+};
+
+const confirmDelete = () => {
+    NiceModal.show(ConfirmationModal, {
+        title: 'Are you sure you want to delete this user?',
+        prompt: (
+            <>
+                <p className='mb-3'>The [user] will be permanently deleted and all their posts will be automatically assigned to the [site owner name].</p>
+                <p>To make these easy to find in the future, each post will be given an internal tag of [new internal tag with username]</p>
+            </>
+        ),
+        okLabel: 'Delete user',
+        okColor: 'red'
+    });
+};
+
+const confirmSuspend = () => {
+    NiceModal.show(ConfirmationModal, {
+        title: 'Are you sure you want to suspend this user?',
+        prompt: (
+            <>
+                <strong>WARNING:</strong> This user will no longer be able to log in but their posts will be kept.
+            </>
+        ),
+        okLabel: 'Suspend',
+        okColor: 'red'
+    });
+};
+
 const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
     const [userData, setUserData] = useState(user);
     const [saveState, setSaveState] = useState('');
@@ -305,15 +342,18 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
     const menuItems = [
         {
             id: 'make-owner',
-            label: 'Make owner'
+            label: 'Make owner',
+            onClick: confirmMakeOwner
         },
         {
             id: 'delete-user',
-            label: 'Delete user'
+            label: 'Delete user',
+            onClick: confirmDelete
         },
         {
             id: 'suspend-user',
-            label: 'Suspend user'
+            label: 'Suspend user',
+            onClick: confirmSuspend
         },
         {
             id: 'view-user-activity',