From d07727a1b3c8b17fb9f4977f223ea04d2880686c Mon Sep 17 00:00:00 2001
From: Mohammed Huzaif Ahmed <huzaif.demha@gmail.com>
Date: Sat, 7 Oct 2023 22:32:53 +0530
Subject: [PATCH 1/3] Full screen toggling feature added

---
 .../Tutorials/subComps/TutorialTitle.jsx      | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/Tutorials/subComps/TutorialTitle.jsx b/src/components/Tutorials/subComps/TutorialTitle.jsx
index 7afb46cf..b93d70a4 100644
--- a/src/components/Tutorials/subComps/TutorialTitle.jsx
+++ b/src/components/Tutorials/subComps/TutorialTitle.jsx
@@ -4,6 +4,8 @@ import Tooltip from "@mui/material/Tooltip";
 import Grid from "@mui/material/Grid";
 import QueryBuilderIcon from "@mui/icons-material/QueryBuilder";
 import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit'
+import { useState } from "react";
 import { Typography } from "@mui/material";
 
 const TutorialHeading = ({
@@ -13,9 +15,16 @@ const TutorialHeading = ({
   tutorialData,
   timeRemaining
 }) => {
+  let [Fullscreen, setFullscreen] = useState(false);
+  
   const toggleFullscreen = () => {
+    setFullscreen(true);
     document.documentElement.requestFullscreen();
   };
+  const togglesmallScreen = () => {
+    setFullscreen(false);
+    document.exitFullscreen();
+  }
 
   let styleProps = {
     backgroundColor: tutorialData.background_color || "#ffffff",
@@ -50,16 +59,25 @@ const TutorialHeading = ({
                 {timeRemaining} mins remaining
               </span>
             </Button>
-            <Tooltip placement="left" title={"Go Fullscreen"}>
+            {Fullscreen ? <Tooltip placement="left" title={"exit Fullscreen"}>
               <Button
                 type="dashed"
-                onClick={toggleFullscreen}
+                onClick={togglesmallScreen}
+                className="bp-8"
+                style={{ ...styleProps }}
+              >
+                <FullscreenExitIcon />
+              </Button>
+            </Tooltip>:<Tooltip placement="left" title={"Go Fullscreen"}>
+              <Button
+                type="dashed"
+                onClick={ toggleFullscreen}
                 className="bp-8"
                 style={{ ...styleProps }}
               >
                 <FullscreenIcon />
               </Button>
-            </Tooltip>
+            </Tooltip>}
           </Grid>
         </>
       )}

From 811526aed68e9475e01187e5347e636be72a94c8 Mon Sep 17 00:00:00 2001
From: Mohammed Huzaif Ahmed <huzaif.demha@gmail.com>
Date: Sun, 8 Oct 2023 18:04:53 +0530
Subject: [PATCH 2/3] Fullscreen toggling in same function

---
 .../Tutorials/subComps/TutorialTitle.jsx        | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/Tutorials/subComps/TutorialTitle.jsx b/src/components/Tutorials/subComps/TutorialTitle.jsx
index b93d70a4..99a5f4bc 100644
--- a/src/components/Tutorials/subComps/TutorialTitle.jsx
+++ b/src/components/Tutorials/subComps/TutorialTitle.jsx
@@ -7,6 +7,7 @@ import FullscreenIcon from "@mui/icons-material/Fullscreen";
 import FullscreenExitIcon from '@mui/icons-material/FullscreenExit'
 import { useState } from "react";
 import { Typography } from "@mui/material";
+import { set } from "lodash";
 
 const TutorialHeading = ({
   stepPanelVisible,
@@ -18,13 +19,15 @@ const TutorialHeading = ({
   let [Fullscreen, setFullscreen] = useState(false);
   
   const toggleFullscreen = () => {
-    setFullscreen(true);
-    document.documentElement.requestFullscreen();
+    if (Fullscreen) {
+      setFullscreen(false);
+      document.exitFullscreen();
+    } else {
+      setFullscreen(true);
+      document.documentElement.requestFullscreen();
+    }
+    setFullscreen(!document.fullscreenElement);
   };
-  const togglesmallScreen = () => {
-    setFullscreen(false);
-    document.exitFullscreen();
-  }
 
   let styleProps = {
     backgroundColor: tutorialData.background_color || "#ffffff",
@@ -62,7 +65,7 @@ const TutorialHeading = ({
             {Fullscreen ? <Tooltip placement="left" title={"exit Fullscreen"}>
               <Button
                 type="dashed"
-                onClick={togglesmallScreen}
+                onClick={toggleFullscreen}
                 className="bp-8"
                 style={{ ...styleProps }}
               >

From d93d43da2eb1916b782d9d41dda730f25be50b7f Mon Sep 17 00:00:00 2001
From: Mohammed Huzaif Ahmed <huzaif.demha@gmail.com>
Date: Fri, 13 Oct 2023 10:23:37 +0530
Subject: [PATCH 3/3] made changes accordingly and removed the extra line

---
 src/components/Tutorials/subComps/TutorialTitle.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Tutorials/subComps/TutorialTitle.jsx b/src/components/Tutorials/subComps/TutorialTitle.jsx
index 99a5f4bc..c555c2a2 100644
--- a/src/components/Tutorials/subComps/TutorialTitle.jsx
+++ b/src/components/Tutorials/subComps/TutorialTitle.jsx
@@ -26,7 +26,6 @@ const TutorialHeading = ({
       setFullscreen(true);
       document.documentElement.requestFullscreen();
     }
-    setFullscreen(!document.fullscreenElement);
   };
 
   let styleProps = {