fix

frontend/src/Screens/Authentication/Register.jsx

@@ -13,8 +13,7 @@ export const Register = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [passwordValid, setPasswordValid] = useState(false);
-  const [showPasswordRequirements, setShowPasswordRequirements] =
-    useState(false);
+  const [passwordInputFocused, setPasswordInputFocused] = useState(false);
   const [latitude, setLatitude] = useState("");
   const [longitude, setLongitude] = useState("");
   const [city, setCity] = useState("");
@@ -32,12 +31,12 @@ export const Register = () => {
     const passwordValue = e.target.value;
     setPassword(passwordValue);
     setPasswordValid(passwordRegex.test(passwordValue));
-  };
-  const showPasswordRequirementsPopup = () => {
-    setShowPasswordRequirements(true);
-    setTimeout(() => {
-      setShowPasswordRequirements(false);
-    }, 3000);
+
+    if (e.type === "focus") {
+      setPasswordInputFocused(true);
+    } else if (e.type === "blur") {
+      setPasswordInputFocused(false);
+    }
   };
   const { coords, isGeolocationAvailable, isGeolocationEnabled } =
     useGeolocated({
@@ -278,23 +277,23 @@ export const Register = () => {
                 id="password"
                 value={password}
                 onChange={handlePasswordChange}
-                onFocus={showPasswordRequirementsPopup}
+                onFocus={(e) => handlePasswordChange(e)}
+                onBlur={(e) => handlePasswordChange(e)}
                 className={`textfield ${
-                  passwordValid
-                    ? "border-solid border-2 border-green-600"
-                    : "border-solid border-2 border-red-600"
-                }`}
+    password.length !==0 &&
+    (passwordValid
+      ? "border-solid border-2 border-green-600"
+      : "border-solid border-2 border-red-600")
+  }`}
                 placeholder="Your password here ..."
                 required
               />
-              <div
-                className={`password-requirements-popup ${
-                  showPasswordRequirements ? "show" : ""
-                }`}
-              >
-                At least 8 characters, one uppercase letter, one lowercase
-                letter, one digit, and one special character
-              </div>
+              {passwordInputFocused && (
+                <div className="password-requirements">
+                  At least 8 characters, one uppercase letter, one lowercase
+                  letter, one digit, and one special character
+                </div>
+              )}
             </div>
             {/* list of locality */}
             {/* {addressList &&

frontend/src/Screens/OtherProfile.jsx

@@ -55,7 +55,7 @@ function OtherProfile() {
                     src={
                       otherProfile.avatar
                         ? `http://localhost:8080/users-images/${otherProfile.avatar}`
-                        : "https://source.unsplash.com/random"
+                        : "http://localhost:8080/users-images/no-image.jpg"
                     }
                     alt={otherProfile.name}
                     className="h-full w-full object-cover"
@@ -111,22 +111,22 @@ export default OtherProfile;
 function PostCard({ postData }) {
   return (
     <div className="bg-white border rounded-xl">
-      <div className="w-full h-[200px] bg-gray-100 mb-2">
-        <img
-          src={
-            postData.image !== ""
-              ? `http://localhost:8080/post-images/${postData.image}`
-              : "https://source.unsplash.com/random"
-          }
-          alt="post-index"
-          className="object-contain h-full w-full"
-        />
-      </div>
+      {postData.image !== "" ? (
+        <div className="w-full rounded-t-xl bg-gray-100 mb-2 overflow-hidden">
+          <img
+            src={`http://localhost:8080/post-images/${postData.image}`}
+            alt="post-index"
+            className="object-contain h-full w-full"
+          />
+        </div>
+      ) : (
+        <></>
+      )}
 
       <div className="p-2">
         <h2 className="font-bold text-gray-700 mb-2">{postData.title}</h2>
 
-        <p className="line-clamp-3">{postData.content}</p>
+        <p className="line-clamp-5">{postData.content}</p>
 
         <div className="flex items-center gap-5 mt-2">
           <button className="flex items-center mt-2 gap-2 hover:bg-gray-200 rounded-full px-2">

frontend/src/Screens/Profile.jsx

@@ -158,7 +158,7 @@ function Profile() {
                     src={
                       profileUser.avatar
                         ? `http://localhost:8080/users-images/${profileUser.avatar}`
-                        : "https://source.unsplash.com/random"
+                        : "no-image.jpg"
                     }
                     alt={profileUser.name}
                     className="h-full w-full object-cover"

frontend/src/components/CommentComponent.jsx

@@ -57,6 +57,7 @@ export const CommentComponent = ({ postID, userID }) => {
                   replies={replyComments(commentData._id)}
                   userID={userID}
                   postID={postID}
+                  setComments={setComments}
                 />
               </div>
             );

frontend/src/components/CommentTile.jsx

@@ -3,7 +3,7 @@ import { SendIcon } from "./Icons";
 import axios from "axios";
 import { Context } from "../context/ContextProvider";
 
-function CommentTile({ commentData, replies, userID, postID }) {
+function CommentTile({ commentData, replies, userID, postID,setComments }) {
   const [newReply, setNewReply] = useState("");
   const [likeComment, setLikeComment] = useState(false);
   const [incomingReplies, setIncomingReplies] = useState(replies);

frontend/src/components/Navbar.jsx

@@ -44,6 +44,7 @@ export default function Navbar() {
               <NavLink to="/profile" className="navLink">
                 My Profile
               </NavLink>
+
               <NavLink to="/about" className="navLink">
                 About Us
               </NavLink>

frontend/src/components/PostComponent.jsx

@@ -143,7 +143,7 @@ export const PostComponent = ({
               showPostMenu ? "opacity-100" : "opacity-0 pointer-events-none"
             } absolute shadow-lg py-2 bg-white rounded-lg w-[100px] transition-opacity duration-300 right-1`}
           >
-            <button
+            {/* <button
               onClick={() => {
                 setShowPostMenu(false);
               }}
@@ -152,7 +152,7 @@ export const PostComponent = ({
             >
               <EditIcon size="h-4 w-4" />
               Edit
-            </button>
+            </button> */}
             <button
               type="button"
               className="w-full hover:bg-gray-100 p-2 flex items-center gap-2 text-sm font-medium"

frontend/src/index.css

@@ -40,20 +40,8 @@
 .circleAvatar {
   @apply h-10 w-10 rounded-full overflow-hidden;
 }
-
-.password-requirements-popup {
-  position: absolute;
-  top: 348px;
-  left: 49%;
-  transform: translateX(3%);
-  background-color: #333;
-  color: #fff;
-  padding: 10px;
-  border-radius: 5px;
-  opacity: 0;
-  transition: opacity 0.3s ease-in-out;
-}
-
-.password-requirements-popup.show {
-  opacity: 1;
-}
+.password-requirements {
+  color: #666;
+  font-size: 0.8rem;
+  margin-top: 0.5rem;
+}