[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

Author: BrettCleary

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">

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);
 }
 

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">

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()}
         />
       )}

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() {

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.'

src/frontend/types.ts

@@ -73,6 +73,7 @@ export type DialogModalOptions = {
   buttons?: Array<ButtonOptions>
   type?: DialogType
   onClose?: () => void
+  isModal?: boolean
 }
 
 export interface ExternalLinkDialogOptions {