From 3e9bcea9e4f40bf0af74853cc2f48d9fa060e90d Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Fri, 6 May 2022 11:35:23 -0500
Subject: [PATCH] Fix modal z-index

---
 src/ui/InteractiveTutorial/NSSelection.tsx |  2 +-
 src/ui/React/Modal.tsx                     | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/ui/InteractiveTutorial/NSSelection.tsx b/src/ui/InteractiveTutorial/NSSelection.tsx
index 848598d6a..46c008885 100644
--- a/src/ui/InteractiveTutorial/NSSelection.tsx
+++ b/src/ui/InteractiveTutorial/NSSelection.tsx
@@ -35,7 +35,7 @@ export function NSSelection(props: IProps): React.ReactElement {
   }
 
   return (
-    <Modal open={props.open} onClose={props.onClose}>
+    <Modal open={props.open} onClose={props.onClose} sx={{ zIndex: 999999 }}>
       <Tabs variant="fullWidth" value={value} onChange={handleChange}>
         <Tab label="NS1" />
         <Tab label="NS2" />
diff --git a/src/ui/React/Modal.tsx b/src/ui/React/Modal.tsx
index ca71d8be1..f13a4f89a 100644
--- a/src/ui/React/Modal.tsx
+++ b/src/ui/React/Modal.tsx
@@ -1,10 +1,11 @@
-import React from "react";
 import { Theme } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
-import createStyles from "@mui/styles/createStyles";
-import M from "@mui/material/Modal";
-import Fade from "@mui/material/Fade";
 import Box from "@mui/material/Box";
+import Fade from "@mui/material/Fade";
+import M from "@mui/material/Modal";
+import createStyles from "@mui/styles/createStyles";
+import makeStyles from "@mui/styles/makeStyles";
+import { SxProps } from "@mui/system";
+import React from "react";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -12,7 +13,6 @@ const useStyles = makeStyles((theme: Theme) =>
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      zIndex: 999999,
     },
     paper: {
       backgroundColor: theme.palette.background.default,
@@ -35,6 +35,7 @@ interface IProps {
   open: boolean;
   onClose: () => void;
   children: React.ReactNode;
+  sx?: SxProps<Theme>;
 }
 
 export const Modal = (props: IProps): React.ReactElement => {
@@ -49,6 +50,7 @@ export const Modal = (props: IProps): React.ReactElement => {
       onClose={props.onClose}
       closeAfterTransition
       className={classes.modal}
+      sx={props.sx}
     >
       <Fade in={props.open}>
         <div className={classes.paper}>