Improved the aesthetics of this project #1317

package.json

@@ -23,7 +23,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.11.11",
-    "@mui/material": "^5.13.6",
+    "@mui/material": "^5.14.20",
     "@mui/styles": "^5.13.2",
     "emoji-picker-react": "^4.4.10",
     "file-saver": "^2.0.5",

src/App.jsx

@@ -350,6 +350,7 @@ function Wrapper({ user, setUser, setRowMode }) {
           height: 50,
           display: showScroll ? "flex" : "none",
           position: "fixed",
+          bottom: "10px"
         }}
       />
     </div>

src/components/Navbar/index.css

@@ -2,6 +2,7 @@
 
 .app__header {
   position: fixed;
+  height: 40px;
   width: 100%;
   top: 0;
   z-index: 999;
@@ -10,7 +11,7 @@
   object-fit: contain;
   display: flex;
   align-items: center;
-  background-color: var(--dark-post-bg);
+  background-color: var(--bg-color-alt2);
   justify-content: space-between;
 }
 

src/components/Post/CommentBox.jsx

@@ -20,6 +20,8 @@ const CommentBox = ({
     <div className="comment-box">
       {user && (
         <form className="modal__commentBox">
+        <div className="input__container">
+
           <div
             className="social__icon"
             style={{
@@ -55,13 +57,11 @@ const CommentBox = ({
             onChange={(e) => setComment(e.target.value)}
             maxLength={300}
             style={{
-              // backgroundColor: "var(--bg-color)",
-              background: "transparent",
+              // background: "transparent",
               color: "var(--color)",
-              borderRadius: "11px",
-              marginTop: "4px",
             }}
           />
+        </div>
 
           <IconButton
             className="post__button"

src/components/Post/ImgBox.jsx

@@ -14,8 +14,29 @@ const ImgBox = ({
   const defaultBg = `linear-gradient(130deg, #dee2ed, #dee2ed, #9aa9d1, #b6c8e3, #b6afd0, #d3c0d8)`;
   return (
     <div>
+      {/* //Post Content. */}
+      <div className={caption.length ? "p-0" : "post__text"}>
+        {caption && postHasImages ? (
+          <p
+            className={`${
+              caption.length >= 100 ? "postCaption" : "postCaptiontext"
+            }`}
+          >
+            <ReadMore postId={postId}>{caption}</ReadMore>
+          </p>
+        ) : (
+          <p
+            style={{
+              color: "var(--color)",
+              paddingInline: "8px",
+              height: "27px",
+            }}
+          ></p>
+        )}
+
+      {/*Image associated with post */}  
       {postHasImages ? (
-        <ImageSlider
+        <ImageSlider 
           slides={postImages}
           isCommentBox={false}
           doubleClickHandler={likesHandler}
@@ -41,25 +62,6 @@ const ImgBox = ({
           )}
         </div>
       )}
-
-      <div className={caption.length ? "p-0" : "post__text"}>
-        {caption && postHasImages ? (
-          <p
-            className={`${
-              caption.length >= 100 ? "postCaption" : "postCaptiontext"
-            }`}
-          >
-            <ReadMore postId={postId}>{caption}</ReadMore>
-          </p>
-        ) : (
-          <p
-            style={{
-              color: "var(--color)",
-              paddingInline: "8px",
-              height: "27px",
-            }}
-          ></p>
-        )}
       </div>
     </div>
   );

src/components/Post/PostNav.jsx

@@ -4,26 +4,36 @@ import {
   FavoriteOutlined,
   ShareOutlined,
 } from "@mui/icons-material";
-import { IconButton, Typography } from "@mui/material";
-import React, { useState } from "react";
-
+import { IconButton, Typography, Tooltip } from "@mui/material";
+import React, { useState, lazy } from "react";
 import BookmarkBorderIcon from "@mui/icons-material/BookmarkBorder";
 import BookmarksIcon from "@mui/icons-material/Bookmarks";
-import Flexbetween from "../../reusableComponents/Flexbetween";
+import { DialogTitle } from "@mui/material";
+
+import { DialogBox, ErrorBoundary, Flexbetween } from "../../reusableComponents";
 import { ShareModal } from "../../reusableComponents";
 import { savePost } from "../../js/postFn";
 import { useNavigate } from "react-router-dom";
 
+
+const CommentDialogBox = lazy(() => import("./CommentDialogBox"));
+const LikesDialogBox = lazy(() => import("./LikesDialogBox"));
+
 const PostNav = ({
   caption,
   postId,
   fullScreen,
   likesHandler,
   user,
   tempLikeCount,
-  setisCommentOpen,
+  likeCount,
+  likecount,
+  commentCount,
+  comments,
 }) => {
   const [openShareModal, setOpenShareModal] = useState(false);
+  const [isCommentOpen, setisCommentOpen] = useState(false);
+  const [isLikesOpen, setIsLikesOpen] = useState(false);
   const [favoritePosts, setFavoritePosts] = useState(
     JSON.parse(localStorage.getItem("posts")) || [],
   );
@@ -44,47 +54,70 @@ const PostNav = ({
     }
   };
 
+  const handleCommentClose = () => {
+    setisCommentOpen(false);
+  };
+
   return (
     <>
-      <Flexbetween gap={!fullScreen && "1rem"} sx={{ marginInline: "auto" }}>
+      <Flexbetween gap={!fullScreen && "4rem"} sx={{ marginInline: "auto" }}>
+
+        {/* Like Icon */}
+
         <Flexbetween
           sx={{ cursor: "pointer" }}
-          onClick={() => (isAnonymous ? navigate("/signup") : likesHandler())}
         >
-          <IconButton>
-            {tempLikeCount.indexOf(user?.uid) != -1 ? (
-              <FavoriteOutlined
-                sx={{
-                  color: "red",
-                }}
-              />
-            ) : (
-              <FavoriteBorderOutlined
-                style={{ color: "var(--post-nav-icons)" }}
-              />
-            )}
-          </IconButton>
-          <Typography fontSize={14} className="post-nav-item">
-            Like
-          </Typography>
+          <Tooltip title = {tempLikeCount.indexOf(user.uid) != -1 ? "Remove" : "Like"} arrow>
+            <IconButton size="small" onClick={() => (isAnonymous ? navigate("/signup") : likesHandler())}>
+              {tempLikeCount.indexOf(user?.uid) != -1 ? (
+                <FavoriteOutlined
+                  sx={{
+                    color: "red"
+                  }}
+                />
+              ) : (
+                <FavoriteBorderOutlined
+                  style={{ color: "var(--post-nav-icons)" }}
+                />
+              )}
+            </IconButton>
+          </Tooltip>
+          <div onClick={() => setIsLikesOpen((prev) => !prev)}>
+          <Tooltip title = "Stats" arrow>
+            <Typography fontSize={14} className="post-nav-item">
+              {likeCount}
+            </Typography>
+          </Tooltip>
+          </div>
         </Flexbetween>
 
+        {/* Comment Icon */}
+
         <Flexbetween
           sx={{ cursor: "pointer" }}
-          onClick={() => {
-            isAnonymous ? navigate("/signup") : setisCommentOpen(true);
-          }}
         >
-          <IconButton sx={{ padding: "2px" }}>
+        <Tooltip title = "Comment" arrow>
+
+          <IconButton size="small" onClick={() => {
+            isAnonymous ? navigate("/signup") : setisCommentOpen(true);
+          }}>
             <ChatBubbleOutlineRounded
               style={{ color: "var(--post-nav-icons)" }}
             />
           </IconButton>
-          <Typography fontSize={14} className="post-nav-item">
-            Comment
-          </Typography>
+        </Tooltip>
+
+          <div onClick={() => setisCommentOpen((prev) => !prev)}>
+            <Tooltip title = "Stats" arrow>
+            <Typography fontSize={14} className="post-nav-item">
+              {commentCount}
+            </Typography>
+            </Tooltip>
+          </div>
         </Flexbetween>
 
+        {/* Share Icon */}
+
         <Flexbetween
           sx={{ cursor: "pointer" }}
           onClick={() => {
@@ -95,25 +128,25 @@ const PostNav = ({
             }
           }}
         >
-          <IconButton>
+        <Tooltip title = "Share" arrow>
+          <IconButton size="small">
             <ShareOutlined style={{ color: "var(--post-nav-icons)" }} />
           </IconButton>
-          <Typography fontSize={14} className="post-nav-item">
-            Share
-          </Typography>
+        </Tooltip>
         </Flexbetween>
 
+        {/* Save Icon */}
+
         <Flexbetween sx={{ cursor: "pointer" }} onClick={handleOnClick}>
-          <IconButton>
+        <Tooltip title=  {favoritePosts.indexOf(postId) !== -1? "Remove" : "Bookmark"} arrow>
+          <IconButton size="small">
             {favoritePosts.indexOf(postId) !== -1 ? (
               <BookmarksIcon sx={{ color: "green" }} />
             ) : (
               <BookmarkBorderIcon style={{ color: "var(--post-nav-icons)" }} />
             )}
           </IconButton>
-          <Typography fontSize={14} className="post-nav-item">
-            Save
-          </Typography>
+        </Tooltip>
         </Flexbetween>
       </Flexbetween>
 
@@ -125,6 +158,57 @@ const PostNav = ({
           postText={caption}
         />
       )}
+
+      {user &&
+        /* Comments dialog box */
+        <div>
+
+          <DialogBox
+            open={isCommentOpen}
+            onClose={handleCommentClose}
+            showTitle={false}
+          >
+            <DialogTitle style={{ padding: 0, color: "var(--color)" }}>
+              Comments
+              <span
+                className="comment-box-title-style"
+                style={{ "--clr": "red" }}
+              ></span>
+              <span
+                className="comment-box-title-style"
+                style={{ "--clr": "green" }}
+              ></span>
+              <span
+                className="comment-box-title-style"
+                style={{ "--clr": "blue" }}
+              ></span>
+            </DialogTitle>
+            <hr />
+            <ErrorBoundary>
+              <CommentDialogBox
+                postId={postId}
+                comments={comments}
+                user={user}
+                fullScreen={fullScreen}
+              />
+            </ErrorBoundary>
+          </DialogBox>
+
+          {/*Likes Dialog Box */}
+
+          <DialogBox
+            open={isLikesOpen}
+            onClose={() => setIsLikesOpen(false)}
+            title="Likes ❤"
+          >
+            {likeCount === 0 ? (
+              <p style={{ textAlign: "center" }}>No likes!!</p>
+            ) : (
+              <LikesDialogBox likecountArr={likecount} />
+            )}
+          </DialogBox>
+        </div>
+      }
     </>
   );
 };