validation page responsiveness

This commit is contained in:
victorAnumudu
2024-06-14 19:40:24 +01:00
parent 9af40b66cb
commit a133e0c861
4 changed files with 18 additions and 18 deletions
@@ -148,13 +148,13 @@ const EmployerValidation: React.FC<BasicInfoProps> = ({
</p>
</div>
<div className="my-10 flex gap-4 md:gap-10 items-end">
<div className="my-10 flex flex-col md:flex-row gap-4 md:gap-10 md:items-end">
<InputCompOne
parentInputClass="w-full"
parentClass="w-full max-w-[25rem]"
parentClass="w-full md:max-w-[25rem]"
name="title"
label="Applicant's Educational Qualification"
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
labelSpan={`(Please select the emplyee's highest qualification)`}
labelSpanClass='text-[10px]'
select={true}
@@ -165,11 +165,11 @@ const EmployerValidation: React.FC<BasicInfoProps> = ({
error={(props.errors.title && props.touched.title) ? props.errors.title : ''}
/>
<InputCompOne
parentClass="w-full max-w-[25rem]"
parentClass="w-full md:max-w-[25rem]"
label="Applicant's Date of Employment"
name="dob"
parentInputClass="w-full"
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
input
inputType='date'
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem] px-3"
@@ -180,13 +180,13 @@ const EmployerValidation: React.FC<BasicInfoProps> = ({
</div>
<div className="my-10 flex gap-4 md:gap-10 items-end">
<div className="my-10 flex flex-col md:flex-row gap-4 md:gap-10 md:items-end">
<InputCompOne
parentClass="w-full max-w-[25rem]"
parentClass="w-full md:max-w-[25rem]"
label="Applicant's Grade Level"
name="first_name"
parentInputClass="w-full"
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
input
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
value={props.values.first_name}
@@ -194,11 +194,11 @@ const EmployerValidation: React.FC<BasicInfoProps> = ({
error={(props.errors.first_name && props.touched.first_name) ? props.errors.first_name : ''}
/>
<InputCompOne
parentClass="w-full max-w-[25rem]"
parentClass="w-full md:max-w-[25rem]"
label="Applicant's IPPIS Number (optional)"
name="phone"
parentInputClass="w-full"
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
input
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
value={props.values.phone}
@@ -221,13 +221,13 @@ const EmployerValidation: React.FC<BasicInfoProps> = ({
{props.errors.checked && props.touched.checked && <span className='text-[10px] text-red-500'>{props.errors.checked}</span>}
</div>
<div className="my-10 flex gap-4 md:gap-10 items-end">
<div className="my-10 flex flex-col md:flex-row gap-4 md:gap-10 md:items-end">
<InputCompOne
parentClass="w-full max-w-[25rem]"
parentClass="w-full md:max-w-[25rem]"
label="Employer's Name"
name="first_name"
parentInputClass="w-full"
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
labelSpan={`(your full name)`}
labelSpanClass='text-[10px]'
input
@@ -237,11 +237,11 @@ const EmployerValidation: React.FC<BasicInfoProps> = ({
error={(props.errors.first_name && props.touched.first_name) ? props.errors.first_name : ''}
/>
<InputCompOne
parentClass="w-full max-w-[25rem]"
parentClass="w-full md:max-w-[25rem]"
label="Desgination"
name="phone"
parentInputClass="w-full"
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
labelSpan={`(your position)`}
labelSpanClass='text-[10px]'
input