UI: Add margin between label and input on job posting form
This commit is contained in:
parent
0d29976502
commit
757429afe6
1 changed files with 38 additions and 38 deletions
|
|
@ -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}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue