update Modal/fullScreen style to show nav hierarchy

src/components/Modal/FullScreenModal.tsx

@@ -1,110 +0,0 @@
-import { useState } from "react";
-
-import {
-  Dialog,
-  DialogProps,
-  Slide,
-  IconButton,
-  Container,
-} from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-
-import ScrollableDialogContent, {
-  IScrollableDialogContentProps,
-} from "./ScrollableDialogContent";
-
-export interface IFullScreenModalProps
-  extends Partial<Omit<DialogProps, "title">> {
-  onClose: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => void;
-  disableBackdropClick?: boolean;
-  disableEscapeKeyDown?: boolean;
-
-  "aria-labelledby": DialogProps["aria-labelledby"];
-  header?: React.ReactNode;
-  children?: React.ReactNode;
-  footer?: React.ReactNode;
-
-  hideCloseButton?: boolean;
-  ScrollableDialogContentProps?: Partial<IScrollableDialogContentProps>;
-}
-
-export default function FullScreenModal({
-  onClose,
-  disableBackdropClick,
-  disableEscapeKeyDown,
-  header,
-  children,
-  footer,
-  hideCloseButton,
-  ScrollableDialogContentProps,
-  ...props
-}: IFullScreenModalProps) {
-  const [open, setOpen] = useState(true);
-  const handleClose: NonNullable<DialogProps["onClose"]> = (_, reason) => {
-    if (
-      (disableBackdropClick && reason === "backdropClick") ||
-      (disableEscapeKeyDown && reason === "escapeKeyDown")
-    ) {
-      setEmphasizeCloseButton(true);
-      return;
-    }
-
-    setOpen(false);
-    setEmphasizeCloseButton(false);
-    setTimeout(() => onClose(setOpen), 300);
-  };
-
-  const [emphasizeCloseButton, setEmphasizeCloseButton] = useState(false);
-
-  return (
-    <Dialog
-      fullScreen
-      open={open}
-      onClose={handleClose}
-      TransitionComponent={Slide}
-      TransitionProps={{ direction: "up" } as any}
-      {...props}
-    >
-      <Container
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
-          pt: { xs: "var(--dialog-spacing)", xl: 6 },
-        }}
-      >
-        {!hideCloseButton && (
-          <IconButton
-            onClick={handleClose as any}
-            aria-label="Close"
-            sx={{
-              position: "absolute",
-              top: (theme) => theme.spacing(1),
-              right: (theme) => theme.spacing(1),
-
-              bgcolor: emphasizeCloseButton ? "error.main" : undefined,
-              color: emphasizeCloseButton ? "error.contrastText" : undefined,
-              "&:hover": emphasizeCloseButton
-                ? { bgcolor: "error.dark" }
-                : undefined,
-            }}
-            className="dialog-close"
-          >
-            <CloseIcon />
-          </IconButton>
-        )}
-
-        {header}
-
-        <ScrollableDialogContent
-          style={{ padding: 0 }}
-          {...ScrollableDialogContentProps}
-        >
-          {children}
-        </ScrollableDialogContent>
-
-        {footer}
-      </Container>
-    </Dialog>
-  );
-}

src/components/Modal/Modal.tsx

@@ -60,6 +60,7 @@ export default function Modal({
 }: IModalProps) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const fullScreen = props.fullScreen || isMobile;
 
   const [open, setOpen] = useState(true);
   const [emphasizeCloseButton, setEmphasizeCloseButton] = useState(false);
