[Fix] Dialog fixed position breaking the view (#1186)

* [FIx] Dialog fixed position breaking the view * feat(dialog): add compatibility warning styling and className prop --------- Co-authored-by: Flavio F Lima <[email protected]> Co-authored-by: Brett <[email protected]>
HyperPlay-Gaming · Dec 11, 2024 · bd21aea · bd21aea
1 parent 4040583
commit bd21aea
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 4 deletions.
diff --git a/src/frontend/components/UI/Dialog/index.css b/src/frontend/components/UI/Dialog/index.css
@@ -1,7 +1,4 @@
 .Dialog__element {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   z-index: 1000;
   display: flex;
   flex-direction: column;
@@ -22,6 +19,12 @@
   --dialog-gap: 24px;
 }
 
+.compatibility-warning {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .Dialog__element[open] {
   opacity: 1;
   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
@@ -21,6 +21,7 @@ interface MessageBoxModalProps {
   checkboxLabel?: string
   checkboxValue?: boolean
   isModal?: boolean
+  className?: string
 }
 
 const MessageBoxModal: React.FC<MessageBoxModalProps> = function (props) {
@@ -71,7 +72,10 @@ const MessageBoxModal: React.FC<MessageBoxModalProps> = function (props) {
     <Dialog
       onClose={props.onClose}
       showCloseButton
-      className={classNames({ errorDialog: props.type === 'ERROR' })}
+      className={classNames(
+        { errorDialog: props.type === 'ERROR' },
+        props.className
+      )}
       isModal={props.isModal}
     >
       <DialogHeader onClose={props.onClose}>{props.title}</DialogHeader>

diff --git a/src/frontend/components/UI/DialogHandler/index.tsx b/src/frontend/components/UI/DialogHandler/index.tsx
@@ -44,6 +44,7 @@ export default function DialogHandler() {
           buttons={dialogModalOptions.buttons ? dialogModalOptions.buttons : []}
           isModal={dialogModalOptions.isModal}
           onClose={() => handleClose()}
+          className={dialogModalOptions.className}
         />
       )}
     </>

diff --git a/src/frontend/helpers/library.ts b/src/frontend/helpers/library.ts
@@ -170,6 +170,7 @@ const launch = async ({
         'This Windows game will run using a compatibility layer. You might encounter some issues or the game might not work at all.'
       ),
       title: t('infobox.warning', 'Warning'),
+      className: 'compatibility-warning',
       buttons: [
         {
           text: t('gamepage:box.dont-show-again', "Don't show again"),

diff --git a/src/frontend/types.ts b/src/frontend/types.ts
@@ -74,6 +74,7 @@ export type DialogModalOptions = {
   type?: DialogType
   onClose?: () => void
   isModal?: boolean
+  className?: string
 }
 
 export interface ExternalLinkDialogOptions {