Improve UI of comment box (#759)

* Improve UI of comment box * npm run pretty * fix padding for dialog title * changed min height * adjust margin in comment box --------- Co-authored-by: Narayan soni <narayansoni854@gmail.com>
narayan954 · Jul 13, 2023 · 8dddebe · 8dddebe
1 parent 99c2aaf
commit 8dddebe
Show file tree

Hide file tree

Showing 14 changed files with 161 additions and 151 deletions.
diff --git a/src/components/Post/CommentBox.jsx b/src/components/Post/CommentBox.jsx
@@ -14,7 +14,7 @@ const CommentBox = ({
   postComment,
 }) => {
   return (
-    <div>
+    <div className="comment-box">
       {user && (
         <form className="modal__commentBox">
           <div
@@ -45,7 +45,7 @@ const CommentBox = ({
           </div>
 
           <input
-            className="post__input"
+            className="post__input comment-input"
             type="text"
             placeholder="Add a comment..."
             value={comment}
@@ -66,11 +66,11 @@ const CommentBox = ({
             type="submit"
             onClick={postComment}
             style={{
-              fontWeight: "bold",
-              textTransform: "uppercase",
+              padding: 0,
+              paddingRight: "5px",
             }}
           >
-            <Send style={{ color: "var(--color" }} />
+            <Send className="send-comment-btn" />
           </IconButton>
         </form>
       )}

diff --git a/src/components/Post/CommentDialogBox.jsx b/src/components/Post/CommentDialogBox.jsx
@@ -9,7 +9,9 @@ import {
   Divider,
 } from "@mui/material";
 
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import DeleteTwoToneIcon from "@mui/icons-material/DeleteTwoTone";
+import { Link } from "react-router-dom";
 import React from "react";
 import ReadMore from "../ReadMore";
 
@@ -33,25 +35,28 @@ const CommentDialogBox = ({
         },
       }}
       borderRadius="10px"
-      maxHeight="30vh"
+      maxHeight="40vh"
+      // marginBottom="30px"
+      marginTop="10px"
     >
       {comments.length ? (
         <>
           {comments.map((userComment) => (
             <div key={userComment.id}>
               <div className="commentCard">
-                <div
-                  style={{
-                    fontSize: "1.1rem",
-                    fontWeight: "600",
-                    color: "black",
-                  }}
-                >
-                  {userComment.content.username}
-                  {"  "}
-                  <span style={{ fontSize: "0.9rem", fontWeight: "400" }}>
+                <div>
+                  <Link
+                    className="comment-doer"
+                    to={`/dummygram/${userComment.content.username}`}
+                  >
+                    <AccountCircleIcon />
+                    <span className="comment-doer-name">
+                      {userComment.content.username}
+                    </span>
+                  </Link>
+                  <p className="comment">
                     <ReadMore>{userComment.content.text}</ReadMore>
-                  </span>
+                  </p>
                 </div>
                 <div
                   onClick={() => {
@@ -63,7 +68,7 @@ const CommentDialogBox = ({
                     userComment.content.username === user.displayName && (
                       <DeleteTwoToneIcon
                         fontSize="small"
-                        style={{ color: "red" }}
+                        className="comment-delete-icon"
                       />
                     )}
                   {

diff --git a/src/components/Post/CommentHolder.jsx b/src/components/Post/CommentHolder.jsx
diff --git a/src/components/Post/index.css b/src/components/Post/index.css
@@ -60,19 +60,9 @@
 }
 
 .post__background {
-  min-height: 350px;
-  /* background: linear-gradient(
-      45deg,
-      #abdb10,
-      #cbdb51,
-      #ce2a11,
-      #e263ab,
-      #30e19d,
-      #a1d9c9
-    ); */
+  min-height: 200px;
   background: url(../../assets/postbg.webp);
   background-size: cover;
-  /* color: rgb(145, 230, 227); */
   color: black;
   justify-content: center;
   align-items: center;
@@ -150,6 +140,71 @@
   border-radius: 10px;
 }
 
+.comment-box-title-style {
+  display: inline-block;
+  width: 10px;
+  aspect-ratio: 1;
+  margin-left: 5px;
+  margin-bottom: 0;
+  border-radius: 50%;
+  background-color: var(--clr);
+}
+
+.comment-doer {
+  font-size: 1rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: 5px;
+  text-decoration: none;
+  color: black;
+}
+.comment-doer-name {
+  color: rgb(42, 42, 135);
+}
+.comment-doer-name:hover {
+  text-decoration: underline;
+}
+
+.comment {
+  color: black;
+  font-weight: 400;
+}
+
+.comment-delete-icon {
+  color: red;
+  cursor: pointer;
+  border-radius: 50%;
+  padding: 5px;
+  transition: 0.3s ease-in-out;
+}
+
+.comment-delete-icon:hover {
+  background-color: rgb(187, 187, 187);
+}
+
+.comment-box {
+  margin-top: 10px;
+  width: 100%;
+}
+
+.send-comment-btn {
+  font-weight: bold;
+  color: rgb(19, 19, 191);
+  border-radius: 50%;
+  padding: 5px;
+}
+
+.comment-input {
+  background-color: var(--bg-color) !important;
+  color: var(--color);
+  border-radius: 22px;
+  margin-top: 4px;
+  width: 100%;
+  box-shadow: var(--post-box-shadow);
+}
+
 .emoji-picker-btn {
   color: var(--emoji-btn);
 }

diff --git a/src/components/Post/index.jsx b/src/components/Post/index.jsx
@@ -7,6 +7,7 @@ import {
   Flexbetween,
 } from "../../reusableComponents";
 import {
+  DialogTitle,
   Divider,
   Paper,
   Typography,
@@ -24,7 +25,6 @@ import { useTheme } from "@mui/material/styles";
 const PostHeader = lazy(() => import("./PostHeader"));
 const CommentBox = lazy(() => import("./CommentBox"));
 const CommentDialogBox = lazy(() => import("./CommentDialogBox"));
-const CommentHolder = lazy(() => import("./CommentHolder"));
 const ImgBox = lazy(() => import("./ImgBox"));
 const PostNav = lazy(() => import("./PostNav"));
 
@@ -60,7 +60,7 @@ function Post(prop) {
             snapshot.docs.map((doc) => ({
               id: doc.id,
               content: doc.data(),
-            })),
+            }))
           );
         });
     }
@@ -238,21 +238,37 @@ function Post(prop) {
               />
             </ErrorBoundary>
             <ErrorBoundary>
-              <CommentHolder
-                showEmojis={showEmojis}
+              <CommentBox
                 setShowEmojis={setShowEmojis}
+                showEmojis={showEmojis}
                 onEmojiClick={onEmojiClick}
-                comments={comments}
                 comment={comment}
                 setComment={setComment}
                 postComment={postComment}
+                user={user}
               />
             </ErrorBoundary>
             <DialogBox
               open={isCommentOpen}
               onClose={handleCommentClose}
-              title="All Comments"
+              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
                   Item={Item}

diff --git a/src/components/SearchBar/index.jsx b/src/components/SearchBar/index.jsx
@@ -54,7 +54,7 @@ function SearchBar() {
   // code to filter posts accornding to searchtext
 
   const filteredPosts = posts.filter((post) =>
-    post.post.username.toLowerCase().includes(searchText.toLowerCase()),
+    post.post.username.toLowerCase().includes(searchText.toLowerCase())
   );
 
   return (

diff --git a/src/components/postView/index.jsx b/src/components/postView/index.jsx
@@ -31,7 +31,7 @@ const PostDetails = React.lazy(() => import("./PostDetails.jsx"));
 const PostViewComments = React.lazy(() => import("./PostViewComments.jsx"));
 const PostViewMenu = React.lazy(() => import("./PostViewMenu.jsx"));
 const ImageSlider = React.lazy(() =>
-  import("../../reusableComponents/ImageSlider"),
+  import("../../reusableComponents/ImageSlider")
 );
 const ReadMore = React.lazy(() => import("../ReadMore"));
 const PostCommentView = ({
@@ -53,7 +53,7 @@ const PostCommentView = ({
 
   const [comments, setComments] = React.useState(null);
   const [likesNo, setLikesNo] = React.useState(
-    likecount ? likecount.length : 0,
+    likecount ? likecount.length : 0
   );
   const tempLikeCount = likecount ? [...likecount] : [];
   const [showEmojis, setShowEmojis] = React.useState(false);
@@ -115,7 +115,7 @@ const PostCommentView = ({
             snapshot.docs.map((doc) => ({
               id: doc.id,
               content: doc.data(),
-            })),
+            }))
           );
         });
     }

diff --git a/src/lib/firebase.js b/src/lib/firebase.js
@@ -39,7 +39,7 @@ function handleMultiUpload(files, options = {}) {
       onUploadProgress: (_percentage) => {},
       generateThumbnails: false,
     },
-    options,
+    options
   );
 
   let totalSize = 0;
@@ -71,7 +71,7 @@ function handleMultiUpload(files, options = {}) {
           lastUploadedSize = snapshot.bytesTransferred;
 
           _options.onUploadProgress(
-            Math.round((totalUploaded / totalSize) * 100),
+            Math.round((totalUploaded / totalSize) * 100)
           );
         },
         (error) => {
@@ -129,7 +129,7 @@ function handleMultiUpload(files, options = {}) {
             .catch((error) => {
               reject(error);
             });
-        },
+        }
       );
     });
   });