improved menu and popups ui

Author: danielboxer

webmoti-react/src/components/Buttons/ToggleScheduleButton/ToggleScheduleButton.tsx

@@ -128,7 +128,10 @@ export default function Menu({ buttonClassName }: MenuProps) {
     {
       icon: <SettingsIcon />,
       label: 'Audio and Video Settings',
-      onClick: () => setSettingsOpen(true),
+      onClick: () => {
+        setSettingsOpen(true);
+        setMenuOpen(false);
+      },
     },
     ...(isSupported
       ? [
@@ -164,19 +167,28 @@ export default function Menu({ buttonClassName }: MenuProps) {
     {
       icon: <CalendarTodayIcon style={{ fill: '#707578', width: '0.9em' }} />,
       label: 'Set Schedule',
-      onClick: () => setSetScheduleOpen(true),
+      onClick: () => {
+        setSetScheduleOpen(true);
+        setMenuOpen(false);
+      },
     },
     {
       icon: <CalendarViewDayIcon style={{ fill: '#707578', width: '0.9em' }} />,
       label: 'View Schedule',
-      onClick: () => setViewScheduleOpen(true),
+      onClick: () => {
+        setViewScheduleOpen(true);
+        setMenuOpen(false);
+      },
     },
     ...(!isSharingScreen && !isMobile
       ? [
           {
             icon: <ScreenShareIcon />,
             label: SCREEN_SHARE_TEXT,
-            onClick: toggleScreenShare,
+            onClick: () => {
+              toggleScreenShare();
+              setMenuOpen(false);
+            },
             disabled: isScreenShareDisabled,
             tooltip: getTooltipMessage(),
           },
@@ -197,12 +209,18 @@ export default function Menu({ buttonClassName }: MenuProps) {
     {
       icon: <InfoIconOutlined />,
       label: 'About',
-      onClick: () => setAboutOpen(true),
+      onClick: () => {
+        setAboutOpen(true);
+        setMenuOpen(false);
+      },
     },
     {
       icon: <SupervisorAccountIcon style={{ fill: '#707578', width: '0.9em' }} />,
       label: 'Admin',
-      onClick: handleAdminLogin,
+      onClick: () => {
+        handleAdminLogin();
+        setMenuOpen(false);
+      },
     },
     {
       isCustomComponent: true,

webmoti-react/src/components/MenuBar/Menu/Menu.tsx

@@ -26,6 +26,7 @@ const StyledModal = styled(Modal)(({ theme }) => ({
     border: '2px solid #000',
     boxShadow: theme.shadows[5],
     padding: theme.spacing(2, 4, 3),
+    zIndex: theme.zIndex.modal + 1,
   },
 }));
 
@@ -118,8 +119,8 @@ export default function SetScheduleModal({ open, onClose }: SetScheduleModalProp
       onClose={onClose}
       className={classes.modal}
       closeAfterTransition
-      BackdropComponent={Backdrop}
-      BackdropProps={{ timeout: 500 }}
+      slots={{ backdrop: Backdrop }}
+      slotProps={{ backdrop: { timeout: 500 } }}
     >
       <Fade in={open}>
         <div className={classes.paper}>
@@ -136,7 +137,7 @@ export default function SetScheduleModal({ open, onClose }: SetScheduleModalProp
               fullWidth
               style={{ marginBottom: '20px' }}
               slotProps={{
-                inputLabel: { shrink: true }
+                inputLabel: { shrink: true },
               }}
             />
 
@@ -149,7 +150,7 @@ export default function SetScheduleModal({ open, onClose }: SetScheduleModalProp
               fullWidth
               style={{ marginBottom: '20px' }}
               slotProps={{
-                inputLabel: { shrink: true }
+                inputLabel: { shrink: true },
               }}
             />
 

webmoti-react/src/components/SetScheduleModal/SetScheduleModal.tsx

@@ -41,6 +41,7 @@ const StyledModal = styled(Modal)(({ theme }) => ({
     border: '2px solid #000',
     boxShadow: theme.shadows[5],
     padding: theme.spacing(2, 4, 3),
+    zIndex: theme.zIndex.modal + 1,
   },
 }));
 
@@ -83,8 +84,8 @@ export default function ViewScheduleModal({ open, onClose }: ViewScheduleModalPr
       onClose={onClose}
       className={classes.modal}
       closeAfterTransition
-      BackdropComponent={Backdrop}
-      BackdropProps={{ timeout: 500 }}
+      slots={{ backdrop: Backdrop }}
+      slotProps={{ backdrop: { timeout: 500 } }}
     >
       <Fade in={open}>
         <div className={classes.paper}>