jakies tam poprawki

src/components/JobOfferContent.jsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import DOMPurify from 'dompurify';
-import SkillRender from './SkillRender'; // Ensure this import is correctly pointing to your SkillRender component
+import SkillRender from './SkillRender'; 
 
+// eslint-disable-next-line react/prop-types
 const JobOfferContent = ({ id, skills }) => {
   const [jobOffer, setJobOffer] = useState(null);
 
@@ -48,7 +49,7 @@ const JobOfferContent = ({ id, skills }) => {
         <>
           <h1 className="my-4 mx-6 text-3xl font-bold text-slate-800">{jobOffer.name} w {jobOffer.company_name}</h1>
           <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3  gap-4">
-            {jobOffer.skill_levels.map((skillLevel) => {
+            {jobOffer.skill_levels && jobOffer.skill_levels.map((skillLevel) => {
               const skill = skills.find((s) => s.id === parseInt(skillLevel.skill_id));
               return skill ? (
                 <SkillRender key={skill.id} skill={skill.skill_name} level={skillLevel.skill_level} />

src/components/SkillRender.jsx

@@ -31,7 +31,7 @@ const SkillRender = ({key, skill, level,}) => {
 
   return (
     
-    <div className='w-64 h-42 rounded-[15px] bg-slate-200 py-4 m-2 hover:bg-slate-300 drop-shadow-sm' key={key}>
+    <div className='h-42 rounded-[15px] bg-slate-200 py-4 m-2 hover:bg-slate-300 drop-shadow-sm' key={key}>
         <p className='text-center font-bold mb-1 px-2'>{skill}</p> 
         <div className='h-0.5 mx-auto w-52 mt-2 justify-center bg-dimWhite opacity-60'></div>
 

src/components/StepFourJoblisting.jsx

@@ -7,7 +7,7 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => {
       <div className="grid grid-cols-5">
         <div className="col-span-3 col-start-2 mt-12">
           <TextDivider text={`Podaj dane ogłoszeniodawcy`} />
-          <div className="grid grid-cols-3">
+          <div className="grid grid-cols-2">
             <div className="col-span-1 mt-4 mx-2">
               <div className={`${styles.paragraph} px-4 py-2`}>
                 Imię
@@ -21,8 +21,9 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => {
                 id="first_name"
                 onChange={handleChange("first_name")}
                 placeholder="Twoje imię..."
-                className={`border-b-2 px-4 my-2 ${styles.paragraph}`}
+                className={`px-4 mt-2 ${styles.paragraph}`}
               />
+              <div className="bg-black h-0.5 opacity-10"></div>
             </div>
             <div className="col-span-1 mt-4 mx-2">
               <div className={`${styles.paragraph} px-4 py-2`}>
@@ -37,8 +38,9 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => {
                 id="last_name"
                 onChange={handleChange("last_name")}
                 placeholder="Twoje nazwisko..."
-                className={`border-b-2 px-4 my-2 ${styles.paragraph}`}
+                className={`px-4 mt-2 ${styles.paragraph}`}
               />
+              <div className="bg-black h-0.5 opacity-10"></div>
             </div>
             <div className="col-span-1 mt-4 mx-2">
               <div className={`${styles.paragraph} px-4 py-2`}>
@@ -53,15 +55,15 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => {
                 id="contact_email"
                 onChange={handleChange("contact_email")}
                 placeholder="Adres mailowy..."
-                className={`border-b-2 px-4 my-2 ${styles.paragraph}`}
+                className={`px-4 mt-2 ${styles.paragraph}`}
               />
+              <div className="bg-black h-0.5 opacity-10"></div>
             </div>
-            <div className="col-span-2 mt-4 mx-2">
+            <div className="col-span-1 mt-4 mx-2">
               <div className={`${styles.paragraph} px-4 py-2`}>
                 Nazwa firmy
                 <span className={`${styles.paragraph} text-red-700`}>*</span>
               </div>
-              <div className="grid grid-cols-2">
               <input
                 type="text"
                 name="company_name"
@@ -70,9 +72,9 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => {
                 onChange={handleChange("company_name")}
                 id="company_name"
                 placeholder="Wpisz nazwę firmy..."
-                className={`border-b-2 px-4 mr-12 my-2 ${styles.paragraph} col-span-2 `}
+                className={`px-4 mt-2  ${styles.paragraph}`}
               />
-              </div>
+              <div className="bg-black h-0.5 opacity-10"></div>
             </div>
             <div className="col-span-1 mt-4 mx-2">
               <div className={`${styles.paragraph} px-4 py-2`}>
@@ -88,8 +90,9 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => {
                 onChange={handleChange("vat_number")}
                 id="vat_number"
                 placeholder="Wpisz nip..."
-                className={`border-b-2 px-4 my-2 ${styles.paragraph}  `}
-              />
+                className={`px-4 mt-2 ${styles.paragraph}`}
+                />
+                <div className="bg-black h-0.5 opacity-10"></div>
             </div>
           </div>
           <div className={`${styles.flexCenter} gap-16 mt-16`}>

src/components/TextDivider.jsx

@@ -4,7 +4,7 @@ const TextDivider = ({text }) => {
   return (
     <div className='flex items-center justify-center mt-4 mb-6'>
     <div className='h-0.5 bg-black w-[14rem] opacity-30'></div>
-    <p className='text-[24px] mx-8 font-semibold'>
+    <p className='text-[24px] mx-8 font-semibold text-center'>
       {text}
     </p>
     <div className='h-0.5 bg-black w-[14rem] opacity-30'></div>