bugfix - resolved modal form ui issue
This commit is contained in:
James Wyndham
parent
2e621d0d6c
commit
0cd8f39a40
|
|
@ -44,7 +44,8 @@ const FormLeftDescriptionRightContactUs = () => {
|
|||
<h2 className="mb-8 text-xl font-semibold text-base-content ">
|
||||
Fill in the form
|
||||
</h2>
|
||||
{!localStorage.getItem("contactus") ? (
|
||||
{typeof window !== "undefined" &&
|
||||
!localStorage.getItem("contactus") ? (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="grid gap-4 gap-y-0">
|
||||
{/* Grid */}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ function ModalSignUp() {
|
|||
<div className="flex justify-end pb-2 select-none">
|
||||
<label
|
||||
htmlFor="sign-up-modal"
|
||||
className="cursor-pointer"
|
||||
className="cursor-pointer text-base-content"
|
||||
onClick={() => {
|
||||
reset();
|
||||
}}
|
||||
|
|
@ -46,149 +46,158 @@ function ModalSignUp() {
|
|||
<Icon name="Dismiss20Filled" size="medium" />
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 mt-3 pb-6 rounded-lg"
|
||||
data-aos="fade-up"
|
||||
>
|
||||
<h3 className="pb-1 text-3xl font-bold md:text-3xl pt-6">
|
||||
We Are Growing Fast, and We Want You To Join The Party!
|
||||
</h3>
|
||||
<p className="text-sm md:text-base">
|
||||
Excited to see what we've got! Signup and get started!
|
||||
</p>
|
||||
</div>
|
||||
<form
|
||||
onSubmit={handleSubmit((data) => {
|
||||
console.log(data);
|
||||
reset();
|
||||
})}
|
||||
className="w-full md:w-2/3"
|
||||
>
|
||||
<div className="relative mt-6">
|
||||
<input
|
||||
{...register("email")}
|
||||
type="text"
|
||||
id="SignUpEmail"
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
placeholder="Email…"
|
||||
aria-label="Email…"
|
||||
autoComplete="on"
|
||||
/>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.email?.message}
|
||||
</div>
|
||||
<div className="flex flex-grow flex-col h-[30rem] lg:h-full overflow-y-scroll">
|
||||
<div
|
||||
className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 mt-3 pb-6 rounded-lg"
|
||||
data-aos="fade-up"
|
||||
>
|
||||
<h3 className="pb-1 text-3xl font-bold md:text-3xl pt-6">
|
||||
We Are Growing Fast, and We Want You To Join The Party!
|
||||
</h3>
|
||||
<p className="text-sm md:text-base">
|
||||
Excited to see what we've got! Signup and get started!
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative mt-1">
|
||||
<input
|
||||
{...register("firstName")}
|
||||
id="SignUpFirstName"
|
||||
type="text"
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
placeholder="First Name…"
|
||||
aria-label="First Name…"
|
||||
autoComplete="on"
|
||||
/>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.firstName?.message}
|
||||
<form
|
||||
onSubmit={handleSubmit((data) => {
|
||||
console.log(data);
|
||||
reset();
|
||||
})}
|
||||
className="w-full md:w-2/3"
|
||||
>
|
||||
<div className="relative mt-6">
|
||||
<input
|
||||
type="text"
|
||||
id="SignUpEmail"
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
placeholder="Email…"
|
||||
aria-label="Email…"
|
||||
autoComplete="on"
|
||||
{...register("email")}
|
||||
/>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.email?.message}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-1">
|
||||
<input
|
||||
{...register("lastName")}
|
||||
id="SignUpLastName"
|
||||
type="text"
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
placeholder="Last Name…"
|
||||
aria-label="Last Name…"
|
||||
/>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.lastName?.message}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mt-1">
|
||||
<input
|
||||
{...register("phoneNumber")}
|
||||
id="SignUpPhoneNumber"
|
||||
type="text"
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
placeholder="Phone Number…"
|
||||
aria-label="Phone Number…"
|
||||
/>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.phoneNumber?.message}
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="relative mt-1">
|
||||
<input
|
||||
id="SignUpFirstName"
|
||||
type="text"
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
placeholder="First Name…"
|
||||
aria-label="First Name…"
|
||||
autoComplete="on"
|
||||
{...register("firstName")}
|
||||
/>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.firstName?.message}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-1">
|
||||
<input
|
||||
id="SignUpLastName"
|
||||
type="text"
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
placeholder="Last Name…"
|
||||
aria-label="Last Name…"
|
||||
{...register("lastName")}
|
||||
/>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.lastName?.message}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-1">
|
||||
<input
|
||||
{...register("organisation")}
|
||||
id="SignUpOrganisation"
|
||||
type="text"
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
placeholder="Organisation…"
|
||||
aria-label="Organisation…"
|
||||
/>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.organisation?.message}
|
||||
|
||||
<div className="relative mt-1">
|
||||
<input
|
||||
id="SignUpPhoneNumber"
|
||||
type="text"
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
placeholder="Phone Number…"
|
||||
aria-label="Phone Number…"
|
||||
{...register("phoneNumber")}
|
||||
/>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.phoneNumber?.message}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-1">
|
||||
<select
|
||||
{...register("organisationSize")}
|
||||
id="SignUpCompanySize"
|
||||
defaultValue={""}
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
>
|
||||
<option className="bg-gray-850" value={""} disabled>
|
||||
Company Size…
|
||||
</option>
|
||||
{companySizeList.map((companySizeOption, i) => {
|
||||
return (
|
||||
<option
|
||||
className="bg-gray-850"
|
||||
value={companySizeOption}
|
||||
key={i}
|
||||
>
|
||||
{companySizeOption}
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="relative mt-1">
|
||||
<input
|
||||
id="SignUpOrganisation"
|
||||
type="text"
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
placeholder="Organisation…"
|
||||
aria-label="Organisation…"
|
||||
{...register("organisation")}
|
||||
/>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.organisation?.message}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-1">
|
||||
<select
|
||||
id="SignUpCompanySize"
|
||||
defaultValue={""}
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
{...register("organisationSize")}
|
||||
>
|
||||
<option className="bg-gray-850" value={""} disabled>
|
||||
Company Size…
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.organisationSize?.message}
|
||||
{companySizeList.map((companySizeOption, i) => {
|
||||
return (
|
||||
<option
|
||||
className="bg-gray-850"
|
||||
value={companySizeOption}
|
||||
key={i}
|
||||
>
|
||||
{companySizeOption}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.organisationSize?.message}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-1">
|
||||
<input
|
||||
{...register("password")}
|
||||
id="SignUpPwd"
|
||||
type="password"
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
placeholder="Password..."
|
||||
aria-label="Password"
|
||||
/>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.password?.message}
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="relative mt-1">
|
||||
<input
|
||||
id="SignUpPwd"
|
||||
type="password"
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
placeholder="Password..."
|
||||
aria-label="Password"
|
||||
{...register("password")}
|
||||
/>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.password?.message}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-1 mb-2">
|
||||
<input
|
||||
id="SignUpPwdConfirm"
|
||||
type="password"
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
placeholder="Confirm Password..."
|
||||
aria-label="Confirmed Password"
|
||||
{...register("passwordConfirmation")}
|
||||
/>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.passwordConfirmation?.message}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-1 mb-2">
|
||||
<input
|
||||
{...register("passwordConfirmation")}
|
||||
id="SignUpPwdConfirm"
|
||||
type="password"
|
||||
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
||||
placeholder="Confirmed Password..."
|
||||
aria-label="Confirmed Password"
|
||||
/>
|
||||
<div className="text-start text-sm italic text-error-content">
|
||||
{errors.passwordConfirmation?.message}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Sign Up
|
||||
</button>
|
||||
</form>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Sign Up
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</label>
|
||||
</label>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in New Issue