Improved Full Screen Functionality ( Solved Issue #1006)

src/components/NavBar/new/MainNavbar/AlertDialogue.jsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import { signOut } from "../../../../store/actions";
+import { useFirebase } from "react-redux-firebase";
+import { useDispatch } from "react-redux";
+
+export default function AlertDialog() {
+  const [open, setOpen] = React.useState(false);
+
+  const firebase = useFirebase();
+  const dispatch = useDispatch();
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleLogout = () => {
+    signOut()(firebase, dispatch);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="outlined" onClick={handleClickOpen}>
+        Logout
+      </Button>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">
+          {"Do you want to logout from codelabz?"}
+        </DialogTitle>
+
+        <DialogActions>
+          <Button onClick={handleClose}>Disagree</Button>
+          <Button onClick={(handleClose, handleLogout)} autoFocus>
+            Agree
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </React.Fragment>
+  );
+}

src/components/NavBar/new/MainNavbar/RightMenu.jsx

@@ -27,6 +27,7 @@ import {
 import { useTheme } from "@mui/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import AlertDialog from "./AlertDialogue";
 
 const useStyles = makeStyles(theme => ({
   menu: {
@@ -361,7 +362,7 @@ const RightMenu = ({ mode, onClick }) => {
         )}
         <MenuItem
           key="setting:4"
-          onClick={() => signOut()(firebase, dispatch)}
+          onClick={() => setAnchorEl(null)}
           id={"log-out"}
         >
           <ExitToAppOutlinedIcon />
@@ -371,7 +372,7 @@ const RightMenu = ({ mode, onClick }) => {
               paddingLeft: "0.5rem"
             }}
           >
-            Log Out
+            <AlertDialog />
           </Typography>
         </MenuItem>
       </Menu>

src/components/Tutorials/subComps/TutorialTitle.jsx

@@ -28,6 +28,10 @@ const TutorialHeading = ({
     }
   };
 
+  document.addEventListener("fullscreenchange", () => {
+    setFullscreen(document.fullscreenElement !== null);
+  });
+
   let styleProps = {
     backgroundColor: tutorialData.background_color || "#ffffff",
     color: tutorialData.text_color || "#000000"