@@ -80,11 +81,12 @@ export default function Modal({
   return (
     <Dialog
       open={open}
+      data-open={open}
       onClose={handleClose}
       fullWidth
-      fullScreen={isMobile}
-      TransitionComponent={isMobile ? Slide : SlideTransitionMui}
-      TransitionProps={isMobile ? ({ direction: "up" } as any) : undefined}
+      fullScreen={fullScreen}
+      TransitionComponent={fullScreen ? Slide : SlideTransitionMui}
+      TransitionProps={fullScreen ? ({ direction: "up" } as any) : undefined}
       aria-labelledby="modal-title"
       {...props}
       sx={

src/components/SideDrawer/StyledDrawer.ts

@@ -34,6 +34,15 @@ export const StyledDrawer = styled(Drawer)(({ theme }) => ({
 
     top: APP_BAR_HEIGHT + TABLE_TOOLBAR_HEIGHT,
     height: `calc(100% - ${APP_BAR_HEIGHT + TABLE_TOOLBAR_HEIGHT}px)`,
+    ".MuiDialog-paperFullScreen &": {
+      top:
+        APP_BAR_HEIGHT +
+        TABLE_TOOLBAR_HEIGHT +
+        Number(theme.spacing(2).replace("px", "")),
+      height: `calc(100% - ${
+        APP_BAR_HEIGHT + TABLE_TOOLBAR_HEIGHT
+      }px - ${theme.spacing(2)})`,
+    },
 
     transition: theme.transitions.create("transform", {
       easing: theme.transitions.easing.easeInOut,

src/components/TableModals/CloudLogsModal/CloudLogsModal.tsx

@@ -78,8 +78,7 @@ export default function CloudLogsModal({ onClose }: ITableModalProps) {
       title="Cloud logs"
       onClose={onClose}
       maxWidth="xl"
-      fullWidth
-      fullHeight
+      fullScreen
       ScrollableDialogContentProps={{ disableBottomDivider: true }}
       header={
         <>

src/components/TableModals/WizardDialog.tsx

@@ -41,17 +41,20 @@ export default function WizardDialog({
   onFinish,
   fullHeight = true,
   onClose,
+  open: openProp,
   ...props
 }: IWizardDialogProps) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
+  const [open, setOpen] = useState(true);
   const [emphasizeCloseButton, setEmphasizeCloseButton] = useState(false);
   const handleClose: NonNullable<DialogProps["onClose"]> = (event, reason) => {
     if (reason === "backdropClick" || reason === "escapeKeyDown") {
       setEmphasizeCloseButton(true);
       return;
     }
+    setOpen(false);
     setEmphasizeCloseButton(false);
     if (onClose) setTimeout(() => onClose!(event, reason), 300);
   };
@@ -66,6 +69,9 @@ export default function WizardDialog({
 
   return (
     <Dialog
+      open={open}
+      data-open={open}
+      onClose={handleClose}
       fullWidth
       fullScreen
       TransitionComponent={Slide}
@@ -74,7 +80,6 @@ export default function WizardDialog({
       aria-describedby="wizard-step-description"
       maxWidth="md"
       {...props}
-      onClose={handleClose}
       sx={[
         fullHeight && { "& .MuiDialog-paper": { height: "100%" } },
         ...spreadSx(props.sx),

src/pages/Table/ProvidedSubTablePage.tsx

@@ -88,6 +88,7 @@ export default function ProvidedSubTablePage() {
       sx={{
         "& > .MuiDialog-container > .MuiPaper-root": {
           bgcolor: "background.default",
+          backgroundImage: "none",
         },
         "& .modal-title-row": {
           height: APP_BAR_HEIGHT,

src/theme/colors.ts

@@ -98,6 +98,9 @@ export const colorsLight = (
             backgroundColor: colord({ l: 70, c: 5, h })
               .alpha(0.6)
               .toHslString(),
+            ".MuiDialog-root:has(.MuiDialog-paperFullScreen) &": {
+              backgroundColor: "rgba(0, 0, 0, 0.25)",
+            },
           },
           invisible: { backgroundColor: "transparent" },
         },
@@ -197,6 +200,9 @@ export const colorsDark = (
         styleOverrides: {
           root: {
             backgroundColor: colord({ l: 0, c: 1, h }).alpha(0.6).toHslString(),
+            ".MuiDialog-root:has(.MuiDialog-paperFullScreen) &": {
+              backgroundColor: "rgba(0, 0, 0, 0.25)",
+            },
           },
           invisible: { backgroundColor: "transparent" },
         },

src/theme/components.tsx

@@ -81,6 +81,17 @@ export const components = (theme: Theme): ThemeOptions => {
 
           body: { cursor: "default" },
 
+          "#root": {
+            "@supports selector(:has(a))": {
+              transition: theme.transitions.create(
+                ["transform", "border-radius"],
+                {
+                  duration: theme.transitions.duration.leavingScreen,
+                }
+              ),
+            },
+          },
+
           "code, pre, pre.MuiTypography-root": {
             fontFamily: theme.typography.fontFamilyMono,
             fontFeatureSettings: "normal",
@@ -254,15 +265,39 @@ export const components = (theme: Theme): ThemeOptions => {
           paperFullScreen: {
             borderBottomLeftRadius: 0,
             borderBottomRightRadius: 0,
-            marginTop: `calc(env(safe-area-inset-top) + ${theme.spacing(1)})`,
+            marginTop: `calc(env(safe-area-inset-top) + ${theme.spacing(2)})`,
             maxHeight: `calc(100% - env(safe-area-inset-top) - ${theme.spacing(
-              1
+              2
             )})`,
             maxWidth: "100% !important",
 
             paddingLeft: "env(safe-area-inset-left)",
             paddingRight: "env(safe-area-inset-right)",
             paddingBottom: "env(safe-area-inset-bottom)",
+
+            "body:has([data-open=true] &)": {
+              backgroundColor: theme.palette.common.black,
+
+              "#root": {
+                backgroundColor:
+                  theme.palette.mode === "dark"
+                    ? colord(theme.palette.background.paper)
+                        .mix("#fff", 0.09) // Elevation 8
+                        .toHslString()
+                    : theme.palette.background.default,
+                borderRadius: (theme.shape.borderRadius as number) * 2,
+                overflow: "hidden",
+
+                transform: "scale(0.9) translateY(-4.5%)",
+                transition: theme.transitions.create(
+                  ["transform", "border-radius"],
+                  {
+                    duration: theme.transitions.duration.enteringScreen,
+                    easing: theme.transitions.easing.easeOut,
+                  }
+                ),
+              },
+            },
           },
         },
       },

src/theme/typography.ts

@@ -48,15 +48,15 @@ export const typography = ({
       fontFamily !== BODY_FONT
         ? "normal"
         : `"calt", "ss01", "ss03", "cv05", "cv08", "cv09"`,
-    "-webkit-font-smoothing": "auto",
-    "-moz-osx-font-smoothing": "auto",
+    WebkitFontSmoothing: "auto",
+    MozOsxFontSmoothing: "auto",
   };
   const fontStyleHeading: TypographyStyleOptions = {
     fontFamily: fontFamilyHeading,
     fontFeatureSettings:
       fontFamilyHeading !== HEADING_FONT ? "normal" : `"ss02", "ss03"`,
-    "-webkit-font-smoothing": "antialiased",
-    "-moz-osx-font-smoothing": "grayscale",
+    WebkitFontSmoothing: "antialiased",
+    MozOsxFontSmoothing: "grayscale",
   };
 
   return {