Added Logout and Settings options on profile page

src/App.jsx

@@ -1,23 +1,14 @@
 import "./index.css";
 
-import {
-  AnimatedButton,
-  Darkmode,
-  Loader,
-  ShareModal,
-} from "./reusableComponents";
+import { Darkmode, Loader, ShareModal } from "./reusableComponents";
 import React, { useEffect, useState } from "react";
 import { Route, Routes, useNavigate } from "react-router-dom";
 import { auth, db } from "./lib/firebase";
 
 import ErrorBoundary from "./reusableComponents/ErrorBoundary";
 import { FaArrowCircleUp } from "react-icons/fa";
-import Modal from "@mui/material/Modal";
 import { RowModeContext } from "./hooks/useRowMode";
-import logo from "./assets/logo.webp";
 import { makeStyles } from "@mui/styles";
-import { playSuccessSound } from "./js/sounds";
-import { useSnackbar } from "notistack";
 
 // ------------------------------------ Pages ----------------------------------------------------
 const About = React.lazy(() => import("./pages/FooterPages/About"));
@@ -32,7 +23,7 @@ const ForgotPassword = React.lazy(() => import("./pages/ForgotPassword"));
 const NotFound = React.lazy(() => import("./pages/NotFound"));
 const Settings = React.lazy(() => import("./pages/Settings"));
 const Contributors = React.lazy(() =>
-  import("./pages/FooterPages/ContributorPage/index"),
+  import("./pages/FooterPages/ContributorPage/index")
 );
 // ------------------------------------- Components ------------------------------------------------
 const Favorite = React.lazy(() => import("./components/Favorite.jsx"));
@@ -79,19 +70,15 @@ const PAGESIZE = 10;
 function App() {
   const [posts, setPosts] = useState([]);
   const [user, setUser] = useState(null);
-  const [open, setOpen] = useState();
   const [loadingPosts, setLoadingPosts] = useState(true);
   const [loadMorePosts, setLoadMorePosts] = useState(false);
-  const [logout, setLogout] = useState(false);
   const [openShareModal, setOpenShareModal] = useState(false);
   const [currentPostLink, setCurrentPostLink] = useState("");
   const [postText, setPostText] = useState("");
   const [rowMode, setRowMode] = useState(false);
   const [showScroll, setShowScroll] = useState(false);
 
-  const classes = useStyles();
   const navigate = useNavigate();
-  const { enqueueSnackbar } = useSnackbar();
 
   const checkScrollTop = () => {
     if (!showScroll && window.pageYOffset > 400) {
@@ -133,7 +120,7 @@ function App() {
           snapshot.docs.map((doc) => ({
             id: doc.id,
             post: doc.data(),
-          })),
+          }))
         );
       });
   }, []);
@@ -168,15 +155,6 @@ function App() {
     setLoadMorePosts(false);
   }, [loadMorePosts]);
 
-  const signOut = () => {
-    auth.signOut().finally();
-    playSuccessSound();
-    enqueueSnackbar("Logged out Successfully !", {
-      variant: "info",
-    });
-    navigate("/dummygram/");
-  };
-
   return (
     <RowModeContext.Provider value={rowMode}>
       <ErrorBoundary inApp={true}>
@@ -186,9 +164,6 @@ function App() {
               onClick={() => setRowMode((prev) => !prev)}
               user={user}
               setUser={setUser}
-              open={open}
-              setOpen={setOpen}
-              setLogout={setLogout}
             />
           </ErrorBoundary>
           <ShareModal
@@ -198,56 +173,6 @@ function App() {
             postText={postText}
           />
 
-          <Modal open={logout} onClose={() => setLogout(false)}>
-            <div style={getModalStyle()} className={classes.paper}>
-              <form className="modal__signup">
-                <img
-                  src={logo}
-                  alt="dummygram"
-                  className="modal__signup__img"
-                  style={{
-                    width: "80%",
-                    marginLeft: "10%",
-                    filter: "var(--filter-img)",
-                  }}
-                />
-
-                <p
-                  style={{
-                    fontSize: "15px",
-                    fontFamily: "monospace",
-                    padding: "10%",
-                    color: "var(--color)",
-                    // marginBottom:800
-                  }}
-                >
-                  Are you sure you want to Logout?
-                </p>
-
-                <div className={classes.logout}>
-                  <AnimatedButton
-                    type="submit"
-                    onClick={signOut}
-                    variant="contained"
-                    color="primary"
-                    className="button-style"
-                  >
-                    Logout
-                  </AnimatedButton>
-                  <AnimatedButton
-                    type="submit"
-                    onClick={() => setLogout(false)}
-                    variant="contained"
-                    color="primary"
-                    className="button-style"
-                  >
-                    Cancel
-                  </AnimatedButton>
-                </div>
-              </form>
-            </div>
-          </Modal>
-
           <Darkmode />
           <Routes>
             <Route

src/components/Navbar/index.jsx

@@ -1,21 +1,13 @@
 import "./index.css";
 
-import {
-  Box,
-  Button,
-  ClickAwayListener,
-  Divider,
-  Typography,
-} from "@mui/material";
 import React, { useEffect } from "react";
 
 import { AiOutlineInsertRowAbove } from "react-icons/ai";
-import { FaUserCircle } from "react-icons/fa";
 import { auth } from "../../lib/firebase";
 import logo from "../../assets/logo.webp";
 import { useNavigate } from "react-router-dom";
 
-function Navbar({ onClick, open, setOpen, user, setUser, setLogout }) {
+function Navbar({ onClick, user, setUser }) {
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -51,33 +43,6 @@ function Navbar({ onClick, open, setOpen, user, setUser, setLogout }) {
               <div className="rowConvert" onClick={onClick}>
                 <AiOutlineInsertRowAbove style={{ margin: "auto" }} size={30} />
               </div>
-              <ClickAwayListener onClickAway={() => setOpen(false)}>
-                <Button
-                  onClick={() => setOpen((cur) => !cur)}
-                  color="secondary"
-                  variant="contained"
-                  className="button-style"
-                >
-                  <FaUserCircle fontSize="large" />
-                  {open && (
-                    <Box className="nav-menu">
-                      <Box
-                        className="nav-menu-item"
-                        onClick={() => navigate("/dummygram/settings")}
-                      >
-                        <Typography fontSize="0.9rem">Settings</Typography>
-                      </Box>
-                      <Divider />
-                      <Box
-                        className="nav-menu-item"
-                        onClick={() => setLogout(true)}
-                      >
-                        <Typography fontSize="0.9rem">Log Out</Typography>
-                      </Box>
-                    </Box>
-                  )}
-                </Button>
-              </ClickAwayListener>
             </div>
           </>
         )}

src/pages/Profile/index.css

@@ -25,15 +25,44 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin-top: 50px;
+  margin-bottom: 0;
 }
-.feed-main-container .app__posts {
-  padding: 2em 10px 20px 0;
+
+.profile-right p {
+  font-size: 1rem;
 }
 
 .img-save:hover {
   color: var(--btn-color);
 }
 
+.modal__signup__img {
+  width: 80%;
+  border-radius: 0.3rem;
+  margin-bottom: 10px;
+}
+
+.modal__signup {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.modal__signup button {
+  margin-top: 10px;
+}
+
+.button-style {
+  background: var(--btn-color);
+  border-radius: 20px;
+  margin: 10px;
+}
+
+.button-style:hover {
+  background: var(--btn-color-hover);
+}
+
 /* media query */
 
 @media screen and (max-width: 600px) {
@@ -53,9 +82,6 @@
     width: 110px;
     height: 110px;
   }
-  .profile-right p {
-    font-size: 1rem;
-  }
   .inner-profile {
     width: 100%;
   }
@@ -69,6 +95,12 @@
     width: 140px;
     height: 140px;
   }
+  .app__posts {
+    padding-top: 0;
+  }
+  .setting-logout {
+    flex-direction: row;
+  }
 }
 
 @media screen and (max-width: 800px) {
@@ -97,9 +129,6 @@
     width: 180px;
     height: 180px;
   }
-  .profile-right p {
-    font-size: 1.6rem;
-  }
   .img-edit,
   .img-save {
     font-size: 1rem;