From e6a28146e45fbc3faa40dd903a2e8ae8807ec403 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Thu, 25 May 2023 14:34:18 +0200
Subject: [PATCH] Minor modal refinements in AdminX

refs. https://github.com/TryGhost/Team/issues/3151
---
 .../src/admin-x-ds/global/Modal.tsx            | 18 ++++++++----------
 .../components/settings/general/Facebook.tsx   |  4 +---
 .../components/settings/general/Twitter.tsx    |  4 +---
 .../src/components/settings/general/Users.tsx  | 11 ++++++++---
 4 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
index eed2367771..8d4a2e5555 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
@@ -48,36 +48,34 @@ const Modal: React.FC<ModalProps> = ({size = 'md', title, okLabel, cancelLabel,
     switch (size) {
     case 'sm':
         modalStyles += ' max-w-[480px] p-8';
+        backdropStyles += ' p-[8vmin]';
         break;
 
     case 'md':
         modalStyles += ' max-w-[720px] p-8';
+        backdropStyles += ' p-[8vmin]';
         break;
 
     case 'lg':
         modalStyles += ' max-w-[940px] p-10';
+        backdropStyles += ' p-[5vmin]';
         break;
 
     case 'xl':
         modalStyles += ' max-w-[1180px] p-12';
+        backdropStyles += ' p-[3vmin]';
         break;
 
     case 'full':
+        modalStyles += ' h-full p-12';
+        backdropStyles += ' p-[2vmin]';
+        break;
+
     case 'bleed':
         modalStyles += ' h-full p-12';
         break;
     }
 
-    if (size !== 'bleed') {
-        modalStyles += ' rounded-md overflow-hidden';
-    }
-
-    if (size !== 'bleed' && size !== 'full') {
-        backdropStyles += ' p-[8vmin]';
-    } else if (size === 'full') {
-        backdropStyles += ' p-[2vmin]';
-    }
-
     const handleBackdropClick = () => {
         modal.remove();
     };
diff --git a/ghost/admin-x-settings/src/components/settings/general/Facebook.tsx b/ghost/admin-x-settings/src/components/settings/general/Facebook.tsx
index aa1b19a96f..299969b263 100644
--- a/ghost/admin-x-settings/src/components/settings/general/Facebook.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/Facebook.tsx
@@ -26,9 +26,7 @@ const Facebook: React.FC = () => {
     };
 
     const values = (
-        <div>
-            [TBD: facebook card preview]
-        </div>
+        <></>
     );
 
     const inputFields = (
diff --git a/ghost/admin-x-settings/src/components/settings/general/Twitter.tsx b/ghost/admin-x-settings/src/components/settings/general/Twitter.tsx
index d6b0a43bae..eb9c40dd38 100644
--- a/ghost/admin-x-settings/src/components/settings/general/Twitter.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/Twitter.tsx
@@ -26,9 +26,7 @@ const Twitter: React.FC = () => {
     };
 
     const values = (
-        <div>
-            [TBD: twitter card preview]
-        </div>
+        <></>
     );
 
     const inputFields = (
diff --git a/ghost/admin-x-settings/src/components/settings/general/Users.tsx b/ghost/admin-x-settings/src/components/settings/general/Users.tsx
index 2ebc643ce2..9c524ef2fd 100644
--- a/ghost/admin-x-settings/src/components/settings/general/Users.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/Users.tsx
@@ -10,12 +10,16 @@ import UserDetailModal from './modals/UserDetailModal';
 import useStaffUsers from '../../../hooks/useStaffUsers';
 
 const Owner: React.FC<any> = ({user}) => {
+    const showDetailModal = () => {
+        NiceModal.show(UserDetailModal);
+    };
+
     if (!user) {
         return null;
     }
     return (
-        <div className='flex flex-col'>
-            <span>{user.name} &mdash; <strong>Owner</strong></span>
+        <div className='group flex flex-col hover:cursor-pointer' onClick={showDetailModal}>
+            <span>{user.name} &mdash; <strong>Owner</strong> <span className='invisible ml-2 inline-block text-sm font-bold text-green group-hover:visible'>Edit</span></span>
             <span className='text-xs text-grey-700'>{user.email}</span>
         </div>
     );
@@ -44,7 +48,8 @@ const UsersList: React.FC<any> = ({users}) => {
                         detail={user.email}
                         hideActions={true}
                         id={`list-item-${user.id}`}
-                        title={user.name} />
+                        title={user.name}
+                        onClick={showDetailModal} />
                 );
             })}
         </List>