UI: Add margin between label and input on job posting form

This commit is contained in:
GoHorse Deploy 2026-03-07 10:53:07 -03:00
parent 0d29976502
commit 757429afe6

View file

@ -935,7 +935,7 @@ export default function PostJobPage() {
{step === 1 && ( {step === 1 && (
<div className="mt-8 space-y-6"> <div className="mt-8 space-y-6">
<div> <div>
<Label>{c.labels.jobTitle}</Label> <Label className="mb-2 block">{c.labels.jobTitle}</Label>
<Input <Input
maxLength={65} maxLength={65}
placeholder={c.labels.jobTitlePlaceholder} placeholder={c.labels.jobTitlePlaceholder}
@ -949,7 +949,7 @@ export default function PostJobPage() {
<div className="grid md:grid-cols-[1fr_auto] gap-4 items-end"> <div className="grid md:grid-cols-[1fr_auto] gap-4 items-end">
<div> <div>
<Label>{c.labels.location}</Label> <Label className="mb-2 block">{c.labels.location}</Label>
<div ref={locationRef} className="relative"> <div ref={locationRef} className="relative">
<Input <Input
placeholder={c.labels.locationPlaceholder} placeholder={c.labels.locationPlaceholder}
@ -1011,7 +1011,7 @@ export default function PostJobPage() {
{job.useCepSearch && ( {job.useCepSearch && (
<div> <div>
<Label>CEP</Label> <Label className="mb-2 block">CEP</Label>
<Input <Input
placeholder="00000-000" placeholder="00000-000"
value={job.cep} value={job.cep}
@ -1022,7 +1022,7 @@ export default function PostJobPage() {
<div className="grid md:grid-cols-3 gap-4"> <div className="grid md:grid-cols-3 gap-4">
<div> <div>
<Label>{c.labels.country}</Label> <Label className="mb-2 block">{c.labels.country}</Label>
<select <select
className="w-full px-3 py-2 border rounded-md bg-white" className="w-full px-3 py-2 border rounded-md bg-white"
value={job.country} value={job.country}
@ -1035,7 +1035,7 @@ export default function PostJobPage() {
</select> </select>
</div> </div>
<div> <div>
<Label>{c.labels.contractType}</Label> <Label className="mb-2 block">{c.labels.contractType}</Label>
<select <select
className="w-full px-3 py-2 border rounded-md bg-white" className="w-full px-3 py-2 border rounded-md bg-white"
value={job.contractType} value={job.contractType}
@ -1050,7 +1050,7 @@ export default function PostJobPage() {
</select> </select>
</div> </div>
<div> <div>
<Label>{c.labels.workingHours}</Label> <Label className="mb-2 block">{c.labels.workingHours}</Label>
<select <select
className="w-full px-3 py-2 border rounded-md bg-white" className="w-full px-3 py-2 border rounded-md bg-white"
value={job.workingHours} value={job.workingHours}
@ -1064,10 +1064,10 @@ export default function PostJobPage() {
</div> </div>
<div className="space-y-3"> <div className="space-y-3">
<Label>{c.labels.salary}</Label> <Label className="mb-2 block">{c.labels.salary}</Label>
<div className="grid md:grid-cols-4 gap-4"> <div className="grid md:grid-cols-4 gap-4">
<div> <div>
<Label className="text-xs">{c.labels.salaryMode}</Label> <Label className="mb-2 block text-xs">{c.labels.salaryMode}</Label>
<select <select
className="w-full px-3 py-2 border rounded-md bg-white" className="w-full px-3 py-2 border rounded-md bg-white"
value={job.salaryMode} value={job.salaryMode}
@ -1079,7 +1079,7 @@ export default function PostJobPage() {
</div> </div>
<div> <div>
<Label className="text-xs">{c.labels.currency}</Label> <Label className="mb-2 block text-xs">{c.labels.currency}</Label>
<select <select
className="w-full px-3 py-2 border rounded-md bg-white" className="w-full px-3 py-2 border rounded-md bg-white"
value={job.currency} value={job.currency}
@ -1092,7 +1092,7 @@ export default function PostJobPage() {
</div> </div>
<div> <div>
<Label className="text-xs">{c.labels.period}</Label> <Label className="mb-2 block text-xs">{c.labels.period}</Label>
<select <select
className="w-full px-3 py-2 border rounded-md bg-white" className="w-full px-3 py-2 border rounded-md bg-white"
value={job.salaryPeriod} value={job.salaryPeriod}
@ -1108,7 +1108,7 @@ export default function PostJobPage() {
{job.salaryMode === "fixed" ? ( {job.salaryMode === "fixed" ? (
<div> <div>
<Label className="text-xs">{c.labels.salaryValue}</Label> <Label className="mb-2 block text-xs">{c.labels.salaryValue}</Label>
<Input <Input
type="number" type="number"
placeholder="Ex: 5000" placeholder="Ex: 5000"
@ -1119,7 +1119,7 @@ export default function PostJobPage() {
) : ( ) : (
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
<div> <div>
<Label className="text-xs">{c.labels.salaryMin}</Label> <Label className="mb-2 block text-xs">{c.labels.salaryMin}</Label>
<Input <Input
type="number" type="number"
placeholder="1000" placeholder="1000"
@ -1128,7 +1128,7 @@ export default function PostJobPage() {
/> />
</div> </div>
<div> <div>
<Label className="text-xs">{c.labels.salaryMax}</Label> <Label className="mb-2 block text-xs">{c.labels.salaryMax}</Label>
<Input <Input
type="number" type="number"
placeholder="2000" placeholder="2000"
@ -1142,7 +1142,7 @@ export default function PostJobPage() {
</div> </div>
<div> <div>
<Label>{c.labels.description}</Label> <Label className="mb-2 block">{c.labels.description}</Label>
<RichTextEditor <RichTextEditor
value={job.description} value={job.description}
onChange={(value) => setJob({ ...job, description: value })} onChange={(value) => setJob({ ...job, description: value })}
@ -1165,7 +1165,7 @@ export default function PostJobPage() {
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
<div> <div>
<Label>{c.labels.companyName}</Label> <Label className="mb-2 block">{c.labels.companyName}</Label>
<Input <Input
placeholder={c.labels.companyNamePlaceholder} placeholder={c.labels.companyNamePlaceholder}
value={company.name} value={company.name}
@ -1173,7 +1173,7 @@ export default function PostJobPage() {
/> />
</div> </div>
<div> <div>
<Label>{c.labels.companyWebsite}</Label> <Label className="mb-2 block">{c.labels.companyWebsite}</Label>
<Input <Input
placeholder={c.labels.companyWebsitePlaceholder} placeholder={c.labels.companyWebsitePlaceholder}
value={company.website} value={company.website}
@ -1184,7 +1184,7 @@ export default function PostJobPage() {
<div className="grid md:grid-cols-3 gap-4"> <div className="grid md:grid-cols-3 gap-4">
<div> <div>
<Label>{c.labels.employeeCount}</Label> <Label className="mb-2 block">{c.labels.employeeCount}</Label>
<select <select
className="w-full px-3 py-2 border rounded-md bg-white" className="w-full px-3 py-2 border rounded-md bg-white"
value={company.employeeCount} value={company.employeeCount}
@ -1203,7 +1203,7 @@ export default function PostJobPage() {
</select> </select>
</div> </div>
<div> <div>
<Label>{c.labels.foundedYear}</Label> <Label className="mb-2 block">{c.labels.foundedYear}</Label>
<Input <Input
type="number" type="number"
min="1800" min="1800"
@ -1214,7 +1214,7 @@ export default function PostJobPage() {
/> />
</div> </div>
<div> <div>
<Label>{c.labels.cnpj}</Label> <Label className="mb-2 block">{c.labels.cnpj}</Label>
<Input <Input
placeholder={c.labels.cnpjPlaceholder} placeholder={c.labels.cnpjPlaceholder}
value={company.document} value={company.document}
@ -1224,7 +1224,7 @@ export default function PostJobPage() {
</div> </div>
<div> <div>
<Label>{c.labels.companyDescription}</Label> <Label className="mb-2 block">{c.labels.companyDescription}</Label>
<RichTextEditor <RichTextEditor
value={company.description} value={company.description}
onChange={(value) => setCompany({ ...company, description: value })} onChange={(value) => setCompany({ ...company, description: value })}
@ -1236,7 +1236,7 @@ export default function PostJobPage() {
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
<div> <div>
<Label>{c.labels.applicationChannel}</Label> <Label className="mb-2 block">{c.labels.applicationChannel}</Label>
<select <select
className="w-full px-3 py-2 border rounded-md bg-white" className="w-full px-3 py-2 border rounded-md bg-white"
value={job.applicationChannel} value={job.applicationChannel}
@ -1248,7 +1248,7 @@ export default function PostJobPage() {
</select> </select>
</div> </div>
<div> <div>
<Label>{c.labels.resumeRequirement}</Label> <Label className="mb-2 block">{c.labels.resumeRequirement}</Label>
<select <select
className="w-full px-3 py-2 border rounded-md bg-white" className="w-full px-3 py-2 border rounded-md bg-white"
value={job.resumeRequirement} value={job.resumeRequirement}
@ -1263,7 +1263,7 @@ export default function PostJobPage() {
{job.applicationChannel === "email" && ( {job.applicationChannel === "email" && (
<div> <div>
<Label>{c.labels.applicationEmail}</Label> <Label className="mb-2 block">{c.labels.applicationEmail}</Label>
<Input <Input
type="email" type="email"
placeholder={c.labels.applicationEmailPlaceholder} placeholder={c.labels.applicationEmailPlaceholder}
@ -1275,7 +1275,7 @@ export default function PostJobPage() {
{job.applicationChannel === "url" && ( {job.applicationChannel === "url" && (
<div> <div>
<Label>{c.labels.applicationUrl}</Label> <Label className="mb-2 block">{c.labels.applicationUrl}</Label>
<Input <Input
placeholder={c.labels.applicationUrlPlaceholder} placeholder={c.labels.applicationUrlPlaceholder}
value={job.applicationUrl} value={job.applicationUrl}
@ -1286,7 +1286,7 @@ export default function PostJobPage() {
{job.applicationChannel === "phone" && ( {job.applicationChannel === "phone" && (
<div> <div>
<Label>{c.labels.applicationPhone}</Label> <Label className="mb-2 block">{c.labels.applicationPhone}</Label>
<Input <Input
placeholder={c.labels.applicationPhonePlaceholder} placeholder={c.labels.applicationPhonePlaceholder}
value={job.applicationPhone} value={job.applicationPhone}
@ -1296,7 +1296,7 @@ export default function PostJobPage() {
)} )}
<div> <div>
<Label>{c.languageLabel}</Label> <Label className="mb-2 block">{c.languageLabel}</Label>
<select <select
className="w-full px-3 py-2 border rounded-md bg-white" className="w-full px-3 py-2 border rounded-md bg-white"
value={job.descriptionLanguage} value={job.descriptionLanguage}
@ -1337,7 +1337,7 @@ export default function PostJobPage() {
<div className="mt-8 space-y-6"> <div className="mt-8 space-y-6">
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
<div> <div>
<Label>{c.billing.fiscalType}</Label> <Label className="mb-2 block">{c.billing.fiscalType}</Label>
<select <select
className="w-full px-3 py-2 border rounded-md bg-white" className="w-full px-3 py-2 border rounded-md bg-white"
value={billing.legalType} value={billing.legalType}
@ -1348,7 +1348,7 @@ export default function PostJobPage() {
</select> </select>
</div> </div>
<div> <div>
<Label>{c.billing.fiscalDocument}</Label> <Label className="mb-2 block">{c.billing.fiscalDocument}</Label>
<Input <Input
placeholder={billing.legalType === "company" ? c.billing.cnpjLabel : c.billing.cpfLabel} placeholder={billing.legalType === "company" ? c.billing.cnpjLabel : c.billing.cpfLabel}
value={billing.document} value={billing.document}
@ -1359,7 +1359,7 @@ export default function PostJobPage() {
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
<div> <div>
<Label>{c.billing.billingCountry}</Label> <Label className="mb-2 block">{c.billing.billingCountry}</Label>
<select <select
className="w-full px-3 py-2 border rounded-md bg-white" className="w-full px-3 py-2 border rounded-md bg-white"
value={billing.billingCountry} value={billing.billingCountry}
@ -1372,7 +1372,7 @@ export default function PostJobPage() {
</select> </select>
</div> </div>
<div> <div>
<Label>{c.billing.billingEmail}</Label> <Label className="mb-2 block">{c.billing.billingEmail}</Label>
<Input <Input
type="email" type="email"
placeholder={c.billing.billingEmailPlaceholder} placeholder={c.billing.billingEmailPlaceholder}
@ -1389,7 +1389,7 @@ export default function PostJobPage() {
</div> </div>
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
<div> <div>
<Label>{c.billing.password}</Label> <Label className="mb-2 block">{c.billing.password}</Label>
<Input <Input
type="password" type="password"
placeholder={c.billing.passwordPlaceholder} placeholder={c.billing.passwordPlaceholder}
@ -1398,7 +1398,7 @@ export default function PostJobPage() {
/> />
</div> </div>
<div> <div>
<Label>{c.billing.confirmPassword}</Label> <Label className="mb-2 block">{c.billing.confirmPassword}</Label>
<Input <Input
type="password" type="password"
placeholder={c.billing.confirmPasswordPlaceholder} placeholder={c.billing.confirmPasswordPlaceholder}
@ -1410,7 +1410,7 @@ export default function PostJobPage() {
</div> </div>
<div> <div>
<Label>{c.billing.billingAddress}</Label> <Label className="mb-2 block">{c.billing.billingAddress}</Label>
<textarea <textarea
className="w-full px-3 py-2 border rounded-md bg-white min-h-[96px]" className="w-full px-3 py-2 border rounded-md bg-white min-h-[96px]"
placeholder={c.billing.billingAddressPlaceholder} placeholder={c.billing.billingAddressPlaceholder}
@ -1421,7 +1421,7 @@ export default function PostJobPage() {
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
<div> <div>
<Label>{c.billing.contactName}</Label> <Label className="mb-2 block">{c.billing.contactName}</Label>
<Input <Input
placeholder={c.billing.contactNamePlaceholder} placeholder={c.billing.contactNamePlaceholder}
value={billing.contactName} value={billing.contactName}
@ -1429,7 +1429,7 @@ export default function PostJobPage() {
/> />
</div> </div>
<div> <div>
<Label>{c.billing.contactLastName}</Label> <Label className="mb-2 block">{c.billing.contactLastName}</Label>
<Input <Input
placeholder={c.billing.contactLastNamePlaceholder} placeholder={c.billing.contactLastNamePlaceholder}
value={billing.contactLastName} value={billing.contactLastName}
@ -1440,7 +1440,7 @@ export default function PostJobPage() {
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
<div> <div>
<Label>{c.billing.phone}</Label> <Label className="mb-2 block">{c.billing.phone}</Label>
<Input <Input
placeholder={c.billing.phonePlaceholder} placeholder={c.billing.phonePlaceholder}
value={billing.contactPhone} value={billing.contactPhone}
@ -1448,7 +1448,7 @@ export default function PostJobPage() {
/> />
</div> </div>
<div> <div>
<Label>{c.billing.mobile}</Label> <Label className="mb-2 block">{c.billing.mobile}</Label>
<Input <Input
placeholder={c.billing.mobilePlaceholder} placeholder={c.billing.mobilePlaceholder}
value={billing.contactMobile} value={billing.contactMobile}
@ -1485,7 +1485,7 @@ export default function PostJobPage() {
{step === 4 && ( {step === 4 && (
<div className="mt-8 space-y-6"> <div className="mt-8 space-y-6">
<div> <div>
<Label>{c.payment.method}</Label> <Label className="mb-2 block">{c.payment.method}</Label>
<select <select
className="w-full px-3 py-2 border rounded-md bg-white" className="w-full px-3 py-2 border rounded-md bg-white"
value={paymentMethod} value={paymentMethod}