Enhanced Homepage UI: Modernization, Beautification, and Responsiveness

frontend/src/Jobs/FormById.js

@@ -83,16 +83,16 @@ const FormById = () => {
   };
 
   return (
-    <div className={styles.formbyidPage}>
-      <div className={styles.avatarSection}>
+    <div className={styles.formbyidPage} id="job-container">
+      <div className={styles.avatarSection} id="job-details">
         <img
           className={styles.avatar}
           src={avatarUrl}
           alt={jobForm.ownerProfile.name}
         />
         <span className={styles.ownerName}>{jobForm.ownerProfile.name}</span>
 
-        <div className={styles.ownerEmail}>
+        <div className={styles.ownerEmail} >
           Email:
           <span className={styles.ownerEmailText}>
             {" "}
@@ -156,15 +156,17 @@ const FormById = () => {
             />
           </div>
         )}
-        <div className={styles.jobDescription}>
+        <div className={styles.jobDescription} id="job-description">
           <text className={styles.jobDescHeading}>Job Description: </text>
           <textarea className={styles.jobDescTexts} readOnly>
             {jobForm.jobDescription}
           </textarea>
         </div>
-        <button className={styles.applyButton} onClick={handleApplyForJob}>
+        {/* <div> */}
+        <button className={styles.applyButton} onClick={handleApplyForJob} id="change-btn">
           Apply
         </button>
+        {/* </div> */}
       </div>
       <div className={styles.applicantsSection}>
         <h2>Applicants</h2>

frontend/src/shared/components/AllPosts.js

@@ -56,27 +56,27 @@ const AllPost = () => {
                                 <Avatar
                                     src={post.author.avatar.filePath}
                                     alt={post.author.name}
-                                    sx={{ width: 56, height: 56 }}
+                                    sx={{ width: 56, height: 56 }} // Make sure this is consistent with CSS
                                 />
                                 <div className="username">
-                                    <Typography variant="subtitle1">{post.author.name}</Typography>
+                                    <Typography variant="subtitle1" className="post-owner-username">{post.author.name}</Typography>
                                 </div>
                                 <DropdownMenu postId={post._id} userEmail={post.author.email} />
                             </div>
                             <div className="post-content">
                                 <Typography variant="body1">{post.text}</Typography>
                             </div>
-                            <Box sx={{ display: 'flex', alignItems: 'center', mt: 1 }}>
-                                <IconButton onClick={() => handleToggleLike(post._id)}>
-                                    <ThumbUpIcon color={likeMode[post._id] ? 'primary' : 'action'} />
+                            <Box sx={{ display: 'flex', alignItems: 'center', mt: 1 }} className="post-actions">
+                                <IconButton onClick={() => handleToggleLike(post._id)} className="like-button">
+                                    <ThumbUpIcon  />
                                 </IconButton>
                                 <Typography variant="body2" sx={{ ml: 1 }}>
                                     {likes[post._id] || 0}
                                 </Typography>
-                                <IconButton onClick={() => handleToggleLike(post._id)}>
+                                <IconButton onClick={() => handleToggleLike(post._id)} className="dislike-button">
                                     <ThumbDownIcon />
                                 </IconButton>
-                                <IconButton onClick={() => handleToggleTextSection(post._id)}>
+                                <IconButton onClick={() => handleToggleTextSection(post._id)} className="comment-button">
                                     <ChatIcon />
                                 </IconButton>
                             </Box>

frontend/src/shared/components/homePage.js

@@ -10,6 +10,7 @@ import "../../styles/jobForms.css";
 import { useNavigate } from 'react-router-dom';
 import { fetchAllJobForms } from '../../store/slices/JobSlices';
 import AllPost from './AllPosts';
+
 const AllJobForms = () => {
     const dispatch = useDispatch();
     const allJobForms = useSelector((state) => state.jobs.allJobForms);
@@ -89,19 +90,17 @@ const AllJobForms = () => {
     );
 };
 
-
 const HomePage = () => {
     const [createPostButtonOn, setCreatePostButtonOn] = useState(false);
     const { userInfo } = useSelector((state) => state.auth);
     const navigate = useNavigate();
-
     const [showModal, setShowModal] = useState(false);
+
     const handleShowCreatePost = () => {
         if (!userInfo) {
             navigate("/login");
             return;
         }
-
         setShowModal(!showModal);
     };
 
@@ -126,5 +125,4 @@ const HomePage = () => {
     );
 };
 
-
 export default HomePage;

frontend/src/styles/formById.module.css

@@ -493,4 +493,37 @@
       right: 1rem;
       z-index: 100;
     }
-  }
+  }
+
+  #job-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+
+  #job-details {
+    width: 60%;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #job-description {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    max-height: 400px;
+  }
+
+  #apply-button {
+    position: sticky;
+    bottom: 0;
+    background: #fff;
+    text-align: center;
+    padding: 10px 0;
+    border-top: 1px solid #ddd;
+}

frontend/src/styles/homePage.module.css

@@ -1,59 +1,124 @@
-
-.HomePageContent{
-    overflow: auto; 
+.HomePageContent {
+    overflow: auto;
+    background-color: #121212;
+    color: #e0e0e0;
+    transition: background-color 0.5s ease;
 }
+
 .container {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     width: 100vw;
     height: 100vh;
     background-color: black;
+    transition: all 0.3s ease;
 }
 
 .leftColumn {
-    max-width: 20%;
-    min-width: 15%;
+    flex: 1;
     padding: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: black;
+    background-color: #181818;
     box-sizing: border-box;
+    transition: all 0.3s ease;
 }
 
 .profilePic {
     width: 100%;
-    max-width: 120px; /* Adjust based on your preference */
+    max-width: 120px;
     height: auto;
     border-radius: 50%;
     margin-bottom: 20px;
+    border: 3px solid #4a90e2;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.profilePic:hover {
+    transform: scale(1.1);
+    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6);
 }
 
 .createPostBtn {
-    background-color: #f5f5f5;
-    color: black;
+    background: linear-gradient(135deg, #4a90e2, #357ab8);
+    color: #fff;
+    border-radius: 25px;
     border: none;
     padding: 10px 20px;
-    border-radius: 5px;
     cursor: pointer;
     font-size: 16px;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    margin-top: 20px;
+}
+
+.createPostBtn:hover {
+    background: linear-gradient(135deg, #357ab8, #4a90e2);
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
+    transform: translateY(-5px);
+}
+
+.createPostBtn:active {
+    background: linear-gradient(135deg, #4a90e2, #357ab8);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    transform: translateY(1px);
 }
 
 .middleColumn {
-    flex: 1;
-    background-color: black;
+    flex: 3;
+    background-color: #1f1f1f;
     padding: 20px;
     overflow-y: auto;
     box-sizing: border-box;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    gap: 20px;
 }
 
-.rightColumn {
-    width: 30%;
+.post-card {
+    background-color: #2c2c2c;
     padding: 20px;
-    overflow-y: auto;
-    background-color: black;
-    box-sizing: border-box;
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    color: #e0e0e0;
+}
+
+.avatar-section {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-right: 15px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.owner-name {
+    font-weight: 600;
+    font-size: 18px;
+    color: #ffffff;
+    transition: color 0.3s ease;
+}
+
+.owner-name:hover {
+    color: #4a90e2;
+}
+
+.job-desc {
+    cursor: pointer;
+}
+
+.job-desc:hover {
+    background-color: #333;
+    transition: background-color 0.3s ease;
 }
 
 .middleColumn::-webkit-scrollbar {
@@ -66,5 +131,92 @@
 }
 
 .middleColumn::-webkit-scrollbar-track {
-    background: black;
+    background: #1f1f1f;
+}
+
+.rightColumn {
+    flex: 1.5;
+    padding: 20px;
+    overflow-y: auto;
+    background-color: #1e1e1e;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+    transition: all 0.5s ease;
+    box-sizing: border-box;
+}
+
+.post-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+    background-color: #333;
+}
+
+.post-title {
+    font-size: 22px;
+    font-weight: bold;
+    color: #ffffff;
+    margin-bottom: 10px;
+    transition: font-size 0.3s ease;
+}
+
+.post-title:hover {
+    font-size: 24px;
+}
+
+.post-description {
+    font-size: 16px;
+    color: #b0b0b0;
+    line-height: 1.6;
+    transition: color 0.3s ease;
+}
+
+.post-description:hover {
+    color: #ffffff;
+}
+
+.post-image {
+    width: 100%;
+    border-radius: 5px;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.post-image:hover {
+    opacity: 0.85;
+    transform: scale(1.05);
+}
+
+.post-tags {
+    margin-top: 15px;
+    display: flex;
+    gap: 10px;
+    transition: all 0.3s ease;
+}
+
+.post-tag {
+    background-color: #007bff;
+    padding: 5px 10px;
+    border-radius: 5px;
+    color: white;
+    font-size: 12px;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.post-tag:hover {
+    background-color: #0056b3;
+    transform: translateY(-3px);
+}
+
+@media (max-width: 768px) {
+    .container {
+        flex-direction: column;
+    }
+
+    .leftColumn, .rightColumn {
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .middleColumn {
+        width: 100%;
+        grid-template-columns: 1fr;
+    }
 }