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
+1 -1
View File
@@ -5,7 +5,7 @@ export default function Footer() {
const date = new Date().getFullYear();
return (
<div className="w-full h-20 bg-[F7F7F7] flex items-center">
<div className="w-full h-16 bg-[F7F7F7] flex items-center">
<div className="containerMode flex justify-center md:justify-between items-center flex-wrap gap-2">
<p className="text-[.9375rem] tracking-[2%] font-semibold text-[#969696]">
{date} @ First City Monument Bank Limited
@@ -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
+1 -1
View File
@@ -44,7 +44,7 @@ const Header: React.FC<HiddenMenuItems> = ({
<img
src={Logo}
alt="Logo"
className="w-[90px] h-[90px] xl:w-[117px] xl:h-[117px]"
className="w-20 h-20"
/>
</Link>
+1 -1
View File
@@ -13,7 +13,7 @@ const Layout: React.FC<GetStartedLayoutProps> = ({ children }) => {
<div className='sticky z-50 top-0 bg-white'>
<Header hideSidebar={true} hideMenu={true} />
</div>
<div className="containerMode flex flex-col min-h-[70vh] justify-center items-center">
<div className="containerMode mb-16 flex flex-col min-h-[70vh] justify-center items-center">
{children || <Outlet />}
</div>
<div className="fixed bottom-0 left-0 bg-slate-50 w-full">