Improved Post UI (narayan954#643)

* issue narayan954#628 resolved * better UI , More responsive , optimized CSS * Changes in card Dark mode changes done * moved post css to post * Comment box changes Changes done * Updated card Card height updated. * Updated the card Made changes in the card like image size and caption repeating issue. * removed extra lines and scrollbar for caption * Cards made responsive The cards are made responsive and the caption is made properly visible. * fix syntax error in profile.jsx --------- Co-authored-by: Narayan soni <narayansoni854@gmail.com>
Palakkgoyal · Jul 13, 2023 · 0d04b9b · 0d04b9b
1 parent a3a291f
commit 0d04b9b
Show file tree

Hide file tree

Showing 22 changed files with 163 additions and 84 deletions.
diff --git a/src/components/ImgUpload/index.css b/src/components/ImgUpload/index.css
@@ -203,7 +203,7 @@
   display: flex;
   align-items: center;
   /* justify-content: space-between; */
-  padding: 10px;
+  padding-inline: 8px;
   flex-wrap: wrap;
 }
 

diff --git a/src/components/Post/CommentBox.jsx b/src/components/Post/CommentBox.jsx
@@ -52,9 +52,10 @@ const CommentBox = ({
             onChange={(e) => setComment(e.target.value)}
             maxLength="150"
             style={{
-              backgroundColor: "var(--bg-color)",
+              // backgroundColor: "var(--bg-color)",
+              background: "transparent",
               color: "var(--color)",
-              borderRadius: "22px",
+              borderRadius: "11px",
               marginTop: "4px",
             }}
           />
@@ -69,7 +70,7 @@ const CommentBox = ({
               textTransform: "uppercase",
             }}
           >
-            <Send />
+            <Send style={{ color: "var(--color" }} />
           </IconButton>
         </form>
       )}

diff --git a/src/components/Post/CommentDialogBox.jsx b/src/components/Post/CommentDialogBox.jsx
@@ -102,7 +102,7 @@ const CommentDialogBox = ({
           ))}
         </>
       ) : (
-        <span>No Comments</span>
+        <span style={{ color: "var(--color)" }}>No Comments</span>
       )}
     </Box>
   );

diff --git a/src/components/Post/CommentHolder.jsx b/src/components/Post/CommentHolder.jsx
@@ -52,9 +52,8 @@ const CommentHolder = ({
         onChange={(e) => setComment(e.target.value)}
         maxLength="150"
         style={{
-          backgroundColor: "var(--bg-color)",
+          backgroundColor: "transparent",
           color: "var(--color)",
-          borderRadius: "22px",
           margin: "4px 0px",
         }}
       />

diff --git a/src/components/Post/ImgBox.jsx b/src/components/Post/ImgBox.jsx
@@ -35,15 +35,16 @@ const ImgBox = ({
           )}
         </div>
       )}
