Merge pull request #37 from najeebkp/master

narayan954 · Oct 2, 2022 · c839473 · c839473
2 parents efb36ed + 8d0df6d
commit c839473
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.10.7",
     "@mui/styles": "^5.10.7",
     "firebase": "^9.9.3",

diff --git a/src/components/Post.jsx b/src/components/Post.jsx
@@ -1,5 +1,11 @@
 import React, { useEffect } from "react";
 import Avatar from "@mui/material/Avatar";
+import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
+import SendOutlinedIcon from "@mui/icons-material/SendOutlined";
+import ModeCommentOutlinedIcon from "@mui/icons-material/ModeCommentOutlined";
+import SentimentSatisfiedAltOutlinedIcon from "@mui/icons-material/SentimentSatisfiedAltOutlined";
+import MoreHorizOutlinedIcon from "@mui/icons-material/MoreHorizOutlined";
+import BookmarkBorderOutlinedIcon from "@mui/icons-material/BookmarkBorderOutlined";
 import { db } from "../lib/firebase";
 import firebase from "firebase/compat/app";
 
@@ -18,7 +24,7 @@ function Post(prop) {
         .orderBy("timestamp", "desc")
         .onSnapshot((snapshot) => {
           setComments(
-            snapshot.docs.map((doc) => ({ id: doc.id, content: doc.data() }))
+            snapshot.docs.map((doc) => ({ id: doc.id, content: doc.data() })),
           );
         });
     }
@@ -40,44 +46,57 @@ function Post(prop) {
   return (
     <div className="post">
       <div className="post__header">
-        <Avatar className="post__avatar" alt={username} src={avatar} sx={{ bgcolor: 'Orange' }}/>
+        <Avatar
+          className="post__avatar"
+          alt={username}
+          src={avatar}
+          sx={{ bgcolor: "Orange" }}
+        />
         <h3 className="post__username">{username}</h3>
+        <div className="social__icon__last">
+          <MoreHorizOutlinedIcon />
+        </div>
       </div>
 
       <div className="post__container">
-        {
-          imageUrl !=="" ?
-          <>
-          <img className="post__img" src={imageUrl} alt="random sq" />
-
-          <h4 className="post__text">
-            <strong>{username} </strong>
-            {caption}
-          </h4></> :
-           <h4 className="post__text">
-
-           {caption}
-         </h4>
-
-        }
-        {/* <img className="post__img" src={imageUrl} alt="random sq" />
-
-        <h4 className="post__text">
-          <strong>{username} </strong>
-          {caption}
-        </h4> */}
+        <img className="post__img" src={imageUrl} alt="random sq" />
+        <div className="social__icons__wrapper">
+          <div className="social__icon">
+            <FavoriteBorderIcon />
+          </div>
+          <div className="social__icon">
+            <ModeCommentOutlinedIcon />
+          </div>
+          <div className="social__icon">
+            <SendOutlinedIcon />
+          </div>
+          <div className="social__icon__last">
+            <BookmarkBorderOutlinedIcon />
+          </div>
+        </div>
+        <div className="post__text">
+          {caption && (
+            <>
+              <strong>{username} </strong>
+              {caption}
+            </>
+          )}
+        </div>
 
         <div className="post__comments">
           {comments.map((userComment) => (
             <p key={userComment.id}>
-              <strong>{userComment.content.username}</strong>
+              <strong>{userComment.content.username}</strong>{" "}
               {userComment.content.text}
             </p>
           ))}
         </div>
 
         {user && (
           <form className="post__commentBox">
+            <div className="social__icon">
+              <SentimentSatisfiedAltOutlinedIcon />
+            </div>
             <input
               className="post__input"
               type="text"

diff --git a/src/index.css b/src/index.css
@@ -34,6 +34,7 @@
 .post {
   max-width: 400px;
   border: 1px solid lightgrey;
+  border-radius: 5px;
   margin-bottom: 20px;
   word-wrap: break-word;
 }
@@ -42,54 +43,72 @@
   width: 100%;
   object-fit: contain;
   border-top: 1px solid lightgrey;
-  border-bottom: 1px solid lightgrey;
+  border-bottom: 1px solid rgba(211, 211, 211, 0.281);
 }
 
 .post__text {
   font-weight: normal;
-  padding: 10px;
+  padding: 5px 15px;
+  font-size: 15px;
+  text-align: left;
+}
+.post__username {
+  font-size: 14px;
+  font-weight: 600;
 }
 
 .post__header {
   display: flex;
   align-items: center;
   padding: 10px;
 }
-
+.social__icons__wrapper {
+  display: flex;
+  align-items: center;
+}
+.social__icon {
+  padding: 10px;
+}
+.social__icon__last {
+  padding: 10px;
+  margin-left: auto !important;
+}
 .post__avatar {
   margin-right: 10px;
   border-radius: 50%;
-  width: 30px;
-  height: 30px;
+  width: 30px !important;
+  height: 30px !important;
   object-fit: contain;
 }
 
 .post__commentBox {
   display: flex;
   margin-top: 10px;
+  border-top: 1px solid lightgrey;
 }
 
 .post__input {
   border: none;
   flex: 1;
   padding: 10px;
-  border-top: 1px solid lightgrey;
 }
 
 .post__button {
   flex: 0;
   border: none;
-  border-top: 1px solid lightgrey;
+
   color: #0a66c2;
   /* color: #6082a3; */
   cursor: pointer;
+  background: transparent;
 }
 
 .post__comments {
-  padding: 5px;
+  padding: 0 15px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  font-size: 15px;
 }
 
 /* signup modal */