Skip to content

changed Job Description & Apply Form pages design #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MahrukhRaheel wants to merge 1 commit into
base: main
Choose a base branch
from
Open

changed Job Description & Apply Form pages design #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions jobboard-sanity/schemaTypes/job.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,14 @@ export default {
maxLength: 96,
},
},
{
name: "postedDate",
title: "Date Posted",
type: "date",
options: {
dateFormat: "YYYY-MM-DD",
},
},
{
name: 'summary',
title: 'Summary',
Expand Down
48 changes: 34 additions & 14 deletions src/pages/Apply.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useParams } from "react-router-dom";
import { useState } from "react";
import { useParams, Link } from "react-router-dom";
import { useState, useEffect } from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import { createClient } from '@supabase/supabase-js'
Expand All @@ -22,6 +22,12 @@ const Apply = () => {
resume: null,
});

const [jobTitle, setJobTitle] = useState("");

useEffect(() => {
setJobTitle(slug.replace(/-/g, " "));
}, [slug]);

const requirePermitExpiry = ["Work Permit", "Study Permit"].includes(formData.immigrationStatus);

const handleChange = (e) => {
Expand Down Expand Up @@ -80,8 +86,21 @@ const Apply = () => {
};

return (
<div className="container w-[40%] mt-10 mx-auto p-6 leading-loose">
<h1 className="text-2xl font-bold mb-4">Apply for {slug.replace(/-/g, " ")}</h1>
<div className="w-full">
<div className="bg-gray-300 w-full py-12">
<div className="max-w-4xl mx-auto px-16">
<h1 className="text-4xl font-bold">Apply For</h1>
<Link
to={`/careers/${slug}`}
className="text-red-500 text-2xl font-semibold hover:underline flex items-center mt-5"
>
💼 {jobTitle.charAt(0).toUpperCase() + jobTitle.slice(1)}
</Link>
</div>
</div>

{/* Application Form */}
<div className="container w-[90%] md:w-[45%] mt-4 mx-auto p-6 leading-loose">
<form id="application-form" onSubmit={handleSubmit} className="space-y-4">
<label className="block">Name</label>
<input
Expand All @@ -90,7 +109,7 @@ const Apply = () => {
placeholder="Enter Full Name"
required
onChange={handleChange}
className="w-full p-2 border rounded-md"
className="w-full p-2 border border-gray-400 rounded-md"
/>

<label className="block">Email</label>
Expand All @@ -100,7 +119,7 @@ const Apply = () => {
placeholder="Enter Email address"
required
onChange={handleChange}
className="w-full p-2 border rounded-md"
className="w-full p-2 border border-gray-400 rounded-md"
/>

<label className="block">Phone</label>
Expand All @@ -109,8 +128,8 @@ const Apply = () => {
enableSearch={true}
value={formData.phone}
onChange={handlePhoneChange}
inputClass="w-full p-2 border rounded-md"
containerClass="w-full"
inputClass="w-full p-2 border rounded-md border-gray-400"
containerClass="w-[250px] md:w-full"
/>

<label className="block">Address</label>
Expand All @@ -120,15 +139,15 @@ const Apply = () => {
placeholder="Address"
required
onChange={handleChange}
className="w-full p-2 border rounded-md"
className="w-full p-2 border border-gray-400 rounded-md"
/>

<label className="block">Are you willing to relocate?</label>
<select
name="relocation"
required
onChange={handleChange}
className="w-full p-2 border rounded-md"
className="w-full p-2 border border-gray-400 rounded-md"
>
<option value="">Select</option>
<option value="Yes">Yes</option>
Expand All @@ -142,7 +161,7 @@ const Apply = () => {
placeholder="Preferred Start Date"
required
onChange={handleChange}
className="w-full p-2 border rounded-md"
className="w-full p-2 border-gray-400 rounded-md"
/>

<label className="block">Immigration Status</label>
Expand All @@ -152,7 +171,7 @@ const Apply = () => {
placeholder="Immigration Status"
required
onChange={handleChange}
className="w-full p-2 border rounded-md"
className="w-full p-2 border border-gray-400 rounded-md"
>
<option value="">Select</option>
<option value="Citizen">Citizen</option>
Expand All @@ -169,7 +188,7 @@ const Apply = () => {
placeholder="Work Permit Expiry (if applicable)"
onChange={handleChange}
required
className={"w-full p-2 border rounded-md" + (!requirePermitExpiry ? "bg-gray-400" : "")}
className={"w-full p-2 border border-gray-400 rounded-md" + (!requirePermitExpiry ? "bg-gray-400" : "")}
disabled={!requirePermitExpiry}
/>

Expand All @@ -179,7 +198,7 @@ const Apply = () => {
accept=".pdf,.doc,.docx"
required
onChange={handleFileChange}
className="w-full p-2 border rounded-md"
className="w-full p-2 border border-gray-400 rounded-md"
/>

<button
Expand All @@ -190,6 +209,7 @@ const Apply = () => {
</button>
</form>
</div>
</div>
);
};

Expand Down
33 changes: 20 additions & 13 deletions src/pages/JobDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,24 +27,31 @@ const JobDetails = () => {
}

return (
<div className="container w-[70%] mt-10 mx-auto p-6 leading-loose">
{/* Back to Open Positions & Apply Now Button */}
<div className="flex justify-between items-center mb-8">
<Link to="/careers" className="text-red-500 font-semibold inline-flex items-center">
← Back to Open Positions
</Link>
<Link to={`/careers/${slug}/apply`} className="bg-red-500 text-white px-4 py-2 rounded-md font-semibold hover:bg-red-600">
Apply Now
</Link>
<div className="w-full">
<div className="bg-gray-300 py-12">
<div className="container mx-auto flex flex-col md:flex-row justify-between items-start md:items-center px-6 w-[70%]">
<div>
<h1 className="text-4xl font-bold">{job.title}</h1>
{job.postedDate && (
<p className="text-gray-700 text-m mt-2 md:mt-4">Date Posted: {new Date(job.postedDate).toDateString()}</p>
)}
</div>
<Link to={`/careers/${slug}/apply`} className="bg-red-500 mt-4 md:mt-0 text-white px-6 py-3 rounded-md font-semibold hover:bg-red-600">
Apply Now
</Link>
</div>
</div>

<h1 className="text-3xl font-bold">{job.title}</h1>

<div className="mt-6 text-gray-700 leading-7">
<div className="container w-[70%] mx-auto p-6 text-gray-700 leading-7">
<PortableText
value={job.description}
components={components}
/>
/>{/* Back to Open Positions */}
<div className="mt-10 text-center">
<Link to="/careers" className="text-red-500 font-semibold hover:underline">
← Back to Open Positions
</Link>
</div>
</div>
</div>
);
Expand Down