-      <div className="post__text">
+
+      <div className={`post__text ${caption == undefined ? "p-0" : " "}`}>
         {caption && postHasImages && caption.length >= 300 ? (
-          <p style={{ color: "var(--color)" }}>
+          <p style={{ color: "var(--color)", paddingInline: "8px" }}>
             <ReadMore postId={postId}>{caption}</ReadMore>
           </p>
         ) : (
           caption &&
           postHasImages && (
-            <p style={{ color: "var(--color)" }}>
+            <p style={{ color: "var(--color)", paddingInline: "16px" }}>
               <Caption caption={caption} />
             </p>
           )

diff --git a/src/components/Post/PostHeader.jsx b/src/components/Post/PostHeader.jsx
@@ -78,7 +78,7 @@ const PostHeader = ({ postId, user, postData, postHasImages, timestamp }) => {
   return (
     <div className="post__header">
       <Avatar
-        className="post__avatar avatar flex"
+        className="post__avatar  flex avatar"
         alt={username}
         src={avatar}
         onClick={() => {
@@ -121,8 +121,8 @@ const PostHeader = ({ postId, user, postData, postHasImages, timestamp }) => {
           onClose={() => setAnchorEl(null)}
           PaperProps={{
             style: {
-              maxHeight: ITEM_HEIGHT * 4.5,
-              width: "20ch",
+              maxHeight: ITEM_HEIGHT * 4,
+              width: "18ch",
             },
           }}
         >

diff --git a/src/components/Post/PostNav.jsx b/src/components/Post/PostNav.jsx
@@ -67,7 +67,7 @@ const PostNav = ({
   };
 
   return (
-    <Flexbetween gap={!fullScreen && "1.6rem"}>
+    <Flexbetween gap={!fullScreen && "1.6rem"} sx={{ marginInline: "auto" }}>
       <Flexbetween sx={{ cursor: "pointer" }} onClick={likesHandler}>
         <IconButton>
           {tempLikeCount.indexOf(user.uid) != -1 ? (
@@ -93,7 +93,7 @@ const PostNav = ({
           setisCommentOpen(!Open);
         }}
       >
-        <IconButton>
+        <IconButton sx={{ padding: "2px" }}>
           <ChatBubbleOutlineRounded
             style={{ color: "var(--post-nav-icons)" }}
           />

diff --git a/src/components/Post/index.css b/src/components/Post/index.css
@@ -1,3 +1,7 @@
+.p-0 {
+  padding: 0%;
+}
+
 .post {
   max-width: 400px;
   margin-top: 20px;
@@ -16,7 +20,7 @@
 }
 
 .avatar {
-  border: 2px solid royalblue;
+  border: 2px solid rgb(221, 221, 90);
   cursor: pointer;
   transition: all 0.2s;
 }
@@ -51,11 +55,12 @@
 
 .social__icon__last {
   padding: 10px;
+  padding-right: 0;
   margin-left: auto !important;
 }
 
 .post__background {
-  min-height: 250px;
+  min-height: 350px;
   /* background: linear-gradient(
       45deg,
       #abdb10,
@@ -105,18 +110,25 @@
 }
 
 .post__text {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  /* height: 1.5rem; */
   font-weight: normal;
-  padding: 5px 15px;
   font-size: 15px;
+  overflow: auto;
   text-align: left;
   white-space: pre-line;
+  overflow: hidden;
+  height: 3.5em;
+  line-height: 1.2em;
 }
 
 .post__commentBox {
   display: flex;
-  /* margin-top: 2px; */
+  align-items: center;
+  flex-direction: row;
   margin-bottom: 10px;
-  /* border-top: 1px solid rgba(0, 0, 0, 0.373); */
+  margin-inline: auto;
   flex-wrap: wrap;
 }
 
@@ -151,22 +163,25 @@
 .emoji__icon:hover {
   opacity: 60%;
   cursor: pointer;
+  padding-top: auto;
 }
 
 .post__input {
   border: none;
   flex: 1;
   padding: 10px;
+  padding-bottom: 7px;
+  padding-top: 7px;
   font-size: 16px;
-  background-color: rgb(145, 237, 203);
+  box-shadow: none;
 }
 
 .post__button {
   flex: 0;
   border: none;
-
+  margin-right: 2px;
   color: #0a66c2;
-  /* color: #6082a3; */
+  margin-top: 3px;
   cursor: pointer;
   background: transparent;
 }

diff --git a/src/components/Post/index.jsx b/src/components/Post/index.jsx
@@ -60,7 +60,7 @@ function Post(prop) {
             snapshot.docs.map((doc) => ({
               id: doc.id,
               content: doc.data(),
-            })),
+            }))
           );
         });
     }
@@ -176,7 +176,10 @@ function Post(prop) {
   return (
     <div
       className={`${rowMode ? "post" : "postColumn"}`}
-      style={{ boxShadow: "var(--post-box-shadow)" }}
+      style={{
+        boxShadow:
+          "rgba(144, 93, 185, 0.8) 0px 3px 6px, rgba(144, 93, 185, 0.8) 0px 3px 6px",
+      }}
     >
       <ErrorBoundary>
         <PostHeader
@@ -200,18 +203,23 @@ function Post(prop) {
         </ErrorBoundary>
         <Divider />
         <Flexbetween>
-          <Typography marginLeft={1} fontSize={13} sx={{ color: "skyblue" }}>
+          <Typography
+            marginLeft={1}
+            fontSize={13}
+            padding={1}
+            sx={{ color: "grey" }}
+          >
             {likesNo} {likesNo > 1 ? "Likes" : "Like"}
           </Typography>
           <Typography
-            sx={{ color: "skyblue", cursor: "pointer" }}
+            sx={{ color: "grey", cursor: "pointer" }}
             fontSize={13}
+            paddingRight={1}
             onClick={() => setisCommentOpen((prev) => !prev)}
           >
             {comments.length} {comments.length > 1 ? "comments" : "comment"}
           </Typography>
         </Flexbetween>
-        <Divider />
 
         {user && (
           <form className="post__commentBox">

diff --git a/src/components/ReadMore/index.css b/src/components/ReadMore/index.css
@@ -7,3 +7,5 @@
 .read__more__less:hover {
   color: rgb(6, 33, 115);
 }
+
+
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(),
-            })),
+            }))
           );
         });
     }
@@ -249,6 +249,7 @@ const PostCommentView = ({
               subheader={time}
             />
           </ErrorBoundary>
+          {/* caption box */}
           {postHasImages && caption ? (
             <ErrorBoundary>
               <PostCaption>
@@ -259,6 +260,8 @@ const PostCommentView = ({
             </ErrorBoundary>
           ) : null}
         </PostGridItem>
+
+        {/* post/ like ...  box */}
         <PostGridItem postActions>
           <ErrorBoundary>
             <PostDetails
@@ -276,6 +279,8 @@ const PostCommentView = ({
             />
           </ErrorBoundary>
         </PostGridItem>
+
+        {/* Comment box  */}
         <PostGridItem isComments={comments?.length > 0}>
           <CommentForm>
             <ClickAwayListener onClickAway={() => setShowEmojis(false)}>
@@ -309,14 +314,13 @@ const PostCommentView = ({
               placeholder={
                 comments?.length !== 0
                   ? "Add a comment..."
-                  : "Be the first one to comment..."
+                  : "Be the first one to comment ..."
               }
               ref={commentRef}
               maxLength="150"
               style={{
-                backgroundColor: "var(--bg-color)",
                 color: "var(--color)",
-                borderRadius: "22px",
+                borderRadius: "16px",
                 margin: "4px 0px",
               }}
             />