From a18124323bf2d3d9dac25e80b0fc7f5df87d7133 Mon Sep 17 00:00:00 2001
From: Brett <27568879+BrettCleary@users.noreply.github.com>
Date: Tue, 26 Nov 2024 13:50:52 -0800
Subject: [PATCH] [UX] Update compatibility dialog to be non-modal (#1160)

* allow non-modal dialog, set to true for compat layer dialog

* run yarn

* update z-indices
---
 .../components/UI/Dialog/components/Dialog.tsx    | 15 +++++++++++----
 src/frontend/components/UI/Dialog/index.css       |  8 ++++----
 .../components/MessageBoxModal/index.tsx          |  2 ++
 .../components/UI/DialogHandler/index.tsx         |  1 +
 .../UI/Sidebar/components/SidebarLinks/index.tsx  |  3 ++-
 src/frontend/helpers/library.ts                   |  1 +
 src/frontend/types.ts                             |  1 +
 7 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/frontend/components/UI/Dialog/components/Dialog.tsx b/src/frontend/components/UI/Dialog/components/Dialog.tsx
index c64f7b4ef7..9ddf796b79 100644
--- a/src/frontend/components/UI/Dialog/components/Dialog.tsx
+++ b/src/frontend/components/UI/Dialog/components/Dialog.tsx
@@ -13,13 +13,16 @@ interface DialogProps {
   children: ReactNode
   showCloseButton: boolean
   onClose: () => void
+  // modal or non-modal behavior https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+  isModal?: boolean
 }
 
 export const Dialog: React.FC<DialogProps> = ({
   children,
   className,
   showCloseButton = false,
-  onClose
+  onClose,
+  isModal = true
 }) => {
   const dialogRef = useRef<HTMLDialogElement | null>(null)
   const onCloseRef = useRef(onClose)
@@ -32,10 +35,14 @@ export const Dialog: React.FC<DialogProps> = ({
         onCloseRef.current()
       }
       dialog.addEventListener('cancel', cancel)
-      dialog['showModal']()
+      if (isModal) {
+        dialog.showModal()
+      } else {
+        dialog.show()
+      }
       return () => {
         dialog.removeEventListener('cancel', cancel)
-        dialog['close']()
+        dialog.close()
       }
     }
     return
@@ -63,7 +70,7 @@ export const Dialog: React.FC<DialogProps> = ({
     <dialog
       className={`Dialog__element ${className}`}
       ref={dialogRef}
-      onClick={onDialogClick}
+      onClick={isModal ? onDialogClick : undefined}
     >
       {showCloseButton && (
         <div className="Dialog__Close">
diff --git a/src/frontend/components/UI/Dialog/index.css b/src/frontend/components/UI/Dialog/index.css
index bd85460343..fb663a781a 100644
--- a/src/frontend/components/UI/Dialog/index.css
+++ b/src/frontend/components/UI/Dialog/index.css
@@ -1,6 +1,8 @@
 .Dialog__element {
-  top: 0;
-  z-index: 8;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
   display: flex;
   flex-direction: column;
   padding: calc(var(--space-xl) * 1.67);
@@ -10,7 +12,6 @@
   background: var(--color-neutral-800);
   color: var(--text-default);
   opacity: 0;
-  transform: translateY(50px);
   transition: opacity 500ms, transform 500ms;
   max-width: min(700px, 85vw);
 
@@ -23,7 +24,6 @@
 
 .Dialog__element[open] {
   opacity: 1;
-  transform: translateY(0);
   box-shadow: 0px 0px 0px 100vmax var(--modal-backdrop);
 }
 
diff --git a/src/frontend/components/UI/DialogHandler/components/MessageBoxModal/index.tsx b/src/frontend/components/UI/DialogHandler/components/MessageBoxModal/index.tsx
index ab204a0f93..5b76cc19f6 100644
--- a/src/frontend/components/UI/DialogHandler/components/MessageBoxModal/index.tsx
+++ b/src/frontend/components/UI/DialogHandler/components/MessageBoxModal/index.tsx
@@ -20,6 +20,7 @@ interface MessageBoxModalProps {
   showCheckbox?: boolean
   checkboxLabel?: string
   checkboxValue?: boolean
+  isModal?: boolean
 }
 
 const MessageBoxModal: React.FC<MessageBoxModalProps> = function (props) {
@@ -71,6 +72,7 @@ const MessageBoxModal: React.FC<MessageBoxModalProps> = function (props) {
       onClose={props.onClose}
       showCloseButton
       className={classNames({ errorDialog: props.type === 'ERROR' })}
+      isModal={props.isModal}
     >
       <DialogHeader onClose={props.onClose}>{props.title}</DialogHeader>
       <DialogContent className="body dialogContent">
diff --git a/src/frontend/components/UI/DialogHandler/index.tsx b/src/frontend/components/UI/DialogHandler/index.tsx
index a76470ddf6..0a00a75b1e 100644
--- a/src/frontend/components/UI/DialogHandler/index.tsx
+++ b/src/frontend/components/UI/DialogHandler/index.tsx
@@ -42,6 +42,7 @@ export default function DialogHandler() {
           title={dialogModalOptions.title ? dialogModalOptions.title : ''}
           message={dialogModalOptions.message ? dialogModalOptions.message : ''}
           buttons={dialogModalOptions.buttons ? dialogModalOptions.buttons : []}
+          isModal={dialogModalOptions.isModal}
           onClose={() => handleClose()}
         />
       )}
diff --git a/src/frontend/components/UI/Sidebar/components/SidebarLinks/index.tsx b/src/frontend/components/UI/Sidebar/components/SidebarLinks/index.tsx
index ae192dadb1..8bc45cd0b6 100644
--- a/src/frontend/components/UI/Sidebar/components/SidebarLinks/index.tsx
+++ b/src/frontend/components/UI/Sidebar/components/SidebarLinks/index.tsx
@@ -18,7 +18,8 @@ const tooltipProps: Partial<TooltipProps> = {
   position: 'right',
   withArrow: true,
   className: 'Tooltip menu',
-  arrowSize: 10
+  arrowSize: 10,
+  zIndex: 1001
 }
 
 export default observer(function SidebarLinks() {
diff --git a/src/frontend/helpers/library.ts b/src/frontend/helpers/library.ts
index 4d7ad51250..24ea91d0cc 100644
--- a/src/frontend/helpers/library.ts
+++ b/src/frontend/helpers/library.ts
@@ -164,6 +164,7 @@ const launch = async ({
       return res()
     }
     showDialogModal({
+      isModal: false,
       message: t(
         'gamepage:box.compability.message',
         'This Windows game will run using a compatibility layer. You might encounter some issues or the game might not work at all.'
diff --git a/src/frontend/types.ts b/src/frontend/types.ts
index 1dec522a20..9e231bd91f 100644
--- a/src/frontend/types.ts
+++ b/src/frontend/types.ts
@@ -73,6 +73,7 @@ export type DialogModalOptions = {
   buttons?: Array<ButtonOptions>
   type?: DialogType
   onClose?: () => void
+  isModal?: boolean
 }
 
 export interface ExternalLinkDialogOptions {