css fixes for job post single pages

client/src/App.jsx

@@ -129,6 +129,7 @@ function App() {
   const THEME = createTheme({
     typography: {
       fontFamily: `"Inter"`,
+      "fontWeightBold": 600
     },
   });
 
@@ -153,11 +154,12 @@ function App() {
                 element={<JobPostingsClientDashboard />}
               />
             </Route>
-            <Route
-              path="/job-postings/:jobPostingId"
-              element={<ViewJobPosting />}
-            />
-
+            <Route element={<PublicNavbar />}>
+              <Route
+                path="/job-postings/:jobPostingId"
+                element={<ViewJobPosting />}
+              />
+            </Route>
             <Route
               path="/signin"
               element={

client/src/components/job-application-component/index.jsx

@@ -73,6 +73,7 @@ function JobApplicationComponent({
           display: "flex",
           alignItems: "center",
           margin: "20px",
+          marginTop: "2rem"
         }}
       >
         <IconButton onClick={() => navigate("/job-applications")}>
@@ -92,7 +93,7 @@ function JobApplicationComponent({
           flexDirection: "row",
           width: "98%",
           justifyContent: "space-between",
-          alignItems: "center",
+          alignItems: "flex-start",
         }}
       >
         <ApplicantInformationCard application={application} />

client/src/components/job-postings-dashboard-component/job-postings-dashboard-details/editJobPostForm.css

@@ -0,0 +1,4 @@
+.MuiTypography-root {
+    margin-bottom: auto !important;
+    /* line-height: 1.75 !important; */
+}

client/src/components/job-postings-dashboard-component/job-postings-dashboard-details/editJobPostForm.jsx

@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-unused-vars
 import * as React from "react";
+import "./editJobPostForm.css"
 import {
   Box,
   Typography,
@@ -101,6 +102,27 @@ function EditJobPostingFormComponent({
     setMaxCompensation(value);
   };
 
+  const formatSalaryRange = (min, max, rateOfPayFrequency) => {
+    // Convert to numbers
+    const minNum = Number(min);
+    const maxNum = Number(max);
+
+    switch (rateOfPayFrequency) {
+      case "Annually": {
+        const formattedMin = `${Math.floor(minNum / 1000)}K`;
+        const formattedMax = `${Math.floor(maxNum / 1000)}K`;
+
+        return `$${formattedMin} - $${formattedMax}/year`;
+      } case "Hourly": {
+        return `$${minNum} - $${maxNum}/hour`
+      } case "Weekly": {
+        return `$${minNum} - $${maxNum}/week`
+      }
+      default:
+        return `$${minNum} - $${maxNum} ${rateOfPayFrequency}`;
+    }
+  };
+
   const renderViewValue = (
     typeValue,
     value,
@@ -109,6 +131,7 @@ function EditJobPostingFormComponent({
     forceError = false,
   ) => {
     if (value !== undefined && value !== null && !forceError) {
+      console.log(typeValue, value)
       return (
         <Typography variant="body1" gutterBottom>
           {prefix}
@@ -135,23 +158,6 @@ function EditJobPostingFormComponent({
     setFormSubmissionErrorDialog(false);
   };
 
-  const formatSalaryRange = (min, max, rateOfPayFrequency) => {
-    // Convert to numbers
-    const minNum = Number(min);
-    const maxNum = Number(max);
-
-    switch (rateOfPayFrequency) {
-      case "Annually": {
-        const formattedMin = `${Math.floor(minNum / 1000)}K`;
-        const formattedMax = `${Math.floor(maxNum / 1000)}K`;
-
-        return `$${formattedMin}/year - $${formattedMax}/year`;
-      }
-      default:
-        return `$${minNum} - $${maxNum} ${rateOfPayFrequency}`;
-    }
-  };
-
   const handleSubmit = async (event) => {
     event.preventDefault();
     setIsLoading(true);
@@ -196,10 +202,10 @@ function EditJobPostingFormComponent({
         sx={{
           width: "90%",
           borderRadius: 2,
-          boxShadow: 3,
+          boxShadow: 1,
           ml: 9,
           mb: 2,
-          border: "1px solid #e0e0e0",
+          border: "0.5px solid #e0e0e0",
         }}
       >
         <form onSubmit={commitEdit}>
@@ -223,7 +229,7 @@ function EditJobPostingFormComponent({
             </IconButton>
           </HeaderContainer>
           <Divider sx={{ m: 2, borderBottomWidth: 2.5 }} />
-          <Stack spacing={2} sx={{ m: 2 }}>
+          <Stack spacing={1} sx={{ m: 2 }}>
             <Grid container alignItems="center">
               <Grid item xs={3}>
                 <Typography sx={{ ml: 2 }} variant="subtitle1" align="left">
@@ -302,7 +308,7 @@ function EditJobPostingFormComponent({
 
               {isEditMode ? (
                 <>
-                  <Grid item sx={{ width: "37%", marginRight: 1 }}>
+                  <Grid item sx={{ width: "36%", marginRight: 1 }}>
                     <FormControl fullWidth>
                       <InputLabel id={`minCompensationLabel-${jobPost.id}`}>
                         Minimum Compensation
@@ -329,7 +335,8 @@ function EditJobPostingFormComponent({
                       />
                     </FormControl>
                   </Grid>
-                  <Grid item sx={{ width: "37%" }}>
+                  <Grid item sx={{ width: "1%" }}/>
+                  <Grid item sx={{ width: "36%" }}>
                     <FormControl fullWidth>
                       <InputLabel id={`minCompensationLabel-${jobPost.id}`}>
                         Maximum Compensation
@@ -405,7 +412,7 @@ function EditJobPostingFormComponent({
                     </Select>
                   </FormControl>
                 ) : (
-                  renderViewValue("Job Type", employmentType)
+                  renderViewValue("Job Type", employmentType.join(", "))
                 )}
               </Grid>
             </Grid>
@@ -572,7 +579,7 @@ EditJobPostingFormComponent.propTypes = {
   jobPost: JobLeadType.isRequired,
   setJobPost: PropTypes.func.isRequired,
   setSnackBarMessage: PropTypes.func.isRequired,
-  isEditMode: PropTypes.func.isRequired,
+  isEditMode: PropTypes.bool.isRequired,
   setIsEditMode: PropTypes.func.isRequired,
   // eslint-disable-next-line
 };

client/src/components/job-postings-dashboard-component/job-postings-dashboard-details/index.jsx

@@ -49,9 +49,12 @@ function JobDetails({ setJobPostData, setSnackBarMessage }) {
 
   return (
     <JobPostContainer maxWidth="lg" sx={{ mt: 4 }}>
-      <Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
-        <IconButton onClick={() => navigate("/all-job-postings")}>
-          <ArrowBack />
+      <Box sx={{ display: "flex", alignItems: "center", 
+        mb: "1.5rem",
+        mt: "1.5rem"
+        }}>
+        <IconButton onClick={() => navigate("/all-job-postings")} sx={{paddingLeft: "1rem", paddingRight:"0"}}>
+          <ArrowBack/>
         </IconButton>
         <Box sx={{ ml: 5 }}>
           <Typography variant="h4" fontWeight="bold" display="inline">
@@ -66,9 +69,13 @@ function JobDetails({ setJobPostData, setSnackBarMessage }) {
         </Box>
       </Box>
 
-      <Grid container spacing={4}>
+      <Grid container spacing={2} sx={{
+        width:"96%", 
+        justifyContent: "center",
+        alignContent: "flex-start",
+        }}>
         {/* Job Details Section */}
-        <Grid item xs={12} md={7}>
+        <Grid item xs={12} md={6}>
           <EditJobPostingFormComponent
             jobPost={jobPostData}
             setJobPost={setLocalJobPostData}
@@ -79,8 +86,8 @@ function JobDetails({ setJobPostData, setSnackBarMessage }) {
         </Grid>
 
         {/* Application Form Section */}
-        <Grid item xs={12} md={5}>
-          <Paper elevation={3} sx={{ p: 3, borderRadius: 2 }}>
+        <Grid item xs={12} md={6}>
+          <Paper elevation={1} sx={{ p: 3, borderRadius: 2 }}>
             <Typography
               color="#9E9E9E"
               gutterBottom

client/src/pages/view-job-post/index.css

@@ -0,0 +1,3 @@
+.MuiInputBase-root {
+    border-radius: 8px !important;
+}

client/src/pages/view-job-post/index.jsx

@@ -1,13 +1,15 @@
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable no-nested-ternary */
 import { useRef, useEffect, useState } from "react";
+import './index.css';
 import PropTypes from "prop-types";
 import { useParams } from "react-router-dom";
 import { useDropzone } from "react-dropzone";
 import UploadFileIcon from "@mui/icons-material/UploadFile";
 import DeleteIcon from "@mui/icons-material/Delete";
 import CheckIcon from "@mui/icons-material/Check";
 import ErrorIcon from "@mui/icons-material/Error";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import ReCAPTCHA from "react-google-recaptcha";
 import {
   Box,
@@ -35,6 +37,7 @@ import { uploadJobApplication } from "../../utils/job_applications_api";
 import { getOneActiveJobPost } from "../../utils/job_posts_api";
 import FormSubmissionErrorDialog from "../../components/shared/form-submission-error-dialog";
 import { formatLongDate } from "../../utils/date";
+import { MainContainer } from "./index.styles";
 import SuccessfulFormSubmissionDialog from "../../components/shared/successful-submission-dialog";
 
 const StyledPaper = styled(Paper)(({ theme }) => ({
@@ -43,10 +46,12 @@ const StyledPaper = styled(Paper)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
 }));
 
-const StyledContainer = styled(Container)(({ theme }) => ({
-  paddingTop: theme.spacing(4),
-  paddingBottom: theme.spacing(4),
-}));
+// const StyledContainer = styled(Container)(({ theme }) => ({
+//   paddingTop: theme.spacing(4),
+//   paddingBottom: theme.spacing(4),
+//   marginLeft: theme.spacing(10)
+//   // marginLeft: theme.spacing(15),
+// }));
 
 function CustomDialog({ open, onClose, title, message }) {
   return (
@@ -319,7 +324,11 @@ function JobPostingPage() {
         const formattedMin = `${Math.floor(minNum / 1000)}K`;
         const formattedMax = `${Math.floor(maxNum / 1000)}K`;
 
-        return `$${formattedMin}/year - $${formattedMax}/year`;
+        return `$${formattedMin} - $${formattedMax}/year`;
+      } case "Hourly": {
+        return `$${minNum} - $${maxNum}/hour`
+      } case "Weekly": {
+        return `$${minNum} - $${maxNum}/week`
       }
       default:
         return `$${minNum} - $${maxNum} ${rateOfPayFrequency}`;
@@ -373,35 +382,23 @@ function JobPostingPage() {
   };
 
   return (
-    <StyledContainer>
+    <MainContainer>
       {/* Top Section with Job Title and Company */}
       <Box
         sx={{
           display: "flex",
           alignItems: "center",
-          marginBottom: 2,
+          marginBottom: "2rem",
           backgroundColor: "#fff",
+          width: "80%",
         }}
       >
         <IconButton
-          sx={{ marginRight: 1 }} // Reduced margin
+          sx={{ marginRight: "2rem",
+            marginLeft: "2rem" }} // Reduced margin
           onClick={() => window.history.back()}
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            width="20" // Reduced icon size
-            height="20"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M15 19l-7-7 7-7"
-            />
-          </svg>
+          <ArrowBackIcon />
         </IconButton>
 
         <Box>
@@ -418,8 +415,13 @@ function JobPostingPage() {
       </Box>
 
       {/* Main Content */}
-      <Grid container spacing={2}>
-        <Grid item xs={12} md={5}>
+      <Grid container spacing={2} 
+        sx={{
+          justifyContent: "center",
+          width: "90%",
+          mx: 'auto'
+        }}>
+        <Grid item xs={12} md={6}>
           <StyledPaper elevation={1}>
             {/* Information Header (Slightly Bigger but Compact) */}
             <Typography variant="h5" sx={{ flexGrow: 1 }}>
@@ -440,7 +442,7 @@ function JobPostingPage() {
                     jobPosting.rateOfPayFrequency,
                   ),
                 },
-                { label: "Job Type", value: jobPosting.jobType },
+                { label: "Job Type", value: jobPosting.jobType.join(", ") },
                 {
                   label: "Hours per Week",
                   value: `${jobPosting.hoursPerWeek} hours`,
@@ -454,7 +456,7 @@ function JobPostingPage() {
                   key={item.label}
                   sx={{
                     display: "grid",
-                    gridTemplateColumns: "1fr 1.2fr", // Slightly more compact column sizing
+                    gridTemplateColumns: "1fr 2fr", // Slightly more compact column sizing
                     alignItems: "center",
                     py: 1.2, // Reduced padding for compact layout
                     borderBottom: index < 6 ? "1px solid #E0E0E0" : "none",
@@ -532,7 +534,7 @@ function JobPostingPage() {
         </Grid>
 
         {/* Right Section */}
-        <Grid item xs={12} md={7}>
+        <Grid item xs={12} md={6}>
           {" "}
           {/* Reduced width from md={7} to md={6.5} */}
           <StyledPaper elevation={1} sx={{ p: 2.5 }}>
@@ -817,7 +819,7 @@ function JobPostingPage() {
         open={isSuccessDialog}
         onBack={() => setIsSuccessDialog(false)}
       />
-    </StyledContainer>
+    </MainContainer>
   );
 }
 

client/src/pages/view-job-post/index.styles.jsx

@@ -0,0 +1,17 @@
+import { Box } from "@mui/material";
+
+import styled from "styled-components";
+
+const MainContainer = styled.div`
+  width: 100%; 
+  margin-top: 2rem;
+  justify-content: center;
+`;
+
+const Divider = styled(Box)`
+  border-bottom: 1px solid #0000001f;
+  border-color: divider;
+  margin-bottom: 10px;
+`;
+
+export { Divider, MainContainer };