Dp zoom in feature added

src/App.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Route, Routes, useNavigate } from "react-router-dom";
 import { auth, db } from "./lib/firebase";
 
-import AnimatedButton from "./components/AnimatedButton";
+import AnimatedButton from "./reusableComponents/AnimatedButton";
 import { FaArrowCircleUp } from "react-icons/fa";
 import Favorite from "./components/Favorite";
 import Loader from "./components/Loader";
@@ -13,7 +13,7 @@ import NotFoundPage from "./components/NotFound";
 import Post from "./components/Post";
 import PostView from "./pages/PostView";
 import Profile from "./pages/Profile";
-import ShareModal from "./components/ShareModal";
+import ShareModal from "./reusableComponents/ShareModal";
 import SideBar from "./components/SideBar";
 import SignupScreen from "./pages/Signup";
 import { makeStyles } from "@mui/styles";
@@ -265,7 +265,7 @@ function App() {
                   alignItems: "center",
                 }}
               >
-                <SideBar user={user} />
+                <SideBar />
                 <div
                   style={
                     !loadingPosts

src/components/Favorite.jsx

@@ -3,7 +3,7 @@ import { auth, db } from "../lib/firebase";
 
 import { Box } from "@mui/material";
 import Post from "./Post";
-import ShareModal from "./ShareModal";
+import ShareModal from "../reusableComponents/ShareModal";
 import SideBar from "./SideBar";
 
 function Favorite() {

src/components/ImgUpload/index.jsx

@@ -5,7 +5,7 @@ import { FaChevronCircleLeft, FaChevronCircleRight } from "react-icons/fa";
 import React, { useRef, useState } from "react";
 import { auth, db, handleMultiUpload } from "../../lib/firebase";
 
-import AnimatedButton from "../AnimatedButton";
+import AnimatedButton from "../../reusableComponents/AnimatedButton";
 import Camera from "../Camera";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import { Link } from "react-router-dom";

src/components/SideBar/index.jsx

@@ -14,7 +14,7 @@ import React from "react";
 import { auth } from "../../lib/firebase";
 import { useState } from "react";
 
-function SideBar(props) {
+function SideBar() {
   const navigate = useNavigate();
   const [openNewUpload, setOpenNewUpload] = useState(false);
   const user = auth.currentUser;
@@ -41,9 +41,9 @@ function SideBar(props) {
           onClick={() =>
             navigate("/dummygram/profile", {
               state: {
-                name: props.user.toJSON().displayName,
-                email: props.user.toJSON().email,
-                avatar: props.user.toJSON().photoURL,
+                name: user.displayName,
+                email: user.email,
+                avatar: user.photoURL,
               },
             })
           }

src/pages/Profile/index.jsx

@@ -5,6 +5,7 @@ import {
   Box,
   Button,
   Divider,
+  Modal,
   Typography,
   useMediaQuery,
 } from "@mui/material";
@@ -23,6 +24,8 @@ function Profile() {
   const [image, setImage] = useState("");
   const [profilepic, setProfilePic] = useState(avatar);
   const [visible, setVisibile] = useState(false);
+  const [open, setOpen] = useState(false);
+  const handleClose = () => setOpen(false);
   const navigate = useNavigate();
 
   const handleBack = () => {
@@ -71,15 +74,55 @@ function Profile() {
   return (
     <>
       <SideBar />
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box
+          sx={{
+            position: "relative",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: `${isNonMobile ? "40vw" : "80vw"}`,
+            height: `${isNonMobile ? "40vw" : "80vw"}`,
+            boxShadow: 24,
+            backdropFilter: "blur(7px)",
+            border: "1px solid #fff",
+            zIndex: "1000",
+            textAlign: "center",
+            borderRadius: "5%",
+          }}
+        >
+          <img
+            style={{
+              objectFit: "cover",
+              borderRadius: "50%",
+              margin: 0,
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+            }}
+            width={isNonMobile ? "50%" : "50%"}
+            height={isNonMobile ? "50%" : "50%"}
+            src={profilepic}
+            alt="user"
+          />
+        </Box>
+      </Modal>
+
       <Box
-        width={isNonMobile ? "30%" : "70%"}
+        width={isNonMobile ? "20%" : "70%"}
         backgroundColor="#F4EEFF"
         paddingY={5}
-        paddingX={7}
+        paddingX={6}
         sx={{
           border: "none",
           boxShadow: "0 0 6px black",
-          margin: "5.5rem auto 2.5rem",
+          margin: "8rem auto 2.5rem",
         }}
         display="flex"
         justifyContent={"center"}
@@ -90,11 +133,12 @@ function Profile() {
           <Box marginX="auto" fontSize="600%">
             {avatar ? (
               <Avatar
+                onClick={() => setOpen((on) => !on)}
                 alt={name}
-                src={avatar}
+                src={profilepic}
                 sx={{
-                  width: "23vh",
-                  height: "23vh",
+                  width: "22vh",
+                  height: "22vh",
                   bgcolor: "black",
                   border: "none",
                   boxShadow: "0 0 4px black",
@@ -105,10 +149,11 @@ function Profile() {
                 }}
               />
             ) : (
-              <FaUserCircle style={{ width: "23vh", height: "23vh" }} />
+              <FaUserCircle style={{ width: "22vh", height: "22vh" }} />
             )}
           </Box>
-          {name == auth.currentUser.displayName ? (
+
+          {name == auth.currentUser?.displayName ? (
             <Box>
               <input
                 type="file"

src/components/AnimatedButton.jsx → src/reusableComponents/AnimatedButton.jsx

@@ -1,5 +1,5 @@
 import { Button } from "@mui/material";
-import Loader from "./Loader";
+import Loader from "../components/Loader";
 
 export default function AnimatedButton(props) {
   const { loading, children, ..._props } = props;