feat: fix LogOut modal position, and enhance its opening/closing logic

package.json

@@ -13,6 +13,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.2.1",
     "emoji-picker-react": "^4.4.7",
+    "focus-trap-react": "^10.2.3",
     "form-data": "^4.0.0",
     "immer": "^9.0.16",
     "react": "^18.2.0",

src/component/Sidebar/SideBar.jsx

@@ -33,7 +33,7 @@ import NoChats from "../Messages/NoChats";
 import { ViewNotifyAction } from "../../react-redux/actions/Notifications";
 
 function Sidebar() {
-
+    const [isLogoutModalOpen, setIsLogoutModalOpen] = useState();
     const auth = useSelector((s) => s.AuthReducer)
     const { user, toFgtPwd } = auth;
     const nameInApi = user?.user_name
@@ -183,9 +183,9 @@ function Sidebar() {
         document.getElementById("CTReplyDiv").style.display = "none"
         setOPacity()
     }
-    function handleLogout() {
-        document.getElementsByClassName("logoutDiv")[0].style.display = "flex";
-        setOPacity()
+
+    function openLogoutModal() {
+        setIsLogoutModalOpen(true);
     }
 
     const pro = useSelector((p) => p.ProfileNameReducer)
@@ -266,7 +266,7 @@ else{
                         navigate("/phonesearch")
                     }} />
                 </div>
-                <img src={logoutIcon} className="NV3Logout" onClick={handleLogout} />
+                <img src={logoutIcon} className="NV3Logout" onClick={openLogoutModal} />
             </div>
             </div>
             <div className="navbar3">
@@ -295,7 +295,7 @@ else{
                     <Link to={`/profile/${nameInApi}`}><li className="sbListItem" onClick={() => { handleProfile() }}><img className="sbListIcon" src={profile} id="profileIcon" />   <span className="sbListName">Profile  </span></li></Link>
                 </ul>
                 <button className="sideBarTweetBtn" onClick={() => { xyz() }}>Create Tweet</button>
-                <button className="logOutBtn" onClick={handleLogout}><img src={logoutIcon} className="logoutIcon" />Log Out</button>
+                <button className="logOutBtn" onClick={openLogoutModal}><img src={logoutIcon} className="logoutIcon" />Log Out</button>
             </div>
             <div id="SEARCHBOX">
                 <div className="searchBar">
@@ -321,7 +321,7 @@ else{
             </div>
 
             <CreateTweet />
-            <LogOut />
+            {isLogoutModalOpen ? <LogOut onClose={() => setIsLogoutModalOpen(false)} /> : null}
 
         </div>
         {(loading === true) ? <Spinner animation="border" variant="light" id="loadSpinner" /> : null}

src/component/logOut/logOut.jsx

@@ -4,42 +4,38 @@ import logout from "../Assets/logout.svg"
 import "./logout.css"
 import { useDispatch } from "react-redux";
 import { setLogout } from "../../react-redux/actions/authAction";
+import FocusTrap from "focus-trap-react";
 
-function LogOut() {
-    const naavigate = useNavigate()
+function LogOut({ onClose }) {
+    const navigate = useNavigate()
     const dispatch = useDispatch()
+
     async function handleLogOut() {
         await localStorage.clear();
-        await dispatch(setLogout())
-        naavigate("/login");
-        document.getElementsByClassName("logoutDiv")[0].style.display = "none";
-    }
-    function setOPacity() {
-        var items = document.getElementsByClassName("POPUPBG")
-        for (var i = 0; i < items.length; i++) {
-            document.getElementsByClassName("POPUPBG")[i].style.opacity = 1;
-        }
-    }
+        await dispatch(setLogout());
 
-    function handleCancelLog() {
-        document.getElementsByClassName("logoutDiv")[0].style.display = "none";
-        setOPacity()
+        onClose();
+
+        navigate("/login");
     }
 
-    return <>
-        <div className="logoutDiv">
-            <div className="lOut1">
-                <p className="logoutText1">Log Out?</p>
-                <p className="logoutText2">Are you sure you want to log out?</p>
-                <button className="logoutbtn1" onClick={handleLogOut}>Yes</button>
-                <button className="logoutbtn2" onClick={handleCancelLog}>No</button>
-            </div>
-            <div className="lOut2">
-                <img src={logout} className="logoutImage" />
+    return (
+        <FocusTrap active>
+            <div class="background">
+                <div className="logoutDiv">
+                    <div className="lOut1">
+                        <p className="logoutText1">Log Out?</p>
+                        <p className="logoutText2">Are you sure you want to log out?</p>
+                        <button className="logoutbtn1" onClick={handleLogOut}>Yes</button>
+                        <button className="logoutbtn2" onClick={onClose}>No</button>
+                    </div>
+                    <div className="lOut2">
+                        <img src={logout} className="logoutImage" alt="" />
+                    </div>
+                </div>
             </div>
-        </div>
-
-    </>
+        </FocusTrap>
+    );
 }
 
-export default LogOut;
+export default LogOut;

src/component/logOut/logout.css

@@ -1,6 +1,13 @@
+.background {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 10000000;
+}
+
 .logoutDiv{
 display: flex;
-position:absolute;
+position: fixed;
 top:20vh;
 left:29vw;
 width:38vw;
@@ -13,7 +20,6 @@ border-radius: 16px;
 box-shadow: 0px 50px 80px #1A1C1E;
 border: 0.7px solid rgba(255, 255, 255, 0.2);
 z-index:110;
-display: none;
 }
 .lOut1{
 display: flex;
@@ -222,4 +228,4 @@ margin-left:-30vw;
         .logoutImage{
             width:115px;
         }
-    }
+    }