Fixed modal footer bug in AdminX

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

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

@@ -25,7 +25,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
     okColor = 'black',
     onCancel,
     onOk,
-    customFooter = false
+    customFooter
 }) => {
     const modal = useModal();
     const [taskState, setTaskState] = useState<'running' | ''>('');

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

@@ -138,10 +138,6 @@ const Modal: React.FC<ModalProps> = ({
         ((size === 'full' || size === 'bleed') && 'grow')
     );
 
-    if (!footer) {
-        contentClasses += ' pb-0 ';
-    }
-
     const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
         if (e.target === e.currentTarget && backDropClick) {
             modal.remove();
@@ -152,31 +148,36 @@ const Modal: React.FC<ModalProps> = ({
         width: size + 'px'
     } : {};
 
-    const footerContent = (
+    let footerContent;
-        <div className={footerClasses}>
+    if (footer) {
-            <div>
+        footerContent = footer;
-                {leftButtonLabel &&
+    } else if (footer === false) {
-                <Button label={leftButtonLabel} link={true} />
+        contentClasses += ' pb-0 ';
-                }
+    } else {
+        footerContent = (
+            <div className={footerClasses}>
+                <div>
+                    {leftButtonLabel &&
+                    <Button label={leftButtonLabel} link={true} />
+                    }
+                </div>
+                <div className='flex gap-3'>
+                    <ButtonGroup buttons={buttons}/>
+                </div>
             </div>
-            <div className='flex gap-3'>
-                <ButtonGroup buttons={buttons}/>
-            </div>
-        </div>
-    );
-
-    if (footer === undefined) {
-        footer = (stickyFooter ?
-            <StickyFooter height={84}>
-                {footerContent}
-            </StickyFooter>
-            :
-            <>
-                {footerContent}
-            </>
         );
     }
 
+    footerContent = (stickyFooter ?
+        <StickyFooter height={84}>
+            {footerContent}
+        </StickyFooter>
+        :
+        <>
+            {footerContent}
+        </>
+    );
+
     return (
         <div className={backdropClasses} id='modal-backdrop' onClick={handleBackdropClick}>
             <div className={clsx(
@@ -190,7 +191,7 @@ const Modal: React.FC<ModalProps> = ({
                         {children}
                     </div>
                 </div>
-                {footer}
+                {footerContent}
             </section>
         </div>
     );