Update src/app/post-job/page.tsx

src/app/post-job/page.tsx

@@ -4,9 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import FooterBase from "@/components/sections/footer/FooterBase";
 import { useState } from "react";
-import { Input } from "@/components/form/Input";
 import { Briefcase, Mail, CheckCircle, AlertCircle } from "lucide-react";
-import ButtonHoverBubble from "@/components/button/ButtonHoverBubble";
 
 const navItems = [
   { name: "Search Jobs", id: "/search" },
@@ -71,9 +69,9 @@ export default function PostJobPage() {
 
   const [errors, setErrors] = useState<FormErrors>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitStatus, setSubmitStatus] = useState<
-    "idle" | "success" | "error"
-  >("idle");
+  const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">(
+    "idle"
+  );
 
   const validateForm = (): boolean => {
     const newErrors: FormErrors = {};
@@ -96,7 +94,10 @@ export default function PostJobPage() {
     if (formData.requirements.trim().length < 10) {
       newErrors.requirements = "Requirements must be at least 10 characters";
     }
-    if (!formData.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+    if (
+      !formData.email.trim() ||
+      !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)
+    ) {
       newErrors.email = "Valid email is required";
     }
 
@@ -224,12 +225,15 @@ export default function PostJobPage() {
               <label htmlFor="jobTitle" className="block text-sm font-semibold mb-2">
                 Job Title <span className="text-red-500">*</span>
               </label>
-              <Input
+              <input
+                id="jobTitle"
+                type="text"
                 value={formData.jobTitle}
                 onChange={handleInputChange}
                 name="jobTitle"
                 placeholder="e.g., Senior React Developer"
                 required
+                className="w-full px-4 py-2 rounded-lg bg-secondary-button text-foreground border border-background-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
               />
               {errors.jobTitle && (
                 <p className="text-red-600 text-sm mt-1">{errors.jobTitle}</p>
@@ -241,12 +245,15 @@ export default function PostJobPage() {
               <label htmlFor="company" className="block text-sm font-semibold mb-2">
                 Company Name <span className="text-red-500">*</span>
               </label>
-              <Input
+              <input
+                id="company"
+                type="text"
                 value={formData.company}
                 onChange={handleInputChange}
                 name="company"
                 placeholder="Your company name"
                 required
+                className="w-full px-4 py-2 rounded-lg bg-secondary-button text-foreground border border-background-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
               />
               {errors.company && (
                 <p className="text-red-600 text-sm mt-1">{errors.company}</p>
@@ -259,12 +266,15 @@ export default function PostJobPage() {
                 <label htmlFor="location" className="block text-sm font-semibold mb-2">
                   Location <span className="text-red-500">*</span>
                 </label>
-                <Input
+                <input
+                  id="location"
+                  type="text"
                   value={formData.location}
                   onChange={handleInputChange}
                   name="location"
                   placeholder="e.g., Amsterdam, Remote"
                   required
+                  className="w-full px-4 py-2 rounded-lg bg-secondary-button text-foreground border border-background-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
                 />
                 {errors.location && (
                   <p className="text-red-600 text-sm mt-1">{errors.location}</p>
@@ -275,6 +285,7 @@ export default function PostJobPage() {
                   Job Type
                 </label>
                 <select
+                  id="jobType"
                   name="jobType"
                   value={formData.jobType}
                   onChange={handleInputChange}
@@ -293,12 +304,15 @@ export default function PostJobPage() {
               <label htmlFor="salary" className="block text-sm font-semibold mb-2">
                 Salary Range <span className="text-red-500">*</span>
               </label>
-              <Input
+              <input
+                id="salary"
+                type="text"
                 value={formData.salary}
                 onChange={handleInputChange}
                 name="salary"
                 placeholder="e.g., €50,000 - €70,000"
                 required
+                className="w-full px-4 py-2 rounded-lg bg-secondary-button text-foreground border border-background-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
               />
               {errors.salary && (
                 <p className="text-red-600 text-sm mt-1">{errors.salary}</p>
@@ -311,6 +325,7 @@ export default function PostJobPage() {
                 Job Description <span className="text-red-500">*</span>
               </label>
               <textarea
+                id="description"
                 name="description"
                 value={formData.description}
                 onChange={handleInputChange}
@@ -330,6 +345,7 @@ export default function PostJobPage() {
                 Requirements <span className="text-red-500">*</span>
               </label>
               <textarea
+                id="requirements"
                 name="requirements"
                 value={formData.requirements}
                 onChange={handleInputChange}
@@ -351,13 +367,15 @@ export default function PostJobPage() {
                   <label htmlFor="email" className="block text-sm font-semibold mb-2">
                     Email Address <span className="text-red-500">*</span>
                   </label>
-                  <Input
+                  <input
+                    id="email"
+                    type="email"
                     value={formData.email}
                     onChange={handleInputChange}
                     name="email"
-                    type="email"
                     placeholder="recruiter@company.com"
                     required
+                    className="w-full px-4 py-2 rounded-lg bg-secondary-button text-foreground border border-background-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
                   />
                   {errors.email && (
                     <p className="text-red-600 text-sm mt-1">{errors.email}</p>
@@ -367,12 +385,14 @@ export default function PostJobPage() {
                   <label htmlFor="contactPhone" className="block text-sm font-semibold mb-2">
                     Phone Number (Optional)
                   </label>
-                  <Input
+                  <input
+                    id="contactPhone"
+                    type="tel"
                     value={formData.contactPhone}
                     onChange={handleInputChange}
                     name="contactPhone"
-                    type="tel"
                     placeholder="+31 (0)6 1234 5678"
+                    className="w-full px-4 py-2 rounded-lg bg-secondary-button text-foreground border border-background-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
                   />
                 </div>
               </